标签：图片文字 alt one 技术分享 har https nbsp lang text
1.认识CSS的 盒子模型。
2.CSS选择器的灵活使用。
3.实例:
a.图片文字用div等元素布局形成HTML文件。
b.新建相应CSS文件，并link到html文件中。
c.CSS文件中定义样式
a)div.img：border,margin,width,float
b)div.img img：width，height
c)div.desc：text-align,padding
d)div.img:hover：border
e)div.clearfloat：clear
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>维尼熊</title> <link rel="stylesheet" type="text/css" href="../static/10/20.css"> </head> <body> <div> <div class="img"> <a href="https://baike.so.com/doc/6087123-6300228.html"> <img src="http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg" ></a> <div><a href="https://baike.so.com/doc/6087123-6300228.html">维尼简介</a></div> </div> <div> <div class="img"> <a href="https://baike.so.com/doc/4326998-4531580.html"> <img src="http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"></a> <div><a href="https://baike.so.com/doc/4326998-4531580.html">维尼与蜂蜜</a></div></div> <div> <div class="img"> <a href="http://wenda.so.com/q/1364865961066962?src=150"> <img src="http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg";></a> <div><a href="http://wenda.so.com/q/1364865961066962?src=150">维尼的朋友</a></div></div> <div> <div class="img"> <a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea"> <img src="http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"></a> <div><a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea">维尼日常</a></div></div> <div class="clearfloat"> <img src="http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg"> <img src="http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"> <img src="http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg"> <img src="http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"> </div> </body> </html>
img{ width: 300px; } div.img{ border:1px solid #EEEEEE; width:180px; float: left; margin: 5px; } div.img img{ width:100%; height: auto; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border: 2px solid darkturquoise; } .clearfloat{ clear: both; }
标签：图片文字 alt one 技术分享 har https nbsp lang text
原文地址：http://www.cnblogs.com/892356821qqcom/p/7699144.html
