HTML+CSS实战(一)——导航条菜单的制作

一、垂直导航菜单的制作
1、基本的样式清除： *{margin:0;padding:0}
2、无序列表圆点去除： ul{list-style:none}
3、下划线去除： a{text-decoration:none}
4、文本缩进标签 text-indent 不会影响总体宽度（padding会）
5、使用行高line-height可以实现文字默认居中，前提是行高和width相等。
6、需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block}hover格式 a:hover{}//通过a：hover，可以为菜单增加交互效果。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:120px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>
</head>
<body>
<ul class="nav"><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>
</body>
</html>

二、水平导航菜单的制作
垂直菜单改为水平菜单：ul的width去掉,li进行float:left；a标签的文本缩进改为文本居中： text-align:center;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px;}
.nav li a.on, .nav li a:hover{background:#F60;color:#fff; }
</style>
</head>
<body>
<ul class="nav"><li><a class="on" href="#">首　　页</a></li><li><a href="#">关于我们</a></li><li><a href="#">产品展示</a></li><li><a href="#">售后服务</a></li><li><a href="#">联系我们</a></li></ul>
</body>
</html>

三、其他

导航条菜单制作总结
1、用无序列表构建菜单；ul/li
2、垂直菜单转变为水平菜单：float:left；
3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position
4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值；margin-top:-10px；可以使高度变大的块上移，与其他块处于一个平面
5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。
6、line-height:40px；改变文字高度来满足其垂直居中
7、背景图片的偏移：background-position:0 -30px;
对于Y来说：-是向上移，+是向下移，
对于X来说：-是向左移，+是向右移

HTML+CSS实战(一)——导航条菜单的制作相关推荐

前端案例 - 导航条菜单的制作
每个网站都包含导航条菜单,在此做一些 HTML 和 CSS 基础回顾. 本文主要跟随课程完成导航栏菜单的制作,课程来源 imooc导航条菜单的制作. 推荐学习前端的朋友可以看看,简简单单一个小课程,对 ...
css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
WHMCS 6 如何修改导航条菜单（主菜单）
如果你刚升级了 WHMCS 6 ,你会发现导航条菜单连产品分类都没有. 如果你是做 WHMCS 模板开发的,你会发现 WHMCS 6 的主菜单已经不能直接在模板修改了. 那如何修改 WHMCS 6 导 ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框一.原理二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示一.原理 1. ...
CSS导航条菜单：带小三角形
很多网页的导航条都会有小三角形,其实实现这个功能也挺简单. 拿菜鸟教程首页导航做个例子首先写一个大的div_nav,而"首页""菜鸟笔记""菜鸟工具 ...
前端——菜鸟网站横向CSS导航条菜单：带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
前端基础之《Bootstrap（8）—CSS组件_导航条》
一.导航条 1.nav标签:灰色小条 <nav class="navbar navbar-default"></nav> 2.头部和折叠小按钮(.navba ...

HTML+CSS实战(一)——导航条菜单的制作

HTML+CSS实战(一)——导航条菜单的制作相关推荐

最新文章

热门文章