CSS实例：图片导航块
- 认识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
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PHOTO</title> <link rel="stylesheet" type="text/css" href="../static/css/1020.css"> </head> <body> <div class="logo"> <div class="small"> <a href="https://bangumi.bilibili.com/anime/2580?from=search&seid=18070620123919499344"> <img src="https://i0.hdslb.com/bfs/bangumi/207b3c90f16629eb54f060d54d5efb7d29bb9563.jpg_225x300.jpg"></a> <div class="describe"><a href="https://bangumi.bilibili.com/anime/2580?from=search&seid=18070620123919499344">干物妹小埋</a></div> </div> <div class="small"> <a href="https://bangumi.bilibili.com/anime/1660"> <img src="https://i0.hdslb.com/bfs/bangumi/d3ce7564ddf58b2f7245b104fb578a5655e55168.jpg_225x300.jpg"></a> <div class="describe"><a href="https://bangumi.bilibili.com/anime/1660">夏目友人帐</a></div> </div> <div class="small"> <a href="https://bangumi.bilibili.com/anime/1586"> <img src="https://i0.hdslb.com/bfs/bangumi/e1f891ad2602265655f3ef181e343e253f017fce.jpg_225x300.jpg"></a> <div class="describe"><a href="https://bangumi.bilibili.com/anime/1586">Fate/stay night</a></div> </div> <div class="small"> <a href="https://bangumi.bilibili.com/anime/3450"> <img src="https://i0.hdslb.com/bfs/bangumi/14ba6643f22405e2777cca992002cc6411601334.jpg_225x300.jpg"></a> <div class="describe"><a href="https://bangumi.bilibili.com/anime/3450">在下坂本</a></div> </div> <div class="clean"> <img src="https://i0.hdslb.com/bfs/bangumi/207b3c90f16629eb54f060d54d5efb7d29bb9563.jpg_225x300.jpg"> <img src="https://i0.hdslb.com/bfs/bangumi/d3ce7564ddf58b2f7245b104fb578a5655e55168.jpg_225x300.jpg"> <img src="https://i0.hdslb.com/bfs/bangumi/e1f891ad2602265655f3ef181e343e253f017fce.jpg_225x300.jpg"> <img src="https://i0.hdslb.com/bfs/bangumi/14ba6643f22405e2777cca992002cc6411601334.jpg_225x300.jpg"> </div> </body> </html>
CSS
div.small{
width:200px;
float:left;
margin:20px;}
div.small img{
width:100%;
height:auto;
}
div.describe{
text-align:center;
padding:2px;}
div.small:hover{
border:1px solid #777777;}
div.clean{
clear: both;
}
运行结果
