CSS05-各种导航栏试验01

Posted on 2020-01-03 12:05 C_BJ 阅读(182) 评论(0) 收藏举报

将菜鸟上导航栏的那一节的例子实验了一下，下方是代码，排版不太合适，有点乱。

顺便记录一下WebStorm格式化代码的快捷键：Ctrl+Alt+l。

05.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" type="text/css" href="05.css">
</head>
<body>
<div id="A">
    <ul>
        <li><a class="active">全屏高度的固定导航栏实例</a></li>
        <li>竖直导航栏</li>
        <li><a href="#N1">基本导航栏</a></li>
        <li><a href="#N1">删除边距和填充的导航栏</a></li>
        <li><a href="#N1">垂直导航栏</a></li>
        <li><a href="#N2">垂直导航栏02</a></li>
        <li><a href="#N3">全屏高度的固定导航栏</a></li>
        <li>水平导航栏</li>
        <li><a href="#N3">水平导航栏1</a></li>
        <li><a href="#N10">水平导航栏2</a></li>
        <li><a href="#N5">水平导航栏实例</a></li>
        <li><a href="#N6">高亮当前坐在菜单</a></li>
        <li><a href="#N8">单个元素右浮</a></li>
        <li><a href="#N9">头部固定导航栏</a></li>
    </ul>
</div>
<div id="Content">
    <div id="Normal">
        <h3>基本导航栏</h3>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </div>
    <hr>
    <div id="N1">
        <h3>消margin和padding</h3>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </div>
    <hr>
    <div id="N2">
        <h3>垂直导航栏</h3>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <p style="margin: 2%;">遇到的问题：a在鼠标焦点聚集时，变色的只有字体所在的那一小块，没有整行变色。原因：没有将a转为块元素。</p>
    </div>
    <hr>
    <div id="N3">
        <h3>垂直导航栏02</h3>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </div>
    <hr>
    <p>问题：相同类型的组件写在CSS文件后面的样式会对前面的样式有影响。原因：逗号后，不能省元素所在的祖先元素的id值。</p>
    <div id="N10">
        <h3>全屏高度的固定导航条</h3>
        <p>竖直导航栏旁边的内容区域需要设置margin-left: x%;来避免部分区域被导航栏遮住</p>
    </div>
    <hr>
    <div id="N4">
        <h3>水平导航栏01(将li元素转为内联)</h3>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <p>注意：若要为a元素设置内边距，也需要为ul元素添加top和bottom边距，否则链接会出现在ul元素之外</p>
    </div>
    <hr>
    <div id="N5">
        <h3>水平导航栏02(浮动)</h3>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <p>width:60px;是元素默认情况下的最大宽度</p>
    </div>
    <hr>
    <div id="N6">
        <h3>水平导航栏实例</h3>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <p>overflow:hidden;能让ul元素占满整行</p>
    </div>
    <hr>
    <div id="N7">
        <h3>高亮当前所在菜单</h3>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </div>
    <hr>
    <div id="N8">
        <h3>单个元素右浮</h3>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li id="About"><a class="active" href="#about">关于</a></li>
        </ul>
        <p>问题：给id为About的li添加样式时没有出现向右浮动。原因：虽然每个ID只能对应一个元素，但还是要写上它父级元素的ID。</p>
    </div>
    <hr>
    <!---->
    <div id="N9">
        <h3>头部固定导航栏</h3>
        <ul>
            <li><a class="active" href="#home">头部固定导航栏实例</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contect">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
        <p>适合移动设备使用
            <br>在导航栏下方的内容部分可以设置margin-top: x%;以此来避免被导航栏遮住部分内容
            <br>底部导航栏的设置和头部导航栏的设置相似，只需将top:0;改为bottom:0;
        </p>
    </div>
</div>
</body>
</html>

　　对应的05.css：

#Content{
    margin-left: 22%;
}

#N1 ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}


#N2 ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#N2 a:link,#N2 a:visited{
    display: block;
    font-weight: bold;
    color: white;
    background-color: yellowgreen;
    width: 120px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}
#N2 a:hover,#N2 a:active{
    background-color: green;
}


#N3 ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border:1px solid #555;
}
#N3 a{
    display: block;
    color: black;
    padding: 8px 16px;
    text-decoration: none;
}
#N3 li{
    text-align: center;
    border-bottom: 1px solid #555;
}
#N3 li:last-child{
    border-bottom: none;
}
#N3 a.active{
    background-color: yellowgreen;
    color: white;
}
#N3 a:hover:not(.active){
    background-color: #555555;
    color: white;
}


#N4 ul{
    list-style-type: none;
    margin: 0;
    padding: 6px 0;
}
#N4 li{
    display: inline;
}
#N4 a:link,#N4 a:visited{
    font-weight: bold;
    color: white;
    background-color: yellowgreen;
    text-align: center;
    padding: 6px;
    text-decoration: none;
}
#N4 a:hover,#N4 a:active{
    background-color: green;
}

#N5 ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}
#N5 li{
    float:left;
}
#N5 a:link,#N5 a:visited{
    display: block;
    width: 120px;
    font-weight: bold;
    color: white;
    background-color: yellowgreen;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}
#N5 a:hover,#N5 a:active{
    background-color: green;
}

#N6 ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    background-color: darkslategray;
}
#N6 li{
    float: left;
}
#N6 a{
    display: block;
    padding: 14px 16px;
    color: white;
    text-decoration: none;
    text-align: center;
}
#N6 a:hover{
    background-color: black;
}

#N7 ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: darkslategray;
    overflow: hidden;
}
#N7 li{
    float: left;
}
#N7 a{
    display: block;
    text-decoration: none;
    text-align: center;
    color: white;
    padding: 14px 16px;
}
#N7 a:hover:not(.active){
    background-color: black;
}
#N7 a.active{
    background-color: darkgray;
}

#N8 ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    background-color: darkslategray;
}
#N8 li{
    float: left;
}
#N8 a{
    display: block;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    color: white;
}
#N8 a:hover:not(.active){
    background-color: black;
}
#N8 a.active{
    background-color: darkgray;
}
#N8 #About{
    float: right;
}

#N9 ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: lightgoldenrodyellow;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
#N9 li{
    float: left;
}
#N9 a{
    display: block;
    text-decoration: none;
    color: sandybrown;
    text-align: center;
    padding: 14px 16px;
}
#N9 a:hover:not(.active){
    background-color: lightyellow;
}
#N9 a.active{
    background-color: lightyellow;
}

#A ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: #555555;
    width: 20%;
    position: fixed;
    height: 100%;
    overflow: auto;
}
#A li{
    color: lightgrey;
}
#A a{
    display: block;
    text-decoration: none;
    color: white;
    padding: 8px 16px;
}
#A a:hover:not(.active){
    background-color: lightgrey;
}
#A .active{
    background-color: lightgrey;
}

刷新页面返回顶部

C_BJ

导航

公告

CSS05-各种导航栏试验01