html+css做一个导航栏

最新推荐文章于 2024-04-24 21:08:22 发布

马仔学java

最新推荐文章于 2024-04-24 21:08:22 发布

阅读量336

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_79694081/article/details/133457096

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <title>千猫科技官方网站</title>
    <meta charset="UTF-8" name=""keyword="马星星">
<body background="img/BJ.jpg"
      style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
</body>

<style>
    * {
        padding: 0;
        margin: 0;
        /* 通配符全选，取消内外边距的小缝隙    // 不建议使用通配符 */
    }

    header {
        width: 100%;
        background-color: #333333;
        /* 设置背景 */
    }

    div {
        width: 1226px;
        height: 40px;
        margin: auto;
        /* 设置靶心居中 */
        color: rgb(164, 163, 163);
        /* 字体颜色 */
        line-height: 40px;
        /* 字体居中 */
        font-size: 20px;
        /* 字体大小 */
        display: flex;
        justify-content: space-between;
        /* 子元素两端对齐 */



    }

    ul {
        list-style: none;
        /* 取消列表的点 */

    }

    .left {
        display: flex;
        /* 父元素设置弹性盒子，控制子元素布局 */
    }

    .left> span {
        font-size: 12px;
        color: #4b4a46;
        margin: auto 5px;
        /* 设置左边 中间的小线，用左右外边距隔开 */

    }

    .right{
        display: flex;

    }
    .right>span{
        float: right;
        font-size: 12px;
        color: #4b4a46;
        margin: auto 5px;
        /* 设置 右面中间的小线，用左右外边距隔开 */
    }

    .right>li:nth-child(1){
        width: 120px;
        text-align: center;
    }

</style>
</head>

<body>
<header>
    <div align="certer">

        <ul class="left">
            <li><a href="https://44v16x5617.zicp.fun">主页</a></li><span>|</span>
            <li><a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=NBLxY9mea8HXeYRpdulC8DPxmCKSkAmx&authKey=7N3IT1kH7KGCZZIMxCP5ODflFzLoS2izr8KPr2SGNGNADfdlqruruaoWYl7GTeXv&noverify=0&group_code=891186046">官方QQ群</a></li><span>|</span>
            <li><a href="https://y.music.163.com/m/user?id=1755905898&dlt=0846&app_version=8.10.81">网易云音乐</a></li><span>|</span>
            <li><a href="https://v.douyin.com/ie7Ntwk4/">抖音官方</a></li><span>|</span>
            <li><a href="http://t.csdn.cn/MqBcN">CSDN博客</a></li>


        </ul>
        <ul class="right">
            <li>注册会员</li><span>|</span>
            <li>登录会员</li>


        </ul>
    </div>

</header>>
<div align="certer">
<p>
<h1>千猫科技</h1>

</p>
<!--    <hr align="center" width="1500"size="1"color="red" >-->
</div>
<p>
    
</p>
</body>
</html>