网站头部导航

时间：2018-05-27 16:49:05 阅读：223 评论：0 收藏：0 [点我收藏+]

标签：visit bsp pre gif oct 垂直 AC source ali

技术分享图片

为了实现上面这个效果，完整版代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 960px;
            height: 50px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .nav ul{
            /*去掉小圆点*/
            list-style: none;
        }
        .nav ul li{
            float: left;
            width: 120px;
            height: 50px;
            /*让内容水平居中*/
            text-align: center;
            /*让行高等于nav的高度，就可以保证内容垂直居中*/
            line-height: 50px;
        }
        .nav ul li a{
            display: block;
            width: 120px;
            height: 50px;
        }
        /*两个伪类的属性，可以用逗号隔开*/
        .nav ul li a:link , .nav ul li a:visited{
            text-decoration: none;
            background-color: purple;
            color:white;
        }
        .nav ul li a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</body>
</html>

1.div默认宽度全屏，高度自适应（根据里面内容的高度），如果定义了div高度，里面内容的高度大于这个高度，就会出现超出边界的情况
比如上例中，如果把li的float属性去掉，会出现超出边界的情况

2.float属性的元素，肯定不会超过包含块的内边距（保持在包含块padding留白以内）（不仅是左右，上下也一样）,上例中，不把li的float属性去掉，把li的高度无论设置成多少，都不会绘制到nav之外

3.list-style: none;属性去掉li的默认原点

网站头部导航

标签：visit bsp pre gif oct 垂直 AC source ali

原文地址：https://www.cnblogs.com/cowboybusy/p/9096413.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行