CSS实例：图片导航块

发布时间：2023-09-06 01:19责任编辑：彭小芳关键词：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

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>爸爸去哪儿第五季</title> ????<link rel="stylesheet" type="text/css" href="../static/css/a.css"></head><body><div class="recommend" > ???<div class="img"> ???????????<a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E9%99%88%E5%B0%8F%E6%98%A5%E7%88%B6%E5%AD%90&oriquery=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&ofr=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&hs=2&sensitive=0"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508508325304&di=ae7acb3227801534417bbe60af5a102a&imgtype=0&src=http%3A%2F%2Fcimage.tianjimedia.com%2FuploadImages%2FthirdImages%2F2017%2F264%2F2VC8780055WJ.jpeg"></a> ???????????<div class="desc"><a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E9%99%88%E5%B0%8F%E6%98%A5%E7%88%B6%E5%AD%90&oriquery=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&ofr=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&hs=2&sensitive=0">小小春</a></div> ???</div> ???<div class="img"> ???????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508509868509&di=6fe9969b4e9c5f2f33b70056670a778e&imgtype=0&src=http%3A%2F%2Fi-3.391k.com%2F2017%2F9%2F8%2F6439b5c2-fa74-4700-bbca-8bdca03f9753.jpg%3Fwidth%3D750%26height%3D578"> ???????<div class="desc"><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1508499886314_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&ctd=1508499886315%5E00_1266X627&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%97%AF%E5%93%BC">嗯哼</a></div> ???</div> ???<div class="img"> ??????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508499797&di=5d8b62ae0c14f665adb8495ac4551ee4&src=http://cimage.tianjimedia.com/uploadImages/thirdImages/2017/264/CVJ4FG1031BP.jpeg"> ???????<div class="desc"><a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%90%B4%E5%B0%8A%E5%B8%A6%E5%A8%83&hs=2&oriquery=%25E7%2588%25B8%25E7%2588%25B8%25E5%258E%25BB%25E5%2593%25AA%25E5%2584%25BF%25E5%2590%25B4%25E5%25B0%258A&ofr=%25E7%2588%25B8%25E7%2588%25B8%25E5%258E%25BB%25E5%2593%25AA%25E5%2584%25BF%25E5%2590%25B4%25E5%25B0%258A&sensitive=0">neinei和max</a></div> ???</div> ???<div class="img"> ???????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508510557561&di=ad51b3f0e3a75d22effb3cd060ea21b2&imgtype=0&src=http%3A%2F%2Ffun.youth.cn%2Fyl24xs%2F201709%2FW020170926332503294291.jpg"> ???????<div class="desc"><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1508500158069_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%B0%8F%E6%B3%A1%E8%8A%99">小泡芙</a></div> ???</div> ????<div class="img"> ??????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508510882469&di=9327c14a457b94f0fcf212764f9ba31a&imgtype=0&src=http%3A%2F%2Fwww.home8080.cn%2Fuploads%2Fallimg%2F170928%2F1_170928164228_1.jpeg"> ???????<div class="desc"><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&fm=detail&lm=-1&st=-1&sf=2&fmq=1508500581475_R_D&fm=detail&pv=&ic=0&nc=1&z=&se=&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%B0%8F%E5%B1%B1%E7%AB%B9">小山竹</a></div></div><br><div class="clearfolat"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508511028204&di=8ba56d4d6a2e60f04c870e1f970abf8a&imgtype=0&src=http%3A%2F%2Fimg.99danji.com%2Fuploadfile%2F2017%2F0908%2F20170908104354822.jpg"><br><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508511091213&di=e961f88f7e670ea8e9587157c5d0b9b5&imgtype=0&src=http%3A%2F%2Ff.expoon.com%2Fnews%2F2017%2F09%2F25%2F654695.jpg"><br></div></div></body></html

css文件：

img{ ???????????width: 300px; ???????} ?div.img{ ?????????border: 1px solid burlywood; ?????????width:200px; ?????????height: 200px; ?????????float: left; ?????????margin: 5px; ?????} ?????div.img img{ ?????????width: 100%; ?????????height: 85%; ?????} ?????div.desc{ ?????????text-align: center; ?????????padding: 5px; ?????} ?????div.img:hover{ ?????????border: 2px solid greenyellow;} ???????div.clearfolat{ ??????????????clear: both; ?????????solid-color: black; ?????}

截图如下：

CSS实例：图片导航块

原文地址：http://www.cnblogs.com/222ya/p/7701402.html

CSS实例：图片导航块

知识推荐