html+css 完成简单导航栏栏作用

2021-01-20 03:53 jianzhan

2话不说立即上编码(萌新:确实也没甚么好说的)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf⑻" />
    <title>导航栏栏</title>
    <style type="text/css">
     #nav{
         width:100%;
         height:39px;
        margin:0px;
        background:#808080
    }
     #nav ul li{
         margin:5px 10px;
         float:left;
         list-style:none;
     }
     #nav ul li a{
         float:left;
         padding:0px 16px;
         <!--margin:auto;-->
         color:#ffffff;
         font-size:15px;
     }
    </style>
</head>
<body>
    <div id="nav">
        <ul >
            <li ><a href="#">主页</a></li>
            <li ><a href="#">盆友</a></li>
            <li ><a href="#">商城</a></li>
            <li ><a href="#">免费下载顾客端</a></li>
        </ul>
    </div>
</body>
</html>

关键便是css(联级款式表)对html的內容做文件格式化(不太会描述);

在其中对元素能够立即用标志对其设定文件格式;对某个id为nav的元素做文件格式化,要在前面加#;对class=“nav”改动文件格式要在nav前加 "."

这3个的运用我自身還是不太熟习,就不说了,此处期待有大触能够具体指导1番,或有人和我讨论也行。

css编码能够用刚开始<style type="txt/css">、完毕标志</style>写在html文本文档的head里,即嵌入在head里,

我这里是简单的导航栏栏css编码很少就嵌入在head里

上述是css的1种引入方法:嵌入式款式表

---------------------------------------------------------------------------------------------------------------------------

假如css编码较为多能够立即把编码写在css文档,随后用link标识在html文档的head里引进款式表css。

上述客观事实第2种引入方法:外界款式表(如今的网页页面复杂,用这类方式较为多)

也有1种便是内联款式表,这里不做解释。
 

总结

以上所述是网编给大伙儿详细介绍的html+css 完成简单导航栏栏作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!