CSS进阶学习（一）
作者：互联网
一、<div>标记与<span>标记
1、CSS控制div块
<div>(division)简单而言是一个区块容器标记
1 <!DOCTYPE html >
2 <html>
3 <head>
4 <title>标记范例</title>
5 <style type="text/css">
6 div{
7 font-size: 18px; /*字号大小*/
8 font-weight: bold; /*字体粗细*/
9 font-family: Arial; /*字体*/
10 color: #ffffff; /*颜色*/
11 background-color: #001166; /*背景颜色*/
12 text-align: center; /*对齐方式*/
13 width: 300px; /*块宽度*/
14 height: 100px; /*块高度*/
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 这是一个div标记
21 </div>
22 </body>
23 </html>
View Code
2、<div>与<span>的区别
<div>是一个块级（block-level）元素，它里面的内容会自动换行，而<span>仅仅是一个行内元素（inline elements）,它里面的内容不会换行。
1 <html> 2 <head> 3 <title>div与sapn的区别</title> 4 </head> 5 <body> 6 <p>div标记不同行</p> 7 <div><img src="/images/1.jpg" border="0"></div> 8 <div><img src="/images/1.jpg" border="0"></div> 9 <div><img src="/images/1.jpg" border="0"></div> 10 <p>span标记同一行</p> 11 <span><img src="/images/1.jpg" border="0"></span> 12 <span><img src="/images/1.jpg" border="0"></span> 13 <span><img src="/images/1.jpg" border="0"></span> 14 </body> 15 </html>View Code
二、盒子模型
一个盒子模型是由content（内容）、border（边框）、padding（间隙）、margin（间隔）这4个部分组成。
三、元素的定位
1、float定位
float定位
2、position定位
2.1、position绝对定位
position绝对定位
2.2、position相对定位
1 <!DOCTYPE html >
2 <html>
3 <head>
4 <title>position属性</title>
5 <style type="text/css">
6 body{
7 margin: 10px;
8 font-family: Arial, Helvetica, sans-serif;
9 font-size: 13px;
10 }
11 .father{
12 background-color: #fffea6;
13 border: 1px dashed #111111;
14 width: 100%;
15 height: 100%;
16 padding: 5px;
17 }
18 #block{
19 background-color: mediumturquoise;
20 border: 1px dashed #000000;
21 padding: 10px;
22 position:relative; /*relative绝对定位*/
23 left: 20px; /*块的左边框离页面左边界20px*/
24 top: 40px; /*块的上边框离页面上边界40px*/
25 }
26 </style>
27 </head>
28 <body>
29 <div class="father">
30 <div id="block">relative</div>
31 </div>
32 </body>
33 </html>
position相对定位
3、z-index空间位置
1 <!DOCTYPE html >
2 <html>
3 <head>
4 <title>z-index属性</title>
5 <style type="text/css">
6 body{
7 margin: 10px;
8 font-family: Arial, Helvetica, sans-serif;
9 font-size: 13px;
10 }
11 #block1{
12 background-color: #fff0ac;
13 border: 1px dashed #000000;
14 padding: 10px;
15 position: absolute;
16 left: 20px;
17 top: 30px;
18 z-index: 1;
19 }
20 #block2{
21 background-color: mediumturquoise;
22 border: 1px dashed #000000;
23 padding: 10px;
24 position:absolute;
25 left: 40px;
26 top: 50px;
27 z-index: 0;
28 }
29 #block3{
30 background-color: mediumturquoise;
31 border: 1px dashed #1974eb;
32 padding: 10px;
33 position:absolute;
34 left: 60px;
35 top: 70px;
36 z-index: -1;
37
38 }
39 </style>
40 </head>
41 <body>
42 <div class="father">
43 <div id="block1">AAAAAAAA</div>
44 <div id="block2">BBBBBBBB</div>
45 <div id="block3">CCCCCCCC</div>
46 </div>
47 </body>
48 </html>
View Code
四、CSS排版观念
1、CSS排版
1 <html> 2 <head> 3 <title>CSS排版</title> 4 </head> 5 <body> 6 <div id="container"> 7 <div id="banner"></div> 8 <div id="content"> 9 <div class="blog"> 10 <div class="date"></div> 11 <div class="blogcontent"></div> 12 </div> 13 <div class="othet"></div> 14 </div> 15 <div id="links"> 16 <div class="calendarhead"></div> 17 <div class="calendartable"></div> 18 <div class="side"></div> 19 <div class="syndicate"></div> 20 <div class="friends"></div> 21 </div> 22 <div class="footer"></div> 23 </div> 24 </body> 25 </html>View Code
2、CSS定位排版使用
1 //仅供才考，此代码未完成
2 <html>
3 <head>
4 <title>CSS排版</title>
5 <style type="text/css">
6 body{
7 margin: 0px;
8 font-size: 13px;
9 font-family: Arial;
10 }
11 #container{
12 position: relative;
13 width:100%;
14 }
15 #banner{
16 height: 80px;
17 border: 1px solid #000000;
18 text-align: center;
19 background-color: #a2d9ff;
20 padding: 10px;
21 margin-bottom: 2px;
22 }
23 #content{
24 float:left;
25 text-align: center;
26 padding-right: 200px; /*内容往回挤200px*/
27 width: 600px;
28 }
29 #footer{
30 clear: both; /*不受浮动影响*/
31 text-align: center;
32 height: 30px;
33 border: 1px solid #000000;
34 }
35 #links{
36 float: right;
37 width: 200px;
38 border: 1px solid #000000;
39 margin-left: -200px; /*往左拉回200px*/
40 text-align: center;
41 }
42 </style>
43 </head>
44 <body>
45 <div id="container">
46 <div id="banner"></div>
47 <div id="content">
48 <div class="blog">
49 <div class="date"></div>
50 <div class="blogcontent"></div>
51 </div>
52 <div class="othet"></div>
53 </div>
54 <div id="links">
55 <div class="calendarhead"></div>
56 <div class="calendartable"></div>
57 <div class="side"></div>
58 <div class="syndicate"></div>
59 <div class="friends"></div>
60 </div>
61 <div class="footer"></div>
62 </div>
63 </body>
64 </html>
View Code
五、排版实例：我的博客
1 <!DOCTYPE html >
2 <html>
3 <head>
4 <title>CSS排版</title>
5 <style type="text/css">
6 #globallink{
7 width: 760px;height: 163px; /*设置块的尺寸，高度大于Banner图片*/
8 margin: 0px;padding: 0px; /*再设置背景颜色，作为导航菜单的背景色*/
9 background: #9ac7ff url(/banner.jpg) no-repeat top;
10 font-size: 12px;
11 }
12 #globallink ul{
13 list-style: none;
14 position: absolute;
15 width: 417px;
16 left: 400px;top: 145px;
17 padding: 0px;margin: 0px;
18 }
19 #globallink li{
20 float:left;text-align: center;
21 padding: 0px 6px 0px 6px;
22 }
23 #globallink a:link,#globallink a:visited{
24 color: #004a87;
25 text-decoration: none;
26 }
27 #globallink a:hover{
28 color: #ffffff;
29 text-decoration: underline;
30 }
31 #parameter{
32 position: relative;
33 float: left;
34 width: 210px;
35 padding: 0px;margin: 0px;
36 }
37 #parameter div ul{
38 list-style: none;
39 margin: 5px 15px 0px 15px;
40 padding: 0px;
41 }
42 #parameter div ul li{
43 padding: 2px 3px 2px 15px;
44 background: url(/images/Info_i.jpg) no-repeat 8px 7px;
45 border-bottom: 1px dashed #999999; /*虚线作为下划线*/
46 }
47 #parameter div ul li a:link,#parameter div ul li a:visited{
48 color: #000000;
49 text-decoration: none;
50 }
51 #parameter div ul li a:hover{
52 color: #008cff;
53 text-decoration: underline;
54 }
55 #main{
56 float:left;
57 position: relative;
58 font-size: 12px;
59 margin: 0px 20px 5px 20px;
60 width: 510px;
61 }
62 #main div{
63 position: relative;
64 margin: 20px 0px 30px 0px;
65 }
66 #main div h3{
67 font-size: 15px;
68 margin: 0px;
69 padding: 0px 0px 3px 0px;
70 border-bottom: 1px dotted #999999; /*下划淡色虚线*/
71 }
72 #main div h3 a:link,#main div h3 a:visited{
73 color: #662900;
74 text-decoration: none;
75 }
76 #main div h3 a:hover{
77 color: #0072ff;
78 }
79 #main p.author{
80 margin: 0px;
81 text-align: right;
82 color: #888888;
83 padding: 2px 5px 2px 0px;
84 }
85 #main p.content{
86 margin: 0px;
87 padding:10px 0px 10px 0px;
88 }
89 #footer{
90 clear: both;
91 text-align: center;
92 background-color: #daeeff;
93 margin: 0px;padding: 0px;
94 color: #004a87;
95 }
96 #footer p{
97 margin: 0px;
98 padding: 2px;
99 }
100 body{
101 font-family: Arial, Helvetica, sans-serif;
102 font-size: 12px;
103 margin: 0px;
104 padding: 0px;
105 text-align: center;
106 background-color: #000000;
107 }
108 #container{
109 position: relative;
110 margin: 1px auto 0px auto;
111 width: 760px;
112 text-align: left;
113 background-color: #ffffff;
114 border-left: 1px dashed #aaaaaa;
115 border-right: 1px dashed #aaaaaa;
116 border-bottom: 1px dashed #aaaaaa;
117 }
118 </style>
119 </head>
120 <body>
121 <div id="container">
122 <div id="globallink">
123 <ul>
124 <li><a href="#">个人首页</a></li>
125 <li><a href="#">控制面板</a></li>
126 <li><a href="#">我的文章</a></li>
127 <li><a href="#">我的相册</a></li>
128 <li><a href="#">我的圈子</a></li>
129 <li><a href="#">给我留言</a></li>
130 </ul>
131 </div>
132 <div id="parameter">
133 <div id="author">
134 <p class="mypic"><img src="/mypic.jpg"></p>
135 <p>艾萨克的BLOG</p>
136 </div>
137 <div id="lcategory"></div>
138 <div id="llatest"></div>
139 <div id="lcomment">
140 <h4 class="comment"><span>最新评论</span></h4>
141 <ul>
142 <li><a href="#">[beep]勘误</a></li>
143 <li><a href="#">[jennifer]你这妖言惑众</a></li>
144 <li><a href="#">[li4]哇，第一张尤其zan</a></li>
145 <li><a href="#">[beep]挺好挺好:)</a></li>
146 <li><a href="#">[bingri]来总第三方收到</a></li>
147 <li><a href="#">[inming]博士加油</a></li>
148 </ul>
149 </div>
150 <div id="lfriend"></div>
151 </div>
152 <div id="main">
153 <div class="article">
154 <h3><a href="#">新冠情况</a></h3>
155 <p class="author">King@2021-01-06 15:50</p>
156 <p class="content">新京报快讯 据国家卫健委消息，1月6日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例63例，其中境外输入病例11例（上海5例，河北2例，广东2例，陕西2例），本土病例52例（河北51例，辽宁1例）；无新增死亡病例；无新增疑似病例。
157
158 当日新增治愈出院病例21例，解除医学观察的密切接触者699人，重症病例较前一日减少1例。
159
160 境外输入现有确诊病例280例（其中重症病例4例），无现有疑似病例。累计确诊病例4359例，累计治愈出院病例4079例，无死亡病例。
161
162 截至1月6日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例485例（其中重症病例13例），累计治愈出院病例82159例，累计死亡病例4634例，累计报告确诊病例87278例，无现有疑似病例。累计追踪到密切接触者915142人，尚在医学观察的密切接触者19582人。
163
164 31个省（自治区、直辖市）和新疆生产建设兵团报告新增无症状感染者79例（境外输入8例）；当日转为确诊病例4例（境外输入1例）；当日解除医学观察12例（境外输入9例）；尚在医学观察无症状感染者423例（境外输入244例）。
165
166 累计收到港澳台地区通报确诊病例9939例。其中，香港特别行政区9074例（出院8201例，死亡154例），澳门特别行政区46例（出院46例），台湾地区819例（出院700例，死亡7例）。</p>
167 <p class="show">浏览[98]|评论[2]</p>
168 </div>
169 <div class="article">
170 <h3><a href="#">新冠情况</a></h3>
171 <p class="author">King@2021-01-06 15:50</p>
172 <p class="content">新京报快讯 据国家卫健委消息，1月6日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例63例，其中境外输入病例11例（上海5例，河北2例，广东2例，陕西2例），本土病例52例（河北51例，辽宁1例）；无新增死亡病例；无新增疑似病例。
173
174 当日新增治愈出院病例21例，解除医学观察的密切接触者699人，重症病例较前一日减少1例。
175
176 境外输入现有确诊病例280例（其中重症病例4例），无现有疑似病例。累计确诊病例4359例，累计治愈出院病例4079例，无死亡病例。
177
178 截至1月6日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例485例（其中重症病例13例），累计治愈出院病例82159例，累计死亡病例4634例，累计报告确诊病例87278例，无现有疑似病例。累计追踪到密切接触者915142人，尚在医学观察的密切接触者19582人。
179
180 31个省（自治区、直辖市）和新疆生产建设兵团报告新增无症状感染者79例（境外输入8例）；当日转为确诊病例4例（境外输入1例）；当日解除医学观察12例（境外输入9例）；尚在医学观察无症状感染者423例（境外输入244例）。
181
182 累计收到港澳台地区通报确诊病例9939例。其中，香港特别行政区9074例（出院8201例，死亡154例），澳门特别行政区46例（出院46例），台湾地区819例（出院700例，死亡7例）。</p>
183 <p class="show">浏览[98]|评论[2]</p>
184 </div>
185 <div class="article">
186 <h3><a href="#">新冠情况</a></h3>
187 <p class="author">King@2021-01-06 15:50</p>
188 <p class="content">新京报快讯 据国家卫健委消息，1月6日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例63例，其中境外输入病例11例（上海5例，河北2例，广东2例，陕西2例），本土病例52例（河北51例，辽宁1例）；无新增死亡病例；无新增疑似病例。
189
190 当日新增治愈出院病例21例，解除医学观察的密切接触者699人，重症病例较前一日减少1例。
191
192 境外输入现有确诊病例280例（其中重症病例4例），无现有疑似病例。累计确诊病例4359例，累计治愈出院病例4079例，无死亡病例。
193
194 截至1月6日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例485例（其中重症病例13例），累计治愈出院病例82159例，累计死亡病例4634例，累计报告确诊病例87278例，无现有疑似病例。累计追踪到密切接触者915142人，尚在医学观察的密切接触者19582人。
195
196 31个省（自治区、直辖市）和新疆生产建设兵团报告新增无症状感染者79例（境外输入8例）；当日转为确诊病例4例（境外输入1例）；当日解除医学观察12例（境外输入9例）；尚在医学观察无症状感染者423例（境外输入244例）。
197
198 累计收到港澳台地区通报确诊病例9939例。其中，香港特别行政区9074例（出院8201例，死亡154例），澳门特别行政区46例（出院46例），台湾地区819例（出院700例，死亡7例）。</p>
199 <p class="show">浏览[98]|评论[2]</p>
200 </div>
201 <div class="article"></div>
202 <div class="article"></div>
203 </div>
204 <div id="footer">
205 <p>更新时间：2021-01-15©；All Rights Reserved</p>
206 </div>
207 </div>
208 </body>
209 </html>
View Code
六、JavaScript与CSS
1、设置文字颜色渐变
1 <!DOCTYPE html >
2 <html>
3 <head>
4 <title>颜色渐变的文字</title>
5 <script type="text/javascript">
6 function Delta(sHex1,sHex2,iNum){
7 //计算每个字的变化量
8 var iHex1=parseInt("0x"+sHex1);
9 var iHex2=parseInt("0x"+sHex2);
10 return (iHex2-iHex1)(iNum-1);
11 }
12 function Colorful(sText,sColor1,sColor2){
13 if(sText.length<=1){
14 //如果只有一个字符，渐变无从谈起，直接输出并返回
15 document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
16 return;
17 }
18 //RGB三色分离，分别获取变化的小量delta
19 var fDeltaR=Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
20 var fDeltaG=Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
21 var fDeltaB=Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
22 var sColorR=parseInt("0x"+sColor1.substring(0,2));
23 var sColorG=parseInt("0x"+sColor1.substring(2,4));
24 var sColorB=parseInt("0x"+sColor1.substring(4,6));
25 for(var i=0;i<sText.length;i++){
26 document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
27 /*每当输出一个字符，颜色的3个分量都相应的变化
28 当字符输出完成时，正好由sColor1变成sColor2*/
29 sColorR+=fDeltaR;
30 sColorG+=fDeltaG;
31 sColorB+=fDeltaB;
32
33 }
34 }
35
36 </script>
37 </head>
38 <body>
39
40 </body>
41 </html>
View Code
2、设置鼠标文字跟随
1 <!DOCTYPE html >
2 <html>
3 <head>
4 <title>文字跟随鼠标</title>
5 <style type="text/css">
6 body{
7 background-color: #004593;
8 }
9 .spanstyle{
10 color: #fff000;
11 font-family: "Courier New";
12 font-size: 13px;
13 font-weight: bold;
14 position: absolute; /*绝对定位*/
15 top: -50px;
16 }
17 </style>
18 <script language="javascript">
19 var x,y; //鼠标指针当前在页面上的位置
20 var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距
21 var flag=0;
22 var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串
23 message=message.split(""); //将字符串分割为字符数组
24
25 var xpos=new Array() //存储每个字符的x位置的数组
26 for(i=0;i<message.length;i++){
27 xpos[i]=-50;
28 }
29 var ypos=new Array() //存储每个字符的y位置的数组
30 for(i=0;i<message.length;i++){
31 ypos[i]=-50;
32 }
33
34 for(i=0;i<message.length;i++){ //动态生成显示每个字符的span标记
35 //使用span来标记字符，是为了方便使用CSS，并可以自由地绝对定位
36 document.write("<span id='span"+i+"' class='spanstyle'>");
37 document.write(message[i]);
38 document.write("</span>");
39 }
40
41 if(document.layers){
42 document.captureEvents(Event.MOUSEMOVE);
43 }
44
45 function handlerMM(e){//从事件得到鼠标光标在页面上的位置
46 x=(document.layers)?e.pageX:document.body.scrollLeft+even.clientX;
47 y=(document.layers)?e.pageY:document.body.sceollTop+even.clientY;
48 flag=1;
49 }
50
51 function makesnake(){ //重定位每个字符的位置
52 if(flag==1 && document.all){//如果是IE
53 for(i=message.length-1;i>=1;i--){
54 xpos[i]=xpos[i-1]+step;/*从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标
55 +step间隔*/
56 /*这样随着光标移动事件，就能得到一个动态的波浪状的显示效果*/
57 ypos[i]=ypos[i-1]; //垂直坐标为前一个字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
58 }
59 xpos[0]=x+step//第一个字符的坐标位置紧跟鼠标光标
60 ypos[0]=y
61 /*上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使用这些字符一个接一个
62 移动到新位置*/
63 //该算法显示字符串就有点像人类的游行队伍一样，
64
65 for(i=0;i<=message.length;i++){
66 var thisspan =eval("span"+(i)+".style");/*妙用eval根据字符串得到该字符串表示的对象*/
67 thisspan.posLeft=xpos[i];
68 thisspan.posTop=ypos[i];
69 }
70 }
71 else if(flag==1 && document.layers){
72 for(i=message.length-1;i>=1;i--){
73 xpos[i]=xpos[i-1]+step;
74 ypos[i]=ypos[i-1];
75 }
76 xpos[0]=x+step;
77 ypos[0]=y;
78 for(i=0;i<=message.length-1;i++){
79 var thisspan=eval("document.span"+i);
80 thisspan.left=xpos[i];
81 thisspan.top=ypos[i];
82 }
83 }
84 var timer =setTimeout("makesnake()",10)/*设置10毫秒的定时器来连续调用makesnake（），
85 时刻刷新显示字符串的位置*/
86 }
87 document.onmousemove=handlerMM;
88 </script>
89 </head>
90 <body onl oad="makesnake();">
91
92 </body>
93 </html>
View Code
标签：padding,font,进阶,病例,color,学习,0px,margin,CSS 来源： https://www.cnblogs.com/Sheldon180621/p/14247375.html