上一篇简单的过了一遍HTML的常用标签，这一篇继续CSS。


例1 CSS的标签选择器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><!--<linkrel="stylesheet"href="common.css"/>--><style>/*标签选择器，找到所有的标签应用以下样式*/div{color:green;}/*id选择器，找到标签id等于i1的标签，应用以下样式*/#i1{font-size:56px;/*color:green;*/}/*class选择器，找到class=c1的所有标签，应用一下样式*/.c1{background-color:red;}/*层级选择器，找到class=c2下的div下的p下的class=c3标签，应用以下样式*//*.c2divpa{*//**//*}*/.c2divp.c3{background-color:red;}/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/.c4,.c5,.c6{background-color:aqua;}</style></head><body><divclass="c4">1</div><divclass="c5">1</div><divclass="c6">1</div><divclass="c2"><div></div><div><p><span>oo</span><aclass="c3">uu</a></p></div></div><divclass="c3">sdfsdf</div><spanclass="c1">1</span><divclass="c1">2</div><aclass="c1">3</a><aid="i1">baidu</a><div>99</div><div>99</div><div>99</div><div><div>asdf</div></div></body></html>



例2 加载CSS文件

创建一个css文件，把style内容写进去


在html文件里面导入这个css文件，效果和直接写是一样的

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"href="common.css"/></head><body><div>asdfasdfsdf</div></body></html>




例3 float的使用

如果不用float，那么因为<div>是块级标签，他会自动变成两行,使用float之后，漂浮起来变成一行，具体的理解是，css是分层级的，一个是标准层，一个是浮动层；他float之后就漂浮到标准标签的外面的一层了（浮动层），那么这个float的标签后面的标签，如果没有float的话，会自动往上跑（标准层），这样的结果有可能导致浮动的标签遮挡了后面没有浮动的标签。同时这个float的标签如果他的上面是一个标准的标签，他会自动紧贴上面；如果他的上面是一个浮动的，他会跟着浮动到同一行，如果塞不下才会跑到下面一行。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>.c1{color:red;/*background-color:#FF69B4;*//*background-color:rgb(25,180,10);*//*background-color:red;*/font-size:32px;height:150px;width:500px;/*按照父亲相对占比*/}</style></head><body><divclass="c1">test1</div><div><div>test2</div><div>test3</div></div></body></html>




例4. 加载背景图片

使用背景图片的时候需要指定高度，宽带；一个使用技巧是通过Chrome的F12，可以滚轮编辑数字像素


<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>.img{background-p_w_picpath:url("4.gif");height:200px;width:400px;background-repeat:no-repeat;}.img2{background-p_w_picpath:url("2.jpg");height:50px;width:50px;background-position:84px-58px;}</style></head><body><divclass="img"></div><divclass="img2"></div></body></html>



列5 边距

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><div><div></div></div><div><div><input/><input/><input/></div></div></body></html>


注意那三个input距离上边和左边的距离


列6 clear的使用

clear可以禁止float, 默认一个float的标签后面跟着的标签会跟着float起来，可以指定clear来控制是否漂浮

这里有一个很不错的文章解释了float和clear的使用

前面已经说了

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。如果使用了clear，那么在float那一层里面 他会把横向排列的div再变成纵向的，但是不影响标准层的排列

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html


例如；红色

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div></div><div></div><div></div><div></div></body></html>




例7 position的使用 首先看fixed的使用，固定标签在屏幕的某个位置，即使拖动滚轮 他也在那里不会动。fixed以后，效果和float类似，他就漂浮起来了（想象立体空间），这样导致他后面的div会自动往上跑，造成一部分遮挡。可以通过调整margin来正常显示

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><div></div><div>返回顶部</div></body></html>


例8position的使用场景2，外面使用relative，里面用absolute，这样的可以保证 111始终在父div的固定位置, 这个absolute的位置可以为正数，也可以为负数（跑出去边框）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><div><div><div>111</div></div></div></body></html>


例9加载图片,和背景图使用类似，也需要指定高度和宽度

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><imgsrc="2.jpg"></body></html>


例10 一个模拟对话框的界面

display:none 隐藏标签

如果希望实现弹出框一个居中的效果，可以指定top： 50%，left：50%，这样左上角就居中了，然后根据弹出框的尺寸，左移动一半，下移动一半

如有多层，可以指定z-index来觉得谁在谁上面，z-index越大，这个div就越在上面


<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>.hide{display:none;}.modal{width:400px;height:300px;background-color:#dddddd;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-150px;z-index:10;}.shadow{position:fixed;top:0;left:0;right:0;bottom:0;/*background-color:black;*//*opacity:0.4;*/background-color:rgba(0,0,0,.6);z-index:9;}</style></head><body><inputtype="button"value="添加"/><divclass="shadow"></div><divclass="modal"><inputtype="text"/><inputtype="text"/><inputtype="text"/><inputtype="text"/></div><div></div></body></html>

例11. 菜单高亮效果

布局一般分为三大块：header,body和foot

根据需求可以left float或者right float

cursor是鼠标放上去的效果

.w里面 margin：0 auto可以保证在拖曳浏览器大小的时候，整个页面始终居中显示

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>body{margin:0;}ul{margin:0;list-style-type:none;}ulli{float:left;padding:08px08px;color:white;cursor:pointer;}/*当鼠标移动到li标签上时，自动应用以下样式*/ulli:hover{background-color:blueviolet;}.pg-header{height:44px;background-color:#2459a2;line-height:44px;}.w{width:980px;margin:0auto;background-color:red;}</style></head><body><divclass="pg-header"><divclass="w"><ul><li>菜单一</li><li>菜单二</li><li>菜单三</li><li>菜单三</li><li>菜单三</li><li>菜单三</li><li>菜单三</li><li>菜单三</li></ul></div></div><divclass="pg-body"></div><divclass="pg-footer"></div></body></html>