css布局作业使用float布局：w3school导航

最新推荐文章于 2023-03-09 19:27:20 发布

abc630727719

最新推荐文章于 2023-03-09 19:27:20 发布

阅读量227

点赞数

分类专栏： # css 文章标签： html css

本文链接：https://blog.csdn.net/abc630727719/article/details/105053693

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

目标：
在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style5.css">
</head>
<body>
    <nav>
        <div class="nav-item">
            <a href="#">HTML/CSS</a>
        </div>
        <div class="nav-item">
            <a href="#">Browser Side</a>
        </div>
        <div class="nav-item">
            <a href="#">Server Side</a>
        </div>
        <div class="nav-item">
            <a href="#">Programming</a>
        </div>
        <div class="nav-item">
            <a href="#">XML</a>
        </div>
        <div class="nav-item">
            <a href="#">Web Building</a>
        </div>
        <div class="nav-item">
            <a href="#">Reference</a>
        </div>
    </nav>
</body>
</html>

css代码：

*{
    margin: 0;
    padding:0;
}

nav{
    width: 1210px;
    height: 50px;
    background-color: #E8E7E3;
    margin:10px auto;
}

.nav-item{
    line-height: 50px;
    float: left;
}


.nav-item a{
    display: block;
    color: #777777;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    padding: 0 42px;
    background-color:rgb(63, 63, 63);
}

.nav-item:last-child a{
    padding: 0 44px 0 43.1px;
}

.nav-item a:hover{
    background-color: #3F3F3F;
    color: #E8E7E3;
}

最终效果

abc630727719

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css布局作业使用float布局：w3school导航

目标：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫

专栏目录