使用CSS reset标签样式

最新推荐文章于 2022-07-22 19:47:30 发布

weixin_38203203

最新推荐文章于 2022-07-22 19:47:30 发布

阅读量590

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_38203203/article/details/79003237

版权

html+css 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

一些默认样式在不同的浏览器中可能不一样，这就导致在开发项目中，浏览器的默认样式会给我们带来很大的麻烦，从而影响开发效率。最好的解决方案是在一起开始的时候就将浏览器的默认样式全部去掉或者覆盖掉，通过重新定义标签的样式来确保标签在各个浏览器下表现的特征一致。如下是一些经常需要重置的标签的默认样式及重置情况：

1.body元素---上下左右4个方向具有外边距（一般浏览器8px）---body{margin:0}

2. ul无序列表/ol有序列表---上下具有外边距、列表样式默认有小圆点、左边有内填充(一般浏览器12px的上、下外边距和40px的左内边距)

ul/ol{

list-style:none;/*清除小圆点*/

margin:0;

padding:0;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       body{
           /*margin:0px;!*body元素默认存在8px的外边距，这里重置body的外边距为0*!*/
           font-size:12px;
           text-align: center;
           font-family: Verdana, Geneva,sans-serif;
       }
        #menu{
            width:100px;
            border:1px solid #ccc;
        }
        #menu ul{
            /*margin:0px;!*ul上下外边距默认为12px，重置ul的默认外边距样式*!*/
            /*padding:0px;!*ul的左内边距默认为40px, 重置ul的默认内边距样式*!*/
            list-style-type: none;
        }
        #menu ul li{
            padding:12px 0px;/*设置列表项与边框的上下内边距为12px，左右内边距为0*/
            background: #eee;
            border-bottom: 1px solid #ccc;/*设置列表项的下边框*/
        }
        #menu ul li.last{
            border-bottom: 0px;/*将最后一个列表项的下边框取消*/
        }
        a:link{
            color:#000;
            text-decoration: none;
        }
        a:hover{
            color: #f00;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li><a href="#">菜单项3</a></li>
            <li><a href="#">菜单项4</a></li>
            <li><a href="#">菜单项5</a></li>
            <li class="last"><a href="#">菜单项6</a></li>
        </ul>
    </div>
</body>

</html>