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

0、效果:

写静态页面——魅族导航_前端页面练习_第1张图片


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="">MYVUa>li>
                <li><a href="">PANDAERa>li>
                <li><a href="">Flymea>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;}

你可能感兴趣的:(web前端,前端)