慕课网导航的html

最新推荐文章于 2021-12-07 19:18:05 发布

韵然CP

最新推荐文章于 2021-12-07 19:18:05 发布

阅读量387

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_40354578/article/details/93903461

版权

JavaWeb 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        .head{
            width: 100%;
            height: 64px;
        }
    
        .logo{
            width: 160px;
            height: 40px;
            float: left;
        }
        
        .nav{
            width: 320px;
            height: 64px;
            float: left;
        }
        
        .nav-li{
            width: 80px;
            height: 64px;
            text-align: center;
            line-height: 64px;
            color: #333;
            float: left;
        }
        
        .icons{
            width: 320px;
            height: 64px;
            float: right;
        }
        
        .i01{
            width: 64px;
            height: 64px;
            float: left;
            background: url("001.png") center center no-repeat;
        }
        
        .i02{
            width: 64px;
            height: 64px;
            float: left;
            background: url("002.png") center center no-repeat;
        }
        
        .i03{
            width: 64px;
            height: 64px;
            float: left;
            background: url("003.png") center center no-repeat;
        }
        
        .i04{
            width: 64px;
            height: 64px;
            float: left;
            background: url("004.png") center center no-repeat;
        }
        
        .i05{
            width: 64px;
            height: 64px;
            float: left;
            background: url("005.png") center center no-repeat;
        }        
    </style>
</head>
<body>
    <div class="head">
        <div class="logo">
            <img src="logo.png" width="160" height="40" alt="">
        </div>
        <div class="nav">
            <div class="nav-li">实战</div>
            <div class="nav-li">路径</div>
            <div class="nav-li">猿问</div>
            <div class="nav-li">手记</div>
        </div>
        <div class="icons">
            <div class="i01"></div>
            <div class="i02"></div>
            <div class="i03"></div>
            <div class="i04"></div>
            <div class="i05"></div>
        </div>
    </div>
</body>
</html>

韵然CP

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
慕课网导航的html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float</title> <style> *{ padding: 0; margin...
复制链接

扫一扫

专栏目录