介绍一级导航的制作
发布时间:2021-12-02 13:50:27 所属栏目:大数据 来源:互联网
导读:今天分享一下简单导航栏的制作方法: 第一步:引入css样式表,新建一个id为nav的层,使用ul、li、a标签来制作完成效果。 !DOCTYPE html html head meta charset=UTF-8 title/title link rel=stylesheet type=text/css href=css/yiji.css/ /head body div id=
今天分享一下简单导航栏的制作方法: 第一步:引入css样式表,新建一个id为nav的层,使用<ul>、<li>、<a>标签来制作完成效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </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> <li><a href="">首页</a></li> </ul> </div> </body> </html> 第二步设置CSS样式: 1.设置nav的属性 #nav{ width: 500px; height: 50px; border: 1px solid red; } 展示效果如下所示: 2.清除<ul>标签前面自带的点 #nav ul{ list-style: none; } 3.设置<ul>下包含的<a>标签的属性 #nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; } 4.设置鼠标滑过效果 #nav ul li a:hover{ background-color: #ABCDEF; } 最终效果: 完整HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </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> <li><a href="">首页</a></li> </ul> </div> </body> </html> 完成CSS样式代码部分: *{ margin: 0; padding: 0; } #nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px; } #nav ul{ list-style: none; } #nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; } #nav ul li a:hover{ background-color: #ABCDEF; } (编辑:东莞站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
站长推荐