新闻列表综合案例：知识点：边框，去掉列表默认的样式，清除内外边距等

最新推荐文章于 2023-02-09 16:36:59 发布

奶盖不加糖

最新推荐文章于 2023-02-09 16:36:59 发布

阅读量735

点赞数

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_44156869/article/details/110681111

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

知识点回顾：
边框
border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细) , 边框样式 , 边框颜色。

语法：

border : border-width || border-style || border-color

边框样式 border-style可以设置如下值

none: 没有边框即忽略所有边框的宽度（默认值）。
solid: 边框为单实线（最为常用）。
dashed: 边框为虚线。
dotted: 边框为点线。

去掉列表默认的样式
以为无序列表和有序列表前面默认的列表样式，在不同浏览器显示的效果不一样，而且也比较难看，所以，我们一般上来直接去掉这些列表样式就行

 li {list-style: none;}

清除内外边距
网页元素很多都是带默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除网页元素的内外边距。

* {
 padding:0; /*清除内边距*/
 margin:0; /*清除外边距*/
 }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但转换为块级元素和行内块元素就可以了。

新闻列表综合案例：

<head>
    <style>
        /*
        去掉列表默认的样式
        以为无序列表和有序列表前面默认的列表样式，在不同浏览器显示的效果不一样，而且也比较难看，所以，我们一般上来直接去掉这些列表样式就行
        li {list-style: none;}
        */
        * {
            margin: 0;
            padding: 0;
        }
        li {
            /*取消列表样式*/
            list-style: none;
        }
        .box {
            /* width: 328px;
            height: 228px; */
            width: 298px;
            height: 198px;
            border: 1px solid #ccc;
            /*块级盒子水平居中*/
            margin: 100px auto;
            /*如果一个盒子给了padding值，会撑大盒子,需要宽高减去给出的padding值*/
            padding:15px;
            background: url();
        }
        .box h2{
            font-size: 18px;
            /*内边距*/
            padding:5px 0;
           /*底边框*/
            border-bottom: 1px solid #ccc;

        }
        .box ul li {
            height: 30px;
            line-height: 30px;
            /* background-color: pink; */
            border-bottom: 1px dashed #ccc;
        }
        .box ul li a{
            color: #333;
            font-size:12px;
            /*取消下划线*/
            text-decoration:none;
        }
        .box ul li a:hover {
        /*鼠标经过的时候出现下划线*/
            text-decoration:underline;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>