CSS实例【十】

最新推荐文章于 2023-12-26 14:08:56 发布

虾尾丸子

最新推荐文章于 2023-12-26 14:08:56 发布

阅读量137

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/118057300

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

终于又到了休息的一天，大小周真的羡慕双休啊～
这一章是CSS对齐和CSS生成内容

<!DOCTYPE html>
<html lang="en">
	<!-- lang是每张页面主要语言声明的属性  en表示英文（详细见ISO语言代码）-->
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			border: #e9cfff solid 0.1875rem;
		}
		.center{
			margin: auto;
			width: 60%;
			border: 3px solid #4CAF50;
			padding: 0.3125rem;
		}
		.left{
			/* position可设置位置对齐 */
			margin: auto;
			position: absolute;
			left: 0rem;
			width: 18.75rem;
			border: 0.1875rem solid #00CC00;
			
			
		}
		.float_right
		{
			/* float可设置左右对齐 */
			float: right;
			width: 18.75rem;
			border: 3px solid #008CBA;
			background-color: #16B8D2;
			
		}
	
		a:after{content: "("attr(href)")";}
		
		/* 事先约定好在哪计数 */
		body{counter-reset:section;}
		h1{counter-reset:subsection;}
		
		h1:before{
			/* 在section这计数 */
			counter-increment: section;
			/* 谁+计的数+. => eg:Section 1.  */
			content: "Section " counter(section) ". ";
			
		}
		h2:before{
			/* 在subsection这计数 */
			counter-increment: subsection;
			/* 计的数.计的数 =>eg:1.1 */
			content: counter(section) "." counter(subsection) " ";
		}
		q:lang(en)
		{
			quotes: "~" "~" "'" "'";
		}
		</style>
	</head>
	<body>
		<h1>一、CSS对齐</h1>
		<h2>1.元素居中对齐: margin: auto;</h2>
		<div class="center">
			<p><b>注意：</b>使用margin：auto无法兼容IE8，除非 ！DOCTYPE已经声明</p>
		</div>
		
		<h2>2.左右对齐：position:absolute</h2>
		<div class="left">
			<p>使用position：absolute + left/right：0px来实现左右对齐</p>
		</div>
		<br>
		<br>
		<br>
		<br>
		<h2>3.使用跨浏览器解决方案，设置左右对齐</h2>
		<div class="float_right">
			<p><b>注意：</b>当使用浮动属性对齐，需要包括！DOCTYPE声明，如果不声明IE浏览器会产生奇怪的效果。</p>
		</div>
		<br>
		<br><br>
		
		<h1>二、CSS生成的内容</h1>
		<h2>1.把括号内的url用content属性插入到每个链接后面</h2>
		<p><a href="//www.baidu.com/">百度</a> - 搜索引擎。</p>
		<p><b>注意:</b>仅当 !DOCTYPE已经定义 IE8支持 content属性</p>
		<br>
		<br>
		<h2>2.章节和分节的编号是“第1节”，“1.1”，“1.2”等</h2>
		<br>
		<h1>HTML tutorials</h1>
		<h2>HTML tutorials</h2>
		<h2>XHTML tutorials</h2>
		<h2>CSS tutorials</h2>
		
		<h1>Scripting tutorials</h1>
		<h2>JavaScript</h2>
		<h2>VBScript</h2>
		
		<h1>XML tutorials</h1>
		<h2>XML</h2>
		<h2>XSL</h2>
		<p>因为我前面分章节写代码，所以可能序号有点不整齐了</p>
		
		<h2>3.quotes属性指定了引号</h2>
		<!-- q标签是引用属性 -->
		<p><q>This is a <q>big</q> quote.</q></p>
	</body>
</html>

又是祈求涨粉的一天～