CSS之新闻列表 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style>
        * { /* 清除内外边距，写样式时常用的*/
            margin: 0;
            padding: 0;
        }

        .nav{
            width: 380px;
            height: 260px;
            border: 1px solid #cccccc;
            margin-left: 500px;
            margin-top: 100px;
            padding: 20px 15px 0;
        }
        .nav h4{
            color: #202026;
            font-size: 20px;
            border-bottom: 1px solid #cccccc;
            padding-bottom: 3px;
            margin-bottom: 14px;

        }
        li{
            list-style: none; /*取消列表前面的小点 */
        }
        .nav li{
            height: 38px;
            line-height: 38px;
            border-bottom: 1px dashed #cccccc ; /*下边框虚线*/
            text-indent: 2em;/*首行缩进*/
        }
        .nav a{
            text-size: 14px;
            color: #333333;
            text-decoration: none;


        }
        .nav a:hover{
            /*background-color: darkgrey;*/
            text-decoration: underline; /*鼠标触发时添加下划线*/
        }
        body{
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<div class="nav">
   <h4>最新文章NAv</h4>
    <ul>
        <li><a href="#">C语言C语言C语言</a></li>
        <li><a href="#">JavaJavaJavaJava</a></li>
        <li><a href="#">HTMLHTMLHTMLHTML</a></li>
        <li><a href="#">csscsscsscss</a></li>
        <li><a href="#">JavaScriptJavaScript</a></li>
    </ul>
</div>
</body>
</html>

 

posted @ 2019-04-05 18:03  showTimehzy  阅读(1639)  评论(0)    收藏  举报