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>Title</title> ???<link rel="stylesheet" href="../static/css/daohang2.css" type="text/css"> ????<base target="_blank" /></head><body ><nav class="nav"> ???<ul> ???????<li><a href=""><img ?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508251463981&di=1d8e9eccad48cc4154895846c19850d6&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F38%2F40%2F01300542658130140593408122952_s.png">首页</a></li> ???<li><a href=""><img ?src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508241260&di=b5536e6833e2da3f92baf4e3770ddcc7&src=http://www.yooyoo360.com/photo/2009-1-1/20090112122027672.jpg">下载</a></li> ???<li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508250905764&di=f9604efd81d162d59c11a29e31757e03&imgtype=0&src=http%3A%2F%2Fimg.25pp.com%2Fuploadfile%2Fsoft%2Fimages%2F2012%2F0424%2F20120424041554637.jpg">新闻</a></li> ???????<li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508241071&di=8a1a78dc3c3fbdde46b85c88b9392486&src=http://pica.nipic.com/2007-10-12/200710128331170_2.jpg">登录</a></li> ???????<li><a href=""><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3605377444,2155870739&fm=27&gp=0.jpg">短消息</a></li> ???????<button style="float: right;margin: 5px auto;border-radius: 5px;height: 30px" type="submit">搜索</button> ???????<input style="float: right;margin: 5px auto;border-radius: 8px;width: 200px;height: 20px;" ?type="text" name="search"PLACEHOLDER="输入要搜索的内容"> ???</ul></nav><div class="all"> ???<div class="pic"> ???????<a href=""> ???????????<img src="http://pic1.win4000.com/wallpaper/f/51b9b06f1d0fb.jpg"></a> ???????<div class="wenzi1"><a ?href="">淡雅清新</a></div> ???</div> ???<div class="pic"> ???????<a href=""> ???????????<img src="http://www.zcool.com.cn/community/0379bb5579eead00000012e7e1c65aa.jpg"></a> ???????<div class="wenzi2"><a href="">蓓蕾初开</a></div> ???</div> ???<div class="pic"> ???????<a href=""> ???????????<img src="http://imgstore.cdn.sogou.com/app/a/100540002/766171.jpg"></a> ???????<div class="wenzi3"><a href="">仓央兮措</a></div> ???</div> ???<div class="pic"> ???????<a href=""> ???????????<img src="http://pic.5442.com:82/2013/0417/16/02.jpg%21720.jpg"></a> ???????<div class="wenzi4"><a href="">骄阳似火</a></div> ???</div></div></body></html>

 ???????.nav ul{ ???????????width: 1000px; ???????????border: 1px solid pink; ???????????margin: 50px auto 0px auto; ???????} ???????.nav ul li{ ???????????float: left; ???????} ???????.nav ul li a{ ???????????width: 80px; ???????????height: 28px; ???????????line-height: 28px; ???????????background-color: pink; ???????????color: aliceblue; ???????????margin: 5px 35px; ???????????font-size: 12px; ???????????display: block; ???????????text-align: center; ???????????text-decoration: none; ???????} ???????.nav ul li a:hover{ ???????????width: 78px; ???????????height: 26px; ???????????line-height: 28px; ???????????border: 1px solid pink; ???????????background: #FFF; ???????} ???????.nav img{ ???????????height: 28px; ???????????width:28px; ???????????float: left ???????} ???????.all{ ???????????width: 88%; ???????????height:70%; ???????????overflow: auto; ???????????margin: auto; ???????????position: absolute; ???????????top: 0; left: 0; bottom: 0; right: 0; ???????} ???????.pic{ ???????????border: 1px solid orange; ???????????width: 300px; ???????????float: left; ???????????margin: 15px; ???????} ???????.pic img{ ???????????width: 100%; ???????????height: 180px; ???????} ???????.wenzi1{ ???????????text-align: center; ???????????padding: 5px; ???????????font-family: ‘‘; ???????????background-color: bisque; ???????} ???????.wenzi1:hover{ ???????????border: 1px solid orangered; ???????????background-color: salmon; ???????} ???????.wenzi2{ ???????????text-align: center; ???????????padding: 5px; ???????????font-family: ‘‘; ???????????background-color: darkseagreen ???????} ???????.wenzi2:hover{ ???????????border: 1px solid orangered; ???????????background: darkgreen; ???????} ???????.wenzi3{ ???????????text-align: center; ???????????padding: 5px; ???????????font-family: ‘‘; ???????????background-color: khaki; ???????} ???????.wenzi3:hover{ ???????????border: 1px solid orangered; ???????????background: orange; ???????} ???????.wenzi4{ ???????????text-align: center; ???????????padding: 5px; ???????????font-family: ‘‘; ???????????background-color:salmon; ???????} ???????.wenzi4:hover{ ???????????border: 1px solid orangered; ???????????background: red; ???????} ???????.pic img:hover{ ???????????border: 1px solid orangered; ???????} ???????.all a{ ???????????text-decoration: none; ???????????font-family: ‘华文中宋‘; ???????}

CSS实例：图片导航块

原文地址：http://www.cnblogs.com/lkm123/p/7701284.html

CSS实例：图片导航块

知识推荐