- 认识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" href="../static/css/22c.css" ype="text/css"></head><body> ??<div> ???????<div class="img"> ???????????<a href="http://www.baidu.com/"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508502727361&di=10c6b8b7e89ba8b2f4aa64a4416aea8d&imgtype=0&src=http%3A%2F%2Flol.wanyx.com%2Fimg.wanyx.com%2Fpublic%2Fupload%2Fhero%2F1436233111.jpg" ></a> ???????????<div class="sa"><a href="http://www.baidu.com/">原始维恩</a></div> ???????</div> ?????<div class="img"> ??????????????<a href="http://www.baidu.com/"> ??????????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480168515&di=4d42c1fad395143bf3bc06f113f8e15e&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201604%2F23035814tgyvdcay.jpg"></a> ?????<div class="sa"> <a href="http://www.baidu.com/">苍穹之光</a></div> ?????</div> ??????<div class="img"> ??????????????<a href="http://www.baidu.com/"> ??????????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480208667&di=dfeb6814b609126dd86544439333869d&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-6%2F201606201843411957975.png"></a> ??????????<div class="sa"> <a href="http://www.baidu.com/">觅心猎手</a></div> ?????</div> ??????<div class="img"> ??????????????<a href="http://www.baidu.com/"> ??????????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480386760&di=0728372e74a6195ebd7f69dc5d1c4ff3&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F25%2F20160425090144_KNXtu.jpeg"></a> ???????<div class="sa"> <a href="http://www.baidu.com/">驯龙猎手</a></div> ???????</div> ??</div></body></html>
img { ???width: 500px; /*设置图片的大小*/}div.img { ???border-style: solid; /*设置边距线条格式*/ ???border-width: 5px; /*设置边距线条大小*/ ???border-color: #484cff; /*设置边距线条颜色*/ ???width: 400px; /*盒子大小*/ ???float: left; /*向左浮动*/ ???margin: 5px; /*设置外边距*/}div.img img { ???width: 100%; /*设置盒子内容的缩放*/ ???heigh: aute; /*aute是自动对齐格式*/}div.sa { ???text-align: center; ???padding: 2px; /*设置内边距*/}div.img:hover { ???border-style: solid; ???border-width: 5px; ???border-color: green;} ?/*设置鼠标经过时产生的变化*/
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/ffr0068/p/7700813.html