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>img</title> ???<link rel="stylesheet" type="text/css" href="../static/css/102.css"></head><body><div> ??<div class="img"> ??????<a href="https://baike.baidu.com/"> ??????????<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=956e462272f0f736ccb1164137659f29/91ef76c6a7efce1ba31cb897a551f3deb48f65b3.jpg"> ??????</a> ??????<div><p><a target="_blank" href="/item/%E5%AD%99%E4%BF%AA/335060">孙俪</a>饰演 周莹</p></div> ??</div> ??<div class="img"> ??????<a href="https://baike.baidu.com/"> ??????????<img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=74f6de3d45c2d562e6478aadda21bcdf/29381f30e924b89964cf096564061d950b7bf6f8.jpg"> ??????</a> ??????<div><p><a target="_blank" href="/item/%E9%99%88%E6%99%93/1178647">陈晓</a>饰演 沈星移</p></div> ??</div> ???<div class="img"> ???????<a href="https://baike.baidu.com/"> ???????????<img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=a3068c7a753e6709aa4f1fbf06f7b30d/6159252dd42a2834301b465651b5c9ea15cebf29.jpg"> ???????</a> ???????<div><p><a target="_blank" href="/item/%E4%BD%95%E6%B6%A6%E4%B8%9C/821021">何润东</a>饰演 吴聘</p></div> ???</div> ???<div class="img"> ???????<a href="https://baike.baidu.com/"> ???????????<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=102c5eb8a76eddc432a8eebb04eb9acd/902397dda144ad34475af7dadaa20cf430ad8581.jpg"> ???????</a> ???????<div><p><a target="_blank" href="/item/%E4%BB%BB%E9%87%8D/9484322">任重</a>饰演 赵白石</p></div> ???</div></div><div CLASS="clearfloat"> ???<div class="pic"> ???????<a href="https://baike.baidu.com/"> ???????<img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C643%2C913%3Bh%3D195%3Bq%3D95/sign=73e0b6b3be8f8c54f79c9f6f071901c5/10dfa9ec8a136327be61b26e9b8fa0ec09fac7db.jpg"> ???</a> ???<div><p><a target="_blank" href="/item/%E4%BF%9E%E7%81%8F%E6%98%8E/4314503">俞灏明</a>饰演 杜明礼</p></div> ???</div> ???<div class="pic"> ???????<a href="https://baike.baidu.com/"> ???????????<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=5437ccefb3014a9095711cfd94471522/2cf5e0fe9925bc31164072c554df8db1cb137049.jpg"> ???????</a> ???????<div><p><a target="_blank" href="/item/%E8%83%A1%E6%9D%8F%E5%84%BF/2572809">胡杏儿</a>饰演 胡咏梅</p></div> ???</div> ???<div class="pic"> ???????<a href="https://baike.baidu.com/"> ?????????<img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D44%2C98%2C588%2C835%3Bh%3D195%3Bq%3D95/sign=f1a51ce415178a82da7325e0cb3747a1/d8f9d72a6059252da7a9fb2c3f9b033b5bb5b958.jpg"> ???????</a> ???????<div><p><a target="_blank" href="/item/%E5%BC%A0%E6%99%A8%E5%85%89/7990300">张晨光</a>饰演 吴蔚文</p></div> ???</div> ???<div class="pic"> ???????<a href="https://baike.baidu.com/"> ???????????<img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C1002%2C1423%3Bh%3D195%3Bq%3D95/sign=b0e74f4844c2d562e6478aadda21bcdf/9f510fb30f2442a7d0ec1c8dda43ad4bd1130233.jpg"> ???????</a> ???????<div><p><a target="_blank" href="/item/%E8%B0%A2%E5%90%9B%E8%B1%AA/373197">谢君豪</a>饰演 沈四海</p></div> ???</div></div></body></html>

img{ ???????????width: 250px; ???????}div.img{ ???????????border:1px solid #cccccc; ???????????width:200px; ???????????float:left; ???????????margin:5px;}div.img img{ ???????????width:100%; ???????????height:auto;}div.desc{ ???????????text-align:center; ???????????padding:5px;}div.img:hover{ ???????????border:1px solid #777777;}.clearfloat{ ???????????clear:both;}pic{ ???????????width: 250px;}.pic{ ???????????border:1px solid #cccccc; ???????????width:200px; ???????????float:left; ???????????margin:5px;}.pic img{ ???????????width:100%; ???????????height:auto;}.desc{ ???????????text-align:center; ???????????padding:5px;}.pic:hover{ ???????????border:1px solid #777777;}

CSS实例：图片导航块

原文地址：http://www.cnblogs.com/suxihong/p/7700879.html

CSS实例：图片导航块

知识推荐