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+CSS实战(一)——导航条菜单的制作_第1张图片

<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)