1. 搜索趣图框的制作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { /*一般在CSS布局之前都需要写上这句，用来清除元素默认的内外边距*/ margin: 0px; padding: 0px; } ul { /*这个一般是使用无序列表ul时 不采用自带的小圆点*/ list-style: none; } .searchpic { /*首先设置最外边最大的那个容器*/ width: 238px; height: 294px; border: 1px solid #D9E0EF; border-top: 3px solid #FF8400; /*这部分是设置最上面的导航条*/ margin: 100px; } .searchpic h3 { /*这部分是设置搜索边框那个小盒子，也需要设置高度，而宽度就是用父盒子的宽度，需要设置下边框*/ height: 35px; border-bottom: 1px solid #D9E0EF; font-size: 16px; font-weight: normal; line-height: 35px; padding-left: 12px; } .searchpic img { /*对于搜索边框下面的动图，插入图片使用width height 来设置插入图片的宽高 然后图片的位置，距离外面最大的盒子 有一段距离，可以使用margin-left来设置，因为iamge是一个行内块元素，类似于盒子 可以设置外边距，再补充一点，行内元素只可以设置左右内外边距，不可以设置上下内外边距*/ width: 200px; margin: 7px 0 0 8px; } .searchpic ul li a { /*对于动图下面的a标签，可以设置字体大小，字体的颜色，a标签中的字体需要使用text-decoration去掉下划线，由于a标签是一个行内元素，是不可以设置宽度和高度的*/ text-decoration: none; font-size: 12px; color: #666; } .searchpic ul li { /*对于li标签可以设置宽度 高度，盒子的左侧外边距，其实就是跟动图的左侧外边距一样，然后设置盒子中字体垂直方向居中对齐：line-height:height即可; 然后还可以设置左侧内边距，主要是li标签里面有一个a标签，不让a那么紧挨着li标签， 显示效果就是a标签的文字距离li盒子左侧有距离*/ margin-left: 8px; background: url(../../images/square.png) no-repeat left center; /*插入背景图片，其实就是文字前面的小图片 这里使用的是背景图片 需要设置背景图片的位置 bgp*/ padding-left: 10px; height: 26px; line-height: 26px; } .searchpic ul li a:hover { color: red; text-decoration: underline; } </style> </head> <body> <div class="searchpic"> <h3>搜索趣图</h3> <img src="../../images/happy.gif" alt="图片无法加载" title="happy.gif"> <ul> <li><a href="#">我们是动图下面的文字部分</a></li> <li><a href="#">我们是动图下面的文字部分</a></li> <li><a href="#">我们是动图下面的文字部分</a></li> </ul> </div> </body> </html>
运行结果：
