- 认识CSS的 盒子模型。
- CSS选择器的灵活使用。
- 实例:
- 图片文字用div等元素布局形成HTML文件。
- 新建相应CSS文件，并link到html文件中。
- CSS文件中定义样式
- div.img：border,margin,width,float
- div.img img：width，height
- div.desc：text-align,padding
- div.img:hover：border
- div.clearfloat：clear
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>pagefour</title> ???<link href="style4.css" rel="stylesheet" type="text/css"></head><body><p >?<span>小猪佩奇</span>?</p><div class="moban"> ???<div class="img"> ???????<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508479156743&di=4a4 ???????bc087ad2421492685a20a4d87c919&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F85552872%2Fk03293qviys_ori_3.jpg"></a> ???????<div><a href="">Rainbow</a></div> ???</div> ???<div class="img"> ???????<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508479183222&di=f8361 ???????7f3f524041bc028b0a6a4304827&imgtype=0&src=http%3A%2F%2Fjoymepic.joyme.com%2Farticle%2Fuploads%2F20176%2F181500369917363715.jpeg"></a> ???????<div><a href="">Ice Cream</a></div> ???</div> ???<div class="img"> ???????<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508479306393&di=577790a11bac2914eeaaeeea ???????f1e41a3a&imgtype=0&src=http%3A%2F%2Fv.114la.com%2Fimg%2F2016%2F12%2F02%2Fhunantv%2Fcomic%2F10%2FY3I636q5ki6.jpg"></a> ???????<div><a href="">Ball</a></div> ???</div> ???<div class="img"> ???????<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508479333388&di=f779eb9c9c076b65c4f ???????bb3c664470e98&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161225%2Fbab765bab0c74abf8096bfb751c5e7ae_th.jpeg"></a> ???????<div><a href="">Bathday Party</a></div> ???</div></div></body></html>
?body{ ?????text-align: center; ?????background-color: lightcoral; ?} ?.moban{ ?????align:center; ?????width:860px; ?????margin: 0 auto; ?} ?p{ ?????align:center; ?????font-size: 20px; ?} ?p span{ ?????font-family: 华文彩云; ?????font-size: 25px; ?} ?div.img { ?????float:left; ?????margin: 5px; ?????border-radius: 25px; ?????-webkit-border-radius: 25px; ?????-moz-border-radius: 25px; ?????-o-border-radius: 25px; ?} ?div.img img{ ?????width: 180px; ?????height: auto; ?????border-radius: 25px; ?????-webkit-border-radius:25px; ?????-moz-border-radius: 25px; ?????-o-border-radius: 25px; ?????border: 2px dashed #AD4337; ?} ?div.img div{ ?????background-color:lightsalmon; ?????border-radius: 50px; ?????-webkit-border-radius:50px; ?????-moz-border-radius: 50px; ?????-o-border-radius: 50px; ?????padding-bottom: 3px; ?????width:170px; ?????margin:0 auto; ?????border: 1.5px dashed #AD4337; ?????font-family:"MV Boli"; ?} ?div.img div a{ ?????color:chocolate; ?????font-size: 16px; ?} ?div.img div:hover { ???background-color: wheat; ?} ?a { ?????text-decoration: none; ?} ?div.img img:hover { ?????opacity:0.8; ?}
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/wuwenx/p/7701407.html