css实现新浪搜索趣图（笔记）

分析页面得出如下结果：
一个大的div，然后一个h3标题，图片显示，三行的无序列表。

html代码块如下：

<div class="search">
        <h3>搜索趣图</h3>
        <img src="ico/timg.jpg" />
        <ul>
            <li><a href="#">从月球到木星：中国的行星探索路线图</a></li>
            <li><a href="#">从月球到木星：中国的行星探索路线图</a></li>
            <li><a href="#">从月球到木星：中国的行星探索路线图</a></li>
        </ul>
    </div>

css层叠样式表：

<style>
        * {
            padding: 0px;/*设置页面内边距为0*/
            margin: 0px;/*设置页面外边距为0*/
        }
        ul {
            list-style: none;/*去掉无序列表的小方块*/
        }
        .search {
            height: 294px;/*大的div的高*/
            width: 238px;/*大的div的宽*/
            border: 1px solid #D9E0EE;/*边框的缩写方式（1像素 实线 颜色）*/
            border-top: 3px solid #FF8400;/*定义上边框（注意上个边框和这个边框的定义循序，如果先定义上边框，再定义全局边框会覆盖之前定义的样式）*/
            margin: 200px;/*外边距的像素（把例子放在页面相对中间方便自己看的）*/
        }
        .search h3 {
            height: 35px;/*搜索趣图高*/
            border-bottom: 1px solid #D9E0EE;/*底边框样式缩写（1像素 实线 颜色）*/
            font-weight: normal;/*取消加粗*/
            font-size: 16px;/*字体大小*/
            line-height: 35px;/*行高（行高等于高字体就会居中）*/
            padding-left: 12px;/*内边距左移12像素*/
        }
        .search img {
            margin: 7px 0 0 8px;/*图片外边距缩写（上7像素 右0像素 下0像素 左8像素）*/
        }
        .search ul li a{
            text-decoration: none;/*取消下滑线*/
            color: #666;/*字体颜色*/
            font-size: 12px;/*字体大小*/
        }
        .search ul {
            margin-left: 10px;/*无序列表外边距左移10像素*/
        }
        .search ul li {
            height: 26px;/*列表高*/
            line-height: 26px;/*行高等于高，字体居中*/
            padding-left: 20px;/*内边距左移20像素*/
            background: url(ico/1.jpg) no-repeat left center;/*方块图片（url 不平铺 左 居中）*/
        }
        .search ul li a:hover {/*鼠标划过*/
            text-decoration: underline;/*添加下划线*/
            color: #ff8400;/*字体颜色*/
        }
    </style>