学习 html+CSS 的导航栏样式, 做个笔记, 这个是最基础的, 没有啥美化.
后面再研究一下树形结构的二级导航栏
- <!DOCTYPE HTML>
- <HTML lang="en" xmlns="http://www.w3.org/1999/html">
- <head>
- <meta charset="UTF-8">
- <title>{% block title %} base 模板 {% endblock title%}</title>
- <style>
- th {color:green}
- tbody {color:blue;height:50px}
- tfoot {color:red}
- #header{
- background-color: black;
- color: azure;
- text-align: center;
- padding: 5px;
- }
- /* 设定整个导航栏样式 */
- #nav{
- background-color: gainsboro;
- height: 500px;
- width: 200px;
- color: black;
- float: left;
- padding:5px;
- }
- #nav a,ul{
- text-decoration: none;/* 去除下划线 */
- margin: 0px;/* 去除前上方留白 */
- padding: 0px; /* 去除左方留白 */
- }
- /* 一级导航栏样式 */
- #nav ul li{
- display: block;
- }
- /* 一级导航栏鼠标悬停样式 */
- #nav ul li:hover{
- background-color: burlywood;
- }
- /* 绑定一级导航栏与二级导航栏样式 */
- #nav ul li:hover ul{
- position: absolute;
- display: block;
- }
- /* 二级导航栏样式 */
- #nav ul li ul{
- background-color: whitesmoke;
- display: none;/* 默认隐藏 */
- left: 100px;
- position: relative; /* 相对定位, 左移 100px*/
- }
- /* 二级导航栏鼠标悬停样式 */
- #nav ul li ul li:hover{
- background-color: gainsboro;
- }
- #footer{
- background-color: black;
- color: azure;
- clear: both;
- text-align: center;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <div id="header">
- <h1 > 测试工具 </h1>
- </div>
- <div id="nav">
- <ul>
- <li><a href="/app1/home"> 主页 </a></li>
- <li><a href="/app1/home"> 主目录 1 号 </a>
- <ul>
- <li><a href="/app1/policy"> 子项 001</a> </li>
- <li><a href="/app1/policy/67"> 子项 002</a></li>
- </ul></li>
- <li><a href="#"> 目录 2 号 </a>
- <ul>
- <li><a href="/app1/policy">11111111111</a> </li>
- <li><a href="/app1/policy/67">22222222222</a></li>
- <li><a href="/app1/policy/67">33333333333333</a></li>
- </ul></li>
- </ul>
- </div>
- {% block content %}
- <table border="1">
- <tr>
- <th>row 1, cell 1</th>
- <th>row 1, cell 2</th>
- </tr>
- <tr>
- <td>row 1, cell 1</td>
- <td>row 1, cell 2</td>
- </tr>
- <tr>
- <td>row 2, cell 1</td>
- <td>row 2, cell 2</td>
- </tr>
- </table>
- <dl>
- <dt>Coffee</dt>
- <dd>Black hot drink</dd>
- <dt>Milk</dt>
- <dd>White cold drink</dd>
- </dl>
- {% endblock content %}
- <div id="footer">
已经没有了
- </div>
- </body>
- </HTML>
成果如下:
来源: http://www.bubuko.com/infodetail-2936058.html