将菜鸟上导航栏的那一节的例子实验了一下,下方是代码,排版不太合适,有点乱。
顺便记录一下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; }