制作4--w3school导航栏

效果图：

制作思路：
[html]
1.导航栏固定宽、高，可以用ul>li*7、nav套a、div套a
[css]
2.设置ul、nav、div宽高背景颜色
3.设置li水平布局（左浮动）、行高（行高可以把li的高度撑开，所以可以不用设置高度）
4.设置a清除下划线、字体颜色、字体大小，由于a是行内元素，不支持设置宽高，但是鼠标移动到li上有可能不是超链接，需要超链接把li撑开，所以把a变成块元素，a继承父元素li的行高
5.设置a左右的内边距
6.设置鼠标移到a上，hover

代码1：
nav.html

<body>
    <ul class="menu">
        <li><a href="javascript:;" title="HTML 系列教程">HTML/CSS</a></li>
        <li><a href="javascript:;" title="浏览器脚本教程">Browser Side</a></li>
        <li><a href="javascript:;" title="服务器脚本教程">Server Side</a></li>
        <li><a href="javascript:;" title="编程教程">Programming</a></li>
        <li><a href="javascript:;" title="XML 系列教程">XML</a></li>
        <li><a href="javascript:;" title="建站手册">Web Building</a></li>
        <li><a href="javascript:;" title="参考手册">Reference</a></li>
    </ul>
</body>

style.css

.menu {
    width: 1219px;
    height: 48px;
    background-color: #E8E7E3;
    margin: 100px auto;
}


.menu li {
    float: left;
    /* 高度可以不写，line-height把高度撑开 */
    height: 100%;
    line-height: 48px;
    /* 
        1.直接设置li大小
        2.设置a大小，把li撑大（在区域里面都属于超链接）
    */
}


.menu a {
    text-decoration: none;
    color: #777;
    font-size: 18px;
    display: block;
    /* margin: 0 40px; */
    padding: 0 40px;
}

.menu a:hover {
    background-color: rgb(61, 61, 62);
    color: #E8E7E3;
}

代码2：
nav.html

<body>
    <nav class="nav-menu">
        <a href="javascript:;" title="HTML 系列教程">HTML/CSS</a>
        <a href="javascript:;" title="浏览器脚本教程">Browser Side</a>
        <a href="javascript:;" title="服务器脚本教程">Server Side</a>
        <a href="javascript:;" title="编程教程">Programming</a>
        <a href="javascript:;" title="XML 系列教程">XML</a>
        <a href="javascript:;" title="建站手册">Web Building</a>
        <a href="javascript:;" title="参考手册">Reference</a>
    </nav>
</body>

style.css

.nav-menu {
    width: 1219px;
    height: 48px;
    background-color: #E8E7E3;
    margin: 100px auto;
    line-height: 48px;
}

.nav-menu a {
    display: block;
    float: left;
    text-decoration: none;
    padding: 0 40px;
    color: #777;
    font-size: 18px;
}

.nav-menu a:hover {
    background-color: rgb(61, 61, 62);
    color: #E8E7E3;
}
posted @ 2020-10-04 14:11  悦颜悦色，柠月清风  阅读(294)  评论(0)    收藏  举报