html Usos creativos de la pseudo clase de css:target

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Usos creativos de la pseudo clase de css:target相关的知识,希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>The :target Trick - Modal</title>
	
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="base.css">
	
	<style>
		#modal-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			justify-content: center;
			align-items: center;
			display: flex;
		}
		.modal {
			width: 70%;
			background: #fff;
			padding: 20px;
			text-align: center;
		}
		#modal-container:not(:target) {
			opacity: 0;
			visibility: hidden;
			transition: opacity 1s, visibility 1s;
		}
		#modal-container:target {
			
			opacity: 1;
			visibility: visible;
			transition: opacity 1s, visibility 1s;
		}
	</style>
</head>
<body>

	<header>
		<div class="wrapper">
			<h1>Site Title</h1>
			<a href="#modal-container" aria-label="Open Navigation">Open Modal</a>
		</div>
	</header>

	<div class="wrapper body-wrapper">

		<p><a href="https://github.com/ireade/demo.bitsofco.de/blob/gh-pages/the-target-trick/modal.html">View Source</a></p>

		<p>Venmo tacos ennui hoodie lomo tousled. Meh irony blue bottle brooklyn paleo. Post-ironic PBR&B blue bottle, iPhone meh ennui forage salvia normcore neutra chicharrones gentrify. Banjo jean shorts selfies, try-hard venmo before they sold out 8-bit gluten-free pinterest sustainable messenger bag you probably haven't heard of them poutine. Scenester farm-to-table craft beer, knausgaard leggings letterpress brunch asymmetrical. Brooklyn you probably haven't heard of them typewriter flannel. Etsy austin venmo, knausgaard green juice squid butcher kombucha literally beard jean shorts VHS tote bag.</p>

		<p>Artisan bushwick pop-up, biodiesel viral semiotics cliche pinterest fingerstache godard lo-fi franzen forage. Hammock narwhal ethical, kogi put a bird on it pork belly bushwick photo booth +1 master cleanse pinterest direct trade vegan tofu. Small batch cold-pressed paleo wolf, skateboard asymmetrical cred vegan pickled pinterest freegan. Man bun portland man braid, thundercats swag keffiyeh scenester semiotics put a bird on it keytar four loko beard pour-over. Meh VHS biodiesel actually poutine, normcore neutra beard narwhal hoodie. Synth sustainable cred meditation health goth tousled. Post-ironic cornhole scenester whatever, authentic bushwick keffiyeh venmo kinfolk chia.</p>

		<p>Sriracha XOXO master cleanse lomo blue bottle, banh mi fashion axe man braid flexitarian. Meggings pug ennui, chambray 8-bit celiac gentrify. Bitters direct trade chia semiotics. Synth fixie mixtape, health goth four dollar toast vinyl 3 wolf moon VHS schlitz. Drinking vinegar letterpress VHS poutine, venmo cronut distillery artisan. Everyday carry craft beer butcher DIY. Normcore affogato chillwave, thundercats banh mi fingerstache keytar pop-up four loko four dollar toast.</p>

		

	</div>

	<div id="modal-container">
		
		<div class="modal">
			
			<h2>Modal Title</h2>

			<p>Sriracha XOXO master cleanse lomo blue bottle, banh mi fashion axe man braid flexitarian. Meggings pug ennui, chambray 8-bit celiac gentrify. Bitters direct trade chia semiotics. Synth fixie mixtape, health goth four dollar toast vinyl 3 wolf moon VHS schlitz. Drinking vinegar letterpress VHS poutine, venmo cronut distillery artisan. Everyday carry craft beer butcher DIY. Normcore affogato chillwave, thundercats banh mi fingerstache keytar pop-up four loko four dollar toast.</p>

			<a href="#" aria-label="Close Modal"><i class="fa fa-times"></i></a>

		</div>


	</div>



</body>
</html>

以上是关于html Usos creativos de la pseudo clase de css:target的主要内容,如果未能解决你的问题,请参考以下文章

text Diagrama de la base de datos

sql Borrado de documentos de la papelera

HTML,JS,JQUERY:filter dynamiquement une liste de noms(ou autre)pendant la saisie dans le cham.过滤动态(示

markdown Para definir布局de la forma tradicional con Blade en Laravel usamos la directiva @yield de es

javascript De la lista de gente a la que sigues,te oculta solo a los que te siguen

markdown Remplaza la variable en el texto de la pregunta