写静态页面——魅族导航

写静态页面——魅族导航_前端页面练习

news2024/10/7 20:37:08

0、效果：

在这里插入图片描述

1、html代码：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <link rel="stylesheet" href="./CSS/全局样式.css">
    <link rel="stylesheet" href="./CSS/魅族导航栏.css">
</head>
<body>
    <div class="BeiJin">
        <div class="daoHang">
            <ul>
                <li><a href="">手机</a></li>
                <li><a href="">MYVU</a></li>
                <li><a href="">PANDAER</a></li>
                <li><a href="">Flyme</a></li>
                <li><a href="">无界智行</a></li>
                <li><a href="">服务/门店</a></li>
                <li><a href="">社区</a></li>
                <li><a href="">集团官网</a></li>
                <li><a href="">APP下载</a></li>
                <li><a href=""><table><input type="text"></table></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

2、CSS代码：

魅族导航栏

.BeiJin{height: 680px;background-image: url(../图片/2-4.webp);}
.daoHang{width:796.92px;height: 82px;margin: 0 auto;}
.daoHang li{float: left;padding: 31px 20px 30px;font-size: 14px;font-family: Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti;}
/* 设置字体颜色 */
.daoHang a{color: #fff;}
/* 设置字体悬停时的颜色 */
.daoHang a:hover{color: #008cff;}

全局样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}
li{list-style-type:none;}
a{text-decoration:none;}
img,input,button{border:none;vertical-align:middle;}
*{font-weight:400;font-style: normal;}
body{text-align: center;}