标签：sheet 新建 auto oat news 设置 选择 float order
认识CSS的 盒子模型。
CSS选择器的灵活使用。
实例:
图片文字用div等元素布局形成HTML文件。
新建相应CSS文件，并link到html文件中。
CSS文件中定义样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>喜迎十九大</title> <link rel="stylesheet" type="text/css" href="../static/css/sj.css"> </head> <body bgcolor="#ff0000"> <p align="center">喜迎十九大</p> <div> <div class="shijiuda"> <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%85%B1%E4%BA%A7%E5%85%9A%E7%AC%AC%E5%8D%81%E4%B9%9D%E6%AC%A1%E5%85%A8%E5%9B%BD%E4%BB%A3%E8%A1%A8%E5%A4%A7%E4%BC%9A/1629417?fromtitle=%E5%8D%81%E4%B9%9D%E5%A4%A7&fromid=22165012&fr=aladdin" > <img src="http://www.rmzxb.com.cn/upload/resources/image/2016/12/19/1409276_600x600.jpg" width="300" height="200"></a> <div class="wenzi"><a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%85%B1%E4%BA%A7%E5%85%9A%E7%AC%AC%E5%8D%81%E4%B9%9D%E6%AC%A1%E5%85%A8%E5%9B%BD%E4%BB%A3%E8%A1%A8%E5%A4%A7%E4%BC%9A/1629417?fromtitle=%E5%8D%81%E4%B9%9D%E5%A4%A7&fromid=22165012&fr=aladdin">人民大会堂</a></div> </div> <div class="shijiuda"> <a href="http://www.china.com.cn/19da/2017-10/17/content_41746815.htm"> <img src="http://pic.people.com.cn/NMediaFile/2014/1104/MAIN201411040859000083605869534.jpg" width="300" height="200"></a> <div class="wenzi"><a href="http://www.china.com.cn/19da/2017-10/17/content_41746815.htm">习大大</a></div> </div> <div class="shijiuda"> <a href="http://www.china.com.cn/19da/2017-10/19/content_41760784.htm"> <img src="http://www.gov.cn/zhuanti/2014-03/13/2637455/images/dff6462385294f26981a7f14653eebb7.jpg" width="300" height="200"></a> <div class="wenzi"><a href="http://www.china.com.cn/19da/2017-10/19/content_41760784.htm">李总理</a></div> </div> </div> <div class="clearfloat"> <img src="http://cpc.people.com.cn/NMediaFile/2017/1017/MAIN201710171729000327986509825.jpg" width="1000" height="700"> <img src="http://www.gov.cn/xinwen/2017-10/18/5232568/images/79d4907b9dd349f1960e134f88986d71.jpg" width="1000" height="700"> <img src="http://i2.chinanews.com/simg/hd/2017/10/15/d823cede2c5c419089ec87296088d13f.jpg" width="1000" height="700"> <img src="http://i2.chinanews.com/simg/hd/2017/10/15/e234ddb7650448c28e90f5d13abedb50.jpg" width="1000" height="700"> <img src="http://i2.chinanews.com/simg/hd/2017/10/15/633cdaaeba45484aa04564dcf1179353.jpg" width="1000" height="700"> </div> </body> </html>
p{ font-size: 500%; color: yellow; font-family: "华文行楷"; } div.shijiuda{ border:2px solid #999999;/*设置盒子的边框线条*/ width: 300px; float:left;/*设置浮动对象，往左边靠拢*/ margin:5px;/*设置边框之间的距离*/ } div.shijiuda.img{ width: 100%; height: auto; } div.wenzi{ font-size: 150%; font-family: "华文行楷"; text-align: center;/*设置文字居中*/ padding:5px; /*设置文字距离边框的宽度*/ } /*设置鼠标移动到边框的反应*/ .img:hover{ border:2px solid #ffff33; } div.clearfloat{ clear: left; }
标签：sheet 新建 auto oat news 设置 选择 float order
原文地址：http://www.cnblogs.com/xxxiaoxiannv/p/7700999.html
