CSS实例：图片导航块

发布时间：2023-09-06 01:19责任编辑：顾先生关键词：CSS

认识CSS的盒子模型。
CSS选择器的灵活使用。
实例:
1. 图片文字用div等元素布局形成HTML文件。
2. 新建相应CSS文件，并link到html文件中。
3. CSS文件中定义样式
  1. div.img：border,margin,width,float
  2. div.img img：width，height
  3. div.desc：text-align,padding
  4. div.img:hover：border
  5. div.clearfloat：clear

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>planting</title> ???<link rel="stylesheet" type="text/css" href="../css/20.css"></head ><body ><div> ???<div class="img"> ???????<a href="https://image.baidu.com/"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478402762&di=2b0f5c6a6abc0e4fefc4e5e89b11c078&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_2_2941484322D2560692402_23.jpg"> ???????</a> ???????<div class="desc"><a href="https://image.baidu.com/">商量</a> </div> ???</div> ???<div class="img"> ???????<a href="https://image.baidu.com/"> ???????????<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4071790924,2914289697&fm=27&gp=0.jpg"> ???????</a> ???????<div class="desc"><a href="https://image.baidu.com/">启程</a> </div> ???</div> ????<div class="img"> ???????<a href="https://image.baidu.com/"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993164&di=21005bc9d7cbc500390e5b62c3b859a7&imgtype=0&src=http%3A%2F%2Fwapfile.desktx.com%2Fpc%2F161122%2Fbigpic%2F5832b76c05a7e.jpg"> ???????</a> ???????<div class="desc"><a href="https://image.baidu.com/">邂逅</a> </div> ???</div> ???<div class="img"> ???????<a href="https://image.baidu.com/"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993165&di=b9eae51cddded4391be080ea9f53f95c&imgtype=0&src=http%3A%2F%2Fscdn.file1.gk99.com%2Fphoto%2F2013-06%2F2013-06-17%2F137144975944849.jpg"> ???????</a> ???????<div class="desc"><a href="https://image.baidu.com/">相约</a> </div> ???</div></div><div class="clearfloat"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478402762&di=2b0f5c6a6abc0e4fefc4e5e89b11c078&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_2_2941484322D2560692402_23.jpg"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4071790924,2914289697&fm=27&gp=0.jpg"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993164&di=21005bc9d7cbc500390e5b62c3b859a7&imgtype=0&src=http%3A%2F%2Fwapfile.desktx.com%2Fpc%2F161122%2Fbigpic%2F5832b76c05a7e.jpg"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993165&di=b9eae51cddded4391be080ea9f53f95c&imgtype=0&src=http%3A%2F%2Fscdn.file1.gk99.com%2Fphoto%2F2013-06%2F2013-06-17%2F137144975944849.jpg"></div></body></html>

img{ ???width: 300px;}div.img{ ???border: 1px solid seagreen; ???width: 180px; ???float: left; ???margin: 5px;}div.img img{ ???width: 100%; ???height: auto;}div.desc{ ???text-align: center; ???padding: 5px;}div.img:hover{ ???border:1px solid blue;}.clearfloat{ ???clear: both;}

CSS实例：图片导航块

原文地址：http://www.cnblogs.com/dujiacheng789/p/7698704.html

CSS实例：图片导航块

知识推荐