新闻列表综合案例-蒲公英云

新闻列表综合案例

所需素材：
arr.jpg
在这里插入图片描述

line.jpg
在这里插入图片描述

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ 
            margin: 0;
            padding: 0;
        }
        .news { 
            width: 290px;
            height: 190px;
            padding: 15px;
            margin: 100px auto;
            border: 1px solid #ccc;
            background-image: url(image/line.jpg);
        }
        h2 { 
            border-bottom: 1px solid #ccc;
            padding: 5px
            margin-bottom: 10px;
            font-size: 18px;
        }
        ul li { 
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            list-style: none;
            border-bottom: 1px dashed #ccc;
            background: url(image/arr.jpg) no-repeat left ;
        }
        ul li a{ 
                    text-decoration: none;
                    font-size:  12px;
                    color: #333;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>
            最新文章/New Articles
        </h2>
        <ul>
            <li>
                <a href="#"> 北京招聘网页设计，平面设计，php
                </a>
            </li>
            <li><a href="#">体验javascript的魅力 </a></li>
            <li><a href="#">jquery世界来临 </a></li>
            <li><a href="#">网页设计师的梦想 </a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>
</html>