5.[模拟新闻页面模块]-练习

1.效果

 

 

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        li {
            list-style: none;
        }
        .news{
            width: 298px;
            height: 198px;
            border:1px solid #ccc;
            margin:0 auto;
            background-image: url(images/line.jpg);
            margin-top:100px;
            padding:15px;
        }
        .box h2 {
            font-size: 18px;
            border-bottom:  1px solid #ccc;
            padding:5px 0px;
            margin-bottom: 10px;
        }
        .list li {
            height: 30px;
            border-bottom: 1px dashed #ccc;
            line-height: 30px;
            background: url(images/arr.jpg) no-repeat 5px center;
        }
        .list li a {
            font-size: 12px;
            color:#333;
            text-decoration: none;
            margin-left:20px;
        }
        .list li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="news">
        <div class="box">
            <h2>最新文章/New Articles</h2>
        </div>
        <div class="list">
            <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>
    </div>
</body>
</html>

 

posted on 2021-11-11 23:11  孤灯引路人  阅读(70)  评论(0)  编辑  收藏  举报

导航