布局：浮动导航栏练习（资源下载）

最新推荐文章于 2024-07-17 18:42:40 发布

媽呀

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量67

点赞数

分类专栏：前端学习文章标签： html5 html css css3 前端

本文链接：https://blog.csdn.net/qq_44729735/article/details/115429684

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

布局：浮动

导航栏练习

在这里插入图片描述

量数据
核验数据

开打

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .banner {
            width: 760px;
            height: 182px;
            margin: 50px auto;
        }
        .banner img {
            /*img元素类似于text，末尾会加一个空白符，高度会加上3px，要转换为块元素*/
            display: block;
        }
        .box {
            width: 760px;
            height: 32px;
            background: url("img/bg2.jpg");
        }
        .l1 {
            list-style: none;
            float: left;
            border-left: rgba(255,255,255,0.5) 1px solid;
        }

        a {
            display: block;
            height: 32px;
            width: 79px;
            list-style: none;
            font-size: 11px;
            line-height: 32px;
            color: #40510a;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="banner">
    <img src="img/bg1.jpg" alt="">
    <div class="box">
        <ul>
            <li class="l1"><a href="#">网站首页</a></li>
            <li class="l1"><a href="#">网站首页</a></li>
            <li class="l1"><a href="#">网站首页</a></li>
            <li class="l1"><a href="#">网站首页</a></li>
            <li class="l1"><a href="#">网站首页</a></li>
            <li class="l1"><a href="#">网站首页</a></li>
        </ul>
    </div>
</div>
</body>
</html>

练习资源下载

媽呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局：浮动导航栏练习（资源下载）

布局：浮动导航栏练习量数据核验数据开打<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .banner
复制链接

扫一扫