CSS实例：图片导航块

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

认识CSS的盒子模型。

CSS选择器的灵活使用。

实例:

图片文字用div等元素布局形成HTML文件。

新建相应CSS文件，并link到html文件中。

CSS文件中定义样式

1. 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>喜迎十九大</title> ???<link rel="stylesheet" type="text/css" href="../static/css/sj.css"></head><body bgcolor="#ff0000"><p align="center">喜迎十九大</p><div> ???<div class="shijiuda"> ???????<a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%85%B1%E4%BA%A7%E5%85%9A%E7%AC%AC%E5%8D%81%E4%B9%9D%E6%AC%A1%E5%85%A8%E5%9B%BD%E4%BB%A3%E8%A1%A8%E5%A4%A7%E4%BC%9A/1629417?fromtitle=%E5%8D%81%E4%B9%9D%E5%A4%A7&fromid=22165012&fr=aladdin" > ???????????<img src="http://www.rmzxb.com.cn/upload/resources/image/2016/12/19/1409276_600x600.jpg" width="300" height="200"></a> ???????<div class="wenzi"><a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%85%B1%E4%BA%A7%E5%85%9A%E7%AC%AC%E5%8D%81%E4%B9%9D%E6%AC%A1%E5%85%A8%E5%9B%BD%E4%BB%A3%E8%A1%A8%E5%A4%A7%E4%BC%9A/1629417?fromtitle=%E5%8D%81%E4%B9%9D%E5%A4%A7&fromid=22165012&fr=aladdin">人民大会堂</a></div> ???</div> ???<div class="shijiuda"> ???????<a href="http://www.china.com.cn/19da/2017-10/17/content_41746815.htm"> ???????????<img src="http://pic.people.com.cn/NMediaFile/2014/1104/MAIN201411040859000083605869534.jpg" width="300" height="200"></a> ???????<div class="wenzi"><a href="http://www.china.com.cn/19da/2017-10/17/content_41746815.htm">习大大</a></div> ???</div> ???<div class="shijiuda"> ???????<a href="http://www.china.com.cn/19da/2017-10/19/content_41760784.htm"> ???????????<img src="http://www.gov.cn/zhuanti/2014-03/13/2637455/images/dff6462385294f26981a7f14653eebb7.jpg" width="300" height="200"></a> ???????<div class="wenzi"><a href="http://www.china.com.cn/19da/2017-10/19/content_41760784.htm">李总理</a></div> ???</div></div><div class="clearfloat"> ???<img src="http://cpc.people.com.cn/NMediaFile/2017/1017/MAIN201710171729000327986509825.jpg" width="1000" height="700"> ???<img src="http://www.gov.cn/xinwen/2017-10/18/5232568/images/79d4907b9dd349f1960e134f88986d71.jpg" width="1000" height="700"> ???<img src="http://i2.chinanews.com/simg/hd/2017/10/15/d823cede2c5c419089ec87296088d13f.jpg" width="1000" height="700"> ???<img src="http://i2.chinanews.com/simg/hd/2017/10/15/e234ddb7650448c28e90f5d13abedb50.jpg" width="1000" height="700"> ???<img src="http://i2.chinanews.com/simg/hd/2017/10/15/633cdaaeba45484aa04564dcf1179353.jpg" width="1000" height="700"></div></body></html>

 ???p{ ???????font-size: 500%; ???????color: yellow; ???????font-family: "华文行楷"; ???} ???div.shijiuda{ ???????border:2px solid #999999;/*设置盒子的边框线条*/ ???????width: 300px; ???????float:left;/*设置浮动对象，往左边靠拢*/ ???????margin:5px;/*设置边框之间的距离*/ ???} ???div.shijiuda.img{ ???????width: 100%; ???????height: auto; ???} ???div.wenzi{ ???????font-size: 150%; ???????font-family: "华文行楷"; ???????text-align: center;/*设置文字居中*/ ???????padding:5px; /*设置文字距离边框的宽度*/ ???} ???/*设置鼠标移动到边框的反应*/ ???.img:hover{ ???????border:2px solid #ffff33; ???} ???div.clearfloat{ ???????clear: left; ???}

CSS实例：图片导航块

原文地址：http://www.cnblogs.com/xxxiaoxiannv/p/7700999.html

CSS实例：图片导航块

知识推荐