下面教大家HTML+CSS制作导航条 。
文章插图
step1: 在<body>标签中建立一个p,为其命名为“nav”,在p中建立一个无序列表,列表共分为5个项目,每个项目都带有超链接,因为是做演示,每个链接就以空链接来做示范,代码如下:
<html>
<head>
<title>制作网页导航条</title>
<style>
<!-- -->
</style>
</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>
打开浏览器预览,看到的效果如图所示:
【HTML+CSS制作导航条】
文章插图
step2: 输入如图nav代码去掉小黑点 。
文章插图
step3: 输入如图代码,利用css的flat特性让标签在同一行显示 。
文章插图
step4: 输入如图代码给nav层添加黑色背景色 。
文章插图
step5: 效果如图 。
文章插图
推荐阅读
- 怎么制作广东腊肉
- 怎么用excel制作抛物线图表
- 淘宝颜色分类图片大小有何要求?主图制作有何技巧?
- 怎么使用ps制作书的封面
- 剪映PC版怎么制作长图滚动视频
- 矿泉水瓶手工制作花瓶趣味变废为宝手工制作
- 魔术气球教程:[13]小狗狗的制作
- 粽子的制作过程
- WPS文字怎么制作倒立文字
- 怎么用Excel制作浪漫表白公式!