标签：padding font 进阶 病例 color 学习 0px margin 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。