CSS中的导航栏栏和往下拉菜单的完成

日期:2021-03-01 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

1、CSS导航栏栏

(1)导航栏栏的功效

娴熟应用导航栏栏,针对网站排版十分关键,应用CSS你能够变换成漂亮的导航栏栏而并不是枯燥乏味的HTML菜单。

(2)竖直导航栏栏

<1>编码以下

<!doctyre html>
<html>
    <head> 
        <meta charset="utf⑻"> 
        <title>竖直导航栏栏</title> 
        <link rel="stylesheet" href="daohanglan1.css"/>
    </head>
    <body>
        <ul>
            <li><a class="active" href="#home">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联络</a></li>
            <li><a href="#about">有关</a></li>
        </ul>
        <div>
          <h2>竖直导航栏栏</h2>
          <h3>竖直导航栏栏竖直导航栏栏竖直导航栏栏竖直导航栏栏竖直导航栏栏竖直导航栏栏竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
          <p>竖直导航栏栏</p>
        </div>
    </body>
</html>
body{
    margin:0;
}
ul{
    padding:0;
    margin:0;
    list-style-type:none;
    
    width:25%;
    background-color:#f1f1f1;
    
    position:fixed;
    height:100%;
    top:0;
    overflow:auto;
    
    /* border:1px solid #000; */
}
/* ul>li:not(:last-child){
    border-bottom:1px solid #000;
} */
ul a{
    display:block;
    
    text-decoration:none;
    color:#000;
    padding:8px 16px;
    
    text-align:center;
}
li a:hover:not(.active){
    background-color:#555;
    color:white;    
}
a.active{
    background-color:#4caf50;
    color:white;    
}
div{
    margin-left:25%;
    padding:1px 16px;
    height:100px;
    
}

<2>实际效果图以下:

(3)水平导航栏栏

<1>编码以下:

<!doctyre html>
<html>
    <head> 
        <meta charset="utf⑻"> 
        <title>水平导航栏栏</title> 
        <link rel="stylesheet" href="daohanglan2.css"/>
    </head>
    <body>
        <ul>
            <li><a class="active" href="#home">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联络</a></li>
            <li style="float:right"><a href="#about">有关</a></li>
        </ul>
        <div class="box">
            <h2>水平导航栏栏</h2>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            <p>水平导航栏栏;水平导航栏栏;水平导航栏栏;水平导航栏栏</p>
            </div>
    </body>
</html>
body{
    margin:0;
}
ul{
    padding:0px;
    margin:0px;
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
    
    position:fixed;
    top:0px;
    width:100%;
}
ul>li{
    float:left;
    border-right:1px solid #fff;
    display:inline;
}
ul>li:last-child{
    border-right:none;
    
}
a{
    padding:14px 16px;
    
    display:block;
    width:60px;
    
    text-align:center;
    
    text-decoration:none;
    color:white;
    
}

li a:hover:not(.active) {
    background-color: #111;
}
    
li a.active {
    color: white;
    background-color: #4CAF50;
}
.box{padding:20px;
margin-top:30px;
background-color:#1abc9c;
height:1500px;}

<2>实际效果图以下:

2、往下拉菜单

(1)往下拉菜单的功效

往下拉菜单可使你的网页页面不在枯燥乏味,能够根据css更改网页页面的美观大方,这也是网页页面排版必不能少的物品。

(2)往下拉菜单

<1>编码以下:

<!doctype html>
<html>
<head>
    <meta charset="utf⑻"/>
    <title></title>


    <link rel="stylesheet" type="text/css" href="xialacaidan.css"/>


</head>
<body>


    <div class="dropdown">
        <span>
            往下拉菜单
        </span>
        <div class="di">
            <ul>
                <li>你好!</li>
                <li>我好!</li>
                <li>大伙儿好!</li>
            </ul>
        
        </div>
    </div>


</body>
</html>
body{
    margin:0;
    text-align:center;
}
.dropdown{
    
    background-color:green;
    text-align:center;
    padding:20px;
    display:inline-block;
    cursor:pointer;
    position:relative;
}
.di{
    display:none;
    position:absolute;
    top:61px;
    left:0;
}
.di ul{
    list-style:none;
    padding:0;
    margin:0;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.di ul li{
    min-width:104px;
    padding:10px 15px;
    
}
.dropdown:hover{
    background-color:#3e8e41
}
.dropdown:hover .di{
    display:block;
    
}
.di ul li:hover{
    background-color: #f1f1f1
}

<2>实际效果图以下

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS中filter特性的应用详解 返回下一篇:没有了