html和css导航条的创建

最新推荐文章于 2022-06-29 20:25:03 发布

_阿锋丶

最新推荐文章于 2022-06-29 20:25:03 发布

阅读量202

点赞数 1

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/99706637

版权

html css 专栏收录该内容

29 篇文章 17 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    /* 清楚默认样式 */
    *{
        margin:0;
        padding:0;
    }
    .nav{
        /* 清楚点 */
        list-style: none;
        width:1000px;
        /*在ie6 中如果为元素指定了 一个宽度 
        会自动开启hasLayout */
        background-color:yellowgreen;
        margin:50px auto;
        /* 高度塌陷问题的解决方法 */
        overflow:hidden;
    }
    .nav li
    {
        /* 设置向左浮动 */
        float:left;
        /* 为li指定一个宽度不好 应该给
        超链接 */
    }
    .nav a
    {
        /*内联元素不能设置宽度
        要将a先转换为内联元素 */
        display:block;
        /* 为a指定一个宽度 */
        width:250px;
        /* 上下10 左右0 */
        padding:10px 0;
        /* 设置文字居中 */
        text-align:center;
        /* 去除下划线 */
        text-decoration:none;
        /* 设置字体颜色 */
        color:white;
        /* 加粗 */
        font-weight:bold;
    }
    .nav a:hover{
        background-color:red;

    }
    
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 创建导航条 -->
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关系</a></li>
    </ul>
</body>
</html>

_阿锋丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html和css导航条的创建

<!-- 块元素在文档流中默认垂直排列如果希望块元素在页面中水平排列可以是其脱离文档流使用float来使元素浮动，从而脱离文档流可选值： none:默认值，认在文档流中排列 left:像左浮动 right:向右浮动元素浮动以后，会尽量向页面的左上...
复制链接

扫一扫