CSS常用标签
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
HTML的用法没有什么技巧，就是死记硬背，当然你不需要都记下来，能记住20个常用的标签基本上就OK了，其他不常用的标签百度一下也能找到相应的答案，HTML这是一个文本，如果想要改变其的输出内容，需要在重新修改HTML文件，这时候很多程序员就不乐意了，后来又有了Css，这个Css可以对HTML进行修饰操作。接下来，让我们一起来看看Css的强大之处吧。
一.什么是CSS
1 #！/usr/bin/env python 2 #_*_coding:utf-8_*_ 3 #@author :yinzhengjie 4 #blog:http://www.cnblogs.com/yinzhengjie/tag/python%E8%87%AA%E5%8A%A8%E5%8C%96%E8%BF%90%E7%BB%B4%E4%B9%8B%E8%B7%AF/ 5 #EMAIL:y1053419035@qq.com 6 7 ''' 8 一.什么是Css: 9 1>.层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 10 2>.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 11 3>.CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。 12 13 二.Css的特点： 14 1>.丰富的样式定义 15 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。 16 2>.易于使用和修改 17 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类， 18 使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。 19 3>.多页面应用 20 CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 21 4>.层叠 22 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的 23 样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。 24 5>.页面压缩 25 在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会 26 大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。[ 27 28 三.关于选择器的优先级： 29 1.不同类型的选择器比较： 30 A>.ID选择器优先级最高； 31 B>.属性选择器其次； 32 C>.类选择器； 33 D>.标签选择器优先级最低； 34 2.同种类型的选择器比较： 35 A>.相同选择器，就近原则，即往下优先级的代码优先级越高； 36 B>.关键字!important;优先级最高！尽管是ID选择器也干不过!important;这个参数。 37 38 感兴趣的小伙伴可以参考：https://baike.baidu.com/item/CSS/5457?fr=aladdin 39 '''
二.CSS直接选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> /*这是定义样式的标签，也就是css专用的,当然细心的小伙伴会发现，我们的注释方式会换掉的，跟golang注释有点像了。*/ 7 8 a { /*这是标签选择器，表示匹配所有的a标签，并将里面的内容定义为红色(red)*/ 9 color: red; 10 } 11 #baidu{ /*定义一个ID选择器，匹配到相应的ID进行以下的操作*/ 12 color: yellow; 13 } 14 15 .yzj{ /*class选择器，表示找到class="yzj"的标签，匹配到该标签后，他们的颜色为红色*/ 16 color: skyblue !important; /*关键字：“!important”表示优先级最高，同类的选择器越往下匹配的优先级越高， 17 但是如果你在最上面用关键字声明（!important）那就不管下面的同类在处理相同的标签定义了什么属性，这个优先级是最高的。*/ 18 } 19 20 .jie{ /*class选择器，表示找到class="jie"的标签，匹配到该标签后，他们的为绿色*/ 21 color: green; 22 } 23 24 [n="100"]{ /*属性选择器，表示找到标签中自定义的属性是n="100"的标签，然后将其颜色变成紫色（英文：rebeccapurple）*/ 25 color:fuchsia; 26 } 27 28 input[type="text"]{ /*定义一个属性选择器，表示找到type="text"的input标签。*/ 29 color:rebeccapurple; 30 } 31 32 33 34 /* 35 关于选择器的优先级： 36 一.不同类型的选择器比较： 37 1>.ID选择器优先级最高； 38 2>.属性选择器其次； 39 3>.类选择器； 40 4>.标签选择器优先级最低； 41 二.同种类型的选择器比较： 42 1.相同选择器，就近原则，即往下优先级的代码优先级越高； 43 2.关键字!important;优先级最高！尽管是ID选择器也干不过!important;这个参数。 44 */ 45 46 </style> 47 </head> 48 <body> 49 <div>尹正杰</div> 50 <img src="尹正杰.jpg"> 51 <div> 52 <p id="baidu">百度</p> 53 <p class="yzj">谷歌</p> 54 <p class="yzj jie">阿里云<a>万网</a></p> 55 </div> 56 <a>中国检验检疫科学研究院</a> 57 <p n="100">睿智融科</p> 58 59 <input type="text" /> 60 <input type="text" /> 61 <input type="password" /> 62 </body> 63 </html>
三.CSS间接选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> /*Css专用标签*/ 7 8 9 /*div p{ !*层级选择器，递归查找,会匹配在div标签中所有的p标签。*!*/ 10 /*color:green;*/ 11 /*}*/ 12 13 /*div >p{ !*也是一种层级选择器，只是和上面的那种方式相比，不去递归查找。即在div标签中的子标签查找p标签，换句话说就是只查看div标签的儿子类型标签，不会查找其孙子的标签！*!*/ 14 /*color:darkgoldenrod;*/ 15 /*}*/ 16 17 /*.yzj >p span{ !*首先手匹配class为yzj的标签，之后在这个标签中找到p的子标签，最后在这个p标签再去找span标签，匹配成功就会去对字体进行染色哟。*!*/ 18 /*color:slateblue;*/ 19 /*}*/ 20 21 .yzj,.jie{ /*定义一个组合选择器，可以把多个选择器合并成一个，前提是他们的属性相同的前提下再用哟，这样就可以避免写2个不同名称的而属性相同的选择器啦.*/ 22 color:red; 23 } 24 25 .jie:hover{ /*定义一个伪类选择器，当你把鼠标放在被匹配的标签后，Css就会生效，我们可以让字体颜色变色*/ 26 color:deepskyblue; 27 } 28 29 /*以上举例只是商用的几种选择器，更多Css选择器请参考：http://www.w3school.com.cn/cssref/css_selectors.asp*/ 30 31 </style> 32 </head> 33 <body> 34 <div>尹正杰</div> 35 <img src="D:Python_projectspython_filepython3Css尹正杰.jpg"> 36 <div class="yzj"> 37 <p id="baidu">百度 38 <span>66666666666</span> 39 </p> 40 <p><span>啦啦啦~</span></p> 41 42 <p class="yzj">谷歌</p> 43 44 <p class="jie">阿里云 45 <a>万网</a> 46 </p> 47 48 <span >啦啦啦~</span> 49 50 <a> 51 <p>yinzhengjie 52 <span>哈哈~</span> 53 </p> 54 </a> 55 56 </div> 57 <a>中国检验检疫科学研究院</a> 58 <p n="100">睿智融科</p> 59 60 <input type="text" /> 61 <input type="text" /> 62 <input type="password" /> 63 <div class="yzj">AAAAAAAAAAAAAA</div> 64 <a class="jie">BBBBBBBBBBBBBBB</a> 65 66 </body> 67 </html>
四.样式设计
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 8 /*.jky{*/ 9 /*color: #B22222; !*定义字体颜色,关于颜色这里推荐用RGB的方式定义，更多请参考：http://tool.oschina.net/commons?type=3*!*/ 10 /*background-color:#00FF00;!*定义字体背景颜色，如果和其他选择器有冲突，您非要让背景颜色为爱选择器优先级最高可以在green后面用!important参数！*!*/ 11 /*}*/ 12 .yzj{ 13 font-size:30px;/*调整字体大小*/ 14 /*background-color:#FF1493; !*把字体背景颜色调成粉色，其优先级会高于上面的选择器，除非上面用了!important;这个参数*!*/ 15 /*height:200px;!*定义高度为200像素*/ 16 /*height:20%; !*定义高度为其父级标签的20%,要注意的是，如果其没有父级抱歉，默认不能用百分百的形式来定义高度，需要你手动指定像素。*/ 17 /*400px;!*定义宽度为400像素*/ 18 /*40%; !*定义宽度为其父级标签的40%*/ 19 background-image:url(尹正杰.jpg);/*定义页面的背景图片，需要传入一张图片的路径*/ 20 background-repeat:no-repeat;/*定义网页背景图是否重复，no-repeat表示不重复，repeat-x表示在x轴上重复，repeat-y表示在y轴上重复。*/ 21 height:1000px;/*定义网页背景图的高度位500像素*/ 22 width:1000px; 23 } 24 25 .jie{ /*将一张图片的任何一个图标显示出来，前提是你自己制定像素的大小，用着大小来展示你想要从一张图片得到的图标。*/ 26 background-image:url(尹正杰.jpg); 27 background-repeat:no-repeat; 28 background-position-y:-111px; /*注意，这行参数是调试图片的y轴移动，下面哪行是控制x轴移动的*/ 29 background-position-x:-106px; 30 /*以上四局可以浓缩成一句：background:url(尹正杰.jpg) no-repeat -111px -106px*/ 31 height:50px; 32 width:50px; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="yzj">尹正杰</div> 38 <div style="500px;background-color:brown;height:500px;"> <!--定义改行的宽度为500像素,即宽度用“width”关键字表示，背景颜色和高度用“background-color”，“height”表示。--> 39 <div class="jie">中国检验检检疫科学研究院</div> 40 </div> 41 42 <div class="jie">111111</div> 43 44 </body> 45 </html>
五.css文件引用方式
1 /*.jky{*/ 2 /*color: #B22222; !*定义字体颜色,关于颜色这里推荐用RGB的方式定义，更多请参考：http://tool.oschina.net/commons?type=3*!*/ 3 /*background-color:#00FF00;!*定义字体背景颜色，如果和其他选择器有冲突，您非要让背景颜色为爱选择器优先级最高可以在green后面用!important参数！*!*/ 4 /*}*/ 5 .yzj{ 6 font-size:30px;/*调整字体大小*/ 7 /*background-color:#FF1493; !*把字体背景颜色调成粉色，其优先级会高于上面的选择器，除非上面用了!important;这个参数*!*/ 8 /*height:200px;!*定义高度为200像素*/ 9 /*height:20%; !*定义高度为其父级标签的20%,要注意的是，如果其没有父级抱歉，默认不能用百分百的形式来定义高度，需要你手动指定像素。*/ 10 /*400px;!*定义宽度为400像素*/ 11 /*40%; !*定义宽度为其父级标签的40%*/ 12 background-image:url(尹正杰.jpg);/*定义页面的背景图片，需要传入一张图片的路径*/ 13 background-repeat:no-repeat;/*定义网页背景图是否重复，no-repeat表示不重复，repeat-x表示在x轴上重复，repeat-y表示在y轴上重复。*/ 14 height:1000px;/*定义网页背景图的高度位500像素*/ 15 1000px; 16 } 17 18 .jie{ /*将一张图片的任何一个图标显示出来，前提是你自己制定像素的大小，用着大小来展示你想要从一张图片得到的图标。*/ 19 background-image:url(尹正杰.jpg); 20 background-repeat:no-repeat; 21 background-position-y:-111px; /*注意，这行参数是调试图片的y轴移动，下面哪行是控制x轴移动的*/ 22 background-position-x:-106px; 23 /*以上四局可以浓缩成一句：background:url(尹正杰.jpg) no-repeat -111px -106px*/ 24 height:50px; 25 50px; 26 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 .yzj{ 8 color:red; font-size:30px; 9 } 10 </style> 11 12 <link rel="stylesheet" href="commons.css" /> <!--会加载"commons.css"配置文件的样式--> 13 </head> 14 <body> 15 <div style="color:red; font-size:30px;"></div> 16 <div style="color:red; font-size:30px;"></div> 17 <div style="color:red; font-size:30px;"></div> 18 <div style="color:red; font-size:30px;"></div> 19 <div class="yzj">尹正杰</div> <!--表示直接引用"yzj"的属性，其效果等于上面四行的每一行的内容，我们不需要像上面那样，每次写的时候都要手动写一遍其 20 属性，上面四个都是一样的属性，我们只需要把class标签改成yzj就好啦！当然也有优先级之分，上面手写的优先级是高于class="yzj"的优先级的！--> 21 <div class="jie">yinzhengjie</div> <!--我们虽然看不到jie这个样式，但是有一个link标签，它回去读取commons.css文件的内容，里面有jie的内容。 22 推荐工作中用这种形式，这样大家在别的HTML文件也可以调用该文件中的样式啦--> 23 </body> 24 </html>
六.display用法
1.display=none的用法展示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 7 <style> 8 .yzj{ 9 color: red; 10 font-size:30px; 11 } 12 .hide{ 13 display:none;/*定义一个隐藏标签，让display等于none会将隐藏数据，可以是图片，文字，或是弹出的登录框等等。 14 当然这个display的值不仅仅可以等于none,还可以等于block,inline,inline-block等*/ 15 } 16 </style> 17 </head> 18 <body> 19 <input type="button" value="现身吧！" onclick="showDiv();"> <!--定义一个input标签，让type="button"中的，button按钮 20 和"showDiv();"函数相绑定，下面的原理是一样的--> 21 <input type="button" value="隐身吧！" onclick="hideDiv();"> 22 <div id="100" class="yzj hide">我有一只小毛驴从来也不骑，突然一天心血来潮骑他它去赶集......</div> 23 <script> <!--这是一个javascript脚本，实现的功能我已经做了注释--> 24 function showDiv() { 25 document.getElementById(100).classList.remove('hide');/*让display的值不为none,就无法隐藏数据了，数据就会原形毕露啦！*/ 26 } 27 function hideDiv(){ 28 document.getElementById(100).classList.add('hide'); /*原理同上，这里只是又把hide属性加上啦，即又让display的值等于none啦，这样数据的内容又会被隐藏掉啦！*/ 29 } 30 </script> 31 </body> 32 </html>
2.dispaly扩展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 </head> 7 <body> 8 9 10 <div class="yzj">11111111</div> <!--定义一个块级标签，自己单独占有一行--> 11 <div class="yzj">22222222</div> 12 <a>AAAAAAA</a> <!--定义一个内联标签，该标签接着上个标签的位置显示数据，而不是换行显示数据。--> 13 <a>bbbbbbbb</a> 14 <div style="display:inline">1111111</div> <!--给div标签添加一个属性：style="display:inline"就会让这个块级标签转换成内联标签--> 15 <div style="display:inline">2222222</div> 16 <a style="display:block">3333333</a> <!--给a标签添加一个style="display:block"属性，就会让这个内联标签变身成为块级标签。--> 17 <a style="display:block">4444444</a> 18 <a style="background-color:rebeccapurple;height:200px;400px;display:inline-block;">我有一只小毛驴 我从来也不骑。。。。</a> <!--注意，内联标签 19 设置高度和宽度的像素都是不生效的！这2个参数默认情况下只对块级标签生效。如果你硬是想要这内连标签让这些参数对其生效的话，只需要将display的值改成inline-block即可！--> 20 </body> 21 </html>
七.边框和边距
1.边框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 .yzj{ 8 background-color: #dddddd; 9 padding: 10px; 10 border-left: 3px solid transparent; /*设置颜色为透明色，并制定边框的位置为左侧。*/ 11 } 12 13 .yzj:hover{ 14 border-left: 3px solid rebeccapurple; 15 } 16 </style> 17 </head> 18 <body> 19 20 <div style="height: 200px;border: 1px solid red;"></div> <!--如果不制定方向，表示上下左右都会有边框出现--> 21 <div style="background-color: #dddddd;border-left: 3px solid rebeccapurple;padding: 10px">尹正杰</div> <!--这种方式是给左侧加标签！--> 22 <br/> 23 <div class="yzj"> 24 尹正杰笔记 25 </div> 26 </body> 27 </html>
2.边距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 </head> 7 <body> 8 <div style="margin-left:500px;background-color:chartreuse;color:white;"> <!--定义一个外边距，表示将一行的顶格数据整体往右空出500像素，可以用浏览器看看效果就好啦！--> 9 外边距-left 10 </div> 11 12 <div style="padding-left:500px;background-color:rebeccapurple;color:white;"> <!--定义一个内边距，表示将一行的内容（数据）往右空出500像素--> 13 内边距-left 14 </div> 15 16 <div style="margin:500px;background-color:chartreuse;color:white;"> 17 外边距四周 18 </div> 19 20 <div style="padding-left:500px;background-color:rebeccapurple;color:white;"> 21 内边距四周 22 </div> 23 </body> 24 </html>
八.位置（回到顶部案例）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 .FixedImmobility{ 8 position:fixed; /*position的值为fixed表示永久固定，也就是说匹配到该选择器的标签其内容是固定在页面的某个角落不动的！*/ 9 bottom:300px; /*表示距离底部(bottom)的距离是300像素，当然你可以把bottom参数改成top那就宝石距离顶部的距离是300像素！*/ 10 right:0; /*表示匹配的标签在页面的右侧*/ 11 } 12 13 .RollingContent{ 14 position:relative;/*单独使用relative其实是没有作用的，这个属性你写或不写都是无所谓的，对页面的效果是无所谓的，它的用法一般是和absolute标签配合用， 15 也就是说当一个子标签的position属性是absolute时，absolute标签会往其父级往上递归查找含有relative的标签，找到后，absolute标签根据relative标签的规格将 16 内容输入到指定位置，但是如果找到最外层还是没有找到relative标签，那么含有absolute属性的标签就会将内容直接按照原来的规则输出到浏览器屏幕上！*/ 17 height:300px; 18 width:300px; 19 background-color:rebeccapurple; 20 } 21 22 .yzj{ 23 position:absolute; /*position的值为absolute表示初次固定，也就是说匹配到该选择器的标签其内容是会随着用户滚动鼠标时，标签的内容也会跟着滚动*/ 24 bottom:100px; /*表示距离底部(bottom)的距离是300像素，当然你可以把bottom参数改成top那就宝石距离顶部的距离是300像素！*/ 25 right:0; /*表示匹配的标签在页面的右侧*/ 26 } 27 28 </style> 29 </head> 30 <body> 31 <div class="RollingContent"> 32 <div> 33 <div class="yzj">666666666</div> 34 </div> 35 </div> 36 37 38 <div style="background-color:#dddddd;height:2000px;"></div> 39 <div class="FixedImmobility">返回顶部</div> 40 41 <div class="yzj">我要去哪</div> 42 </body> 43 </html>
九.对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 .modal{ /*定义一个对惶恐，让其在网页的正中间！*/ 8 height:300px; /*指定对话框的高度*/ 9 width:400px; /*指定对话框的宽度*/ 10 background-color:white; /*指定对话框的背景颜色*/ 11 position:fixed; /*定义对话框是固定不动的，不会随着鼠标的滑动该改变其位置*/ 12 top:0; 13 left:50%; 14 margin-left:-200px; 15 top:200px; 16 margin-yop:-150px; 17 z-index:30; 18 } 19 20 .hide{ 21 display:none; /*隐藏*/ 22 } 23 24 .touch{ 25 position:fixed; 26 background-color:black; 27 top:0; 28 left:0; 29 right:0; 30 bottom:0; 31 z-index:20; 32 opacity:0.5; 33 } 34 35 </style> 36 37 </head> 38 <body> 39 <input type="button" value="现身吧！" onclick="showDiv();"> 40 41 <div style="background-color:#dddddd;height:2000px;"></div> 42 <div id="100" class="modal "> 43 <input type="button" value="隐身吧！" onclick="hideDiv();"> 44 </div> 45 <div id="200" class="touch"></div> 46 47 48 <script> 49 function showDiv() { 50 document.getElementById(100).classList.remove('hide');/*让display的值不为none,就无法隐藏数据了，数据就会原形毕露啦！*/ 51 document.getElementById(200).classList.remove('hide'); 52 } 53 54 function hideDiv(){ 55 document.getElementById(100).classList.add('hide'); /*原理同上，这里只是又把hide属性加上啦，即又让display的值等于none啦，这样数据的内容又会被隐藏掉啦！*/ 56 document.getElementById(200).classList.add('hide'); 57 } 58 </script> 59 60 61 62 </body> 63 </html>
十.对话框案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 .modal{ /*定义一个对惶恐，让其在网页的正中间！*/ 8 height:300px; /*指定对话框的高度*/ 9 width:400px; /*指定对话框的宽度*/ 10 background-color:white; /*指定对话框的背景颜色*/ 11 position:fixed; /*定义对话框是固定不动的，不会随着鼠标的滑动该改变其位置*/ 12 top:0; 13 left:50%; 14 margin-left:-200px; 15 top:200px; 16 margin-yop:-150px; 17 z-index:30; /*这个值谁大谁就会在上面的一层，和下面的touch选择器可以进行对比！*/ 18 } 19 20 .hide{ 21 display:none; /*隐藏*/ 22 } 23 24 .touch{ 25 position:fixed; 26 background-color:black; 27 top:0; 28 left:0; 29 right:0; 30 bottom:0; 31 z-index:20; 32 opacity:0.5; /*0.5表示永久透明，也就是说我们能看到第一层的数据，但是我们选择不了第一层的数据。*/ 33 } 34 </style> 35 36 </head> 37 <body> 38 <div style="background-color:#dddddd;height:3000px;"> 39 <input type="button" value="现身吧！" onclick="showDiv();"> 40 41 <h1>尹正杰:我有一只小毛驴从来也不骑，忽然一天心血来潮....</h1> 42 </div> 43 44 <div id="100" class="modal hide"> 45 <input type="button" value="隐身吧！" onclick="hideDiv();"> 46 </div> 47 <div id="200" class="touch hide"></div> 48 49 <script> 50 function showDiv() { 51 document.getElementById(100).classList.remove('hide'); <!--让display的值不为none,就无法隐藏数据了，数据就会原形毕露啦！--> 52 document.getElementById(200).classList.remove('hide'); 53 } 54 function hideDiv(){ 55 document.getElementById(100).classList.add('hide'); <!--原理同上，这里只是又把hide属性加上啦，即又让display的值等于none啦，这样数据的内容又会被隐藏掉啦--> 56 document.getElementById(200).classList.add('hide'); 57 } 58 </script> 59 </body> 60 </html>
十一.浮动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 <style> 7 body{ 8 margin:0; /*表示消除body标签的边距，也就是让margin的值为0即可。*/ 9 } 10 </style> 11 </head> 12 <body> 13 <div style="background-color:slateblue;"> <!--定义父标签背景颜色是紫色，里面的div标签都是子标签。--> 14 <div style="float:left;background-color:green;">第一章</div> <!--float定义你的字符串往哪个方向飘动--> 15 <div style="float:left;background-color:green;">第二章</div> 16 <div style="float:right;background-color:green;">第三章</div> 17 <div style="clear:both;"></div> <!--其中style="clear:both;"这个参数表示父标签的高度随着子标签的高度一致。这种情况是其父级标签没有设置高度！--> 18 </div> 19 20 <div style="heigh:48px;background-color:springgreen;line-height:48px"> <!--其中line-height:48px;表示会根据高度是48像素进行自动居中显示，所以line-height是根据已知高度居中的关键字--> 21 尹正杰 22 </div> 23 24 <br/> <!--表示会打印一个空行--> 25 26 <div style="heigh:48px;background-color:brown;text-align:center;"> <!--表示将数据进行上下左右居中操作！--> 27 尹正杰 28 </div> 29 </body> 30 </html>
十二.布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正杰</title> 6 7 <style> 8 body{ 9 margin:0; 10 } 11 12 .pg-header{ 13 height:48px; 14 background-color:brown; 15 color:white; 16 line-height:48px; 17 } 18 19 .yzj{ 20 height:48px;width:980px;background-color:green;margin:0 auto /*根据宽度和高度自动居中*/ 21 } 22 23 .left{ 24 float:left; 25 } 26 27 .right{ 28 float:right; 29 } 30 31 32 .pg-header .menus a{ 33 padding:0 10px; /*设置一个内边距，上下边距为0像素，左右边距为10像素*/ 34 display:inline-block; 35 } 36 37 .pg-header .menus a:hover{ 38 background-color:bisque; 39 } 40 41 </style> 42 43 </head> 44 <body> 45 <div class="pg-header"> 46 <div class="yzj"> 47 <div>尹正杰</div> 48 <div class="menus left"> 49 <a href="#">菜单一</a> <!--注意："#"表示不做跳转，即使href是跳转参数，只是会在字符串下多一个下划线。--> 50 <a href="#">菜单二</a> 51 <a href="#">菜单三</a> 52 </div> 53 <div class="menus right"> 54 <a href="#">登录</a> 55 <a href="#">注册</a> 56 </div> 57 58 </div> 59 </div> 60 61 <div class="yzj"></div> 62 63 </body> 64 </html>