如何通过html制作导航条
程序员文章站
2022-04-09 11:13:38
...
今天分享一下简单导航栏的制作方法:
第一步:引入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> <p 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> </p> </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> <p 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> </p> </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; }
以上就是如何通过html制作导航条的详细内容,更多请关注其它相关文章!
上一篇: 用php+ajax+echarts.js 实现统计每分钟答题曲线图
下一篇: 发生异常重试的处理方案
推荐阅读
-
【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)
-
如何通过酷狗制作手机铃声
-
U盘有加密无法制作启动U盘如何通过量产让U盘失去加密功能
-
ps如何制作静态的html页面?
-
[使用Html5 CfxixiJS制作APP]如何用iscroll制作水平滚动的List布局
-
html5通过postMessage如何进行跨域通信
-
如何制作响应式网站?12个优秀案例参考_html/css_WEB-ITnose
-
html如何制作细线表格
-
如何通过coding pages 展示 Axure HTML_html/css_WEB-ITnose
-
如何通过coding pages 展示 Axure HTML_html/css_WEB-ITnose