“导航条的制作”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎垂直导航条的制作）
 
（未显示2个用户的42个中间版本）
第1行： 第1行：
 +
==背景知识==
 +
*[[行内元素和块级元素]]
 +
==关于a标记==
 +
*a标记为行内元素
 +
*可通过添加dispay：block或float:left属性，将它转换为块级元素
 +
*a元素成为一个块级框后，可以设置其区域大小、边框及边距。
  
−
== 问题：导航条的制作 ==
+
== 应用：导航条的制作 ==
  
−
*[[文件:w4-16.png]]
 
−
*[[文件:w4-17.png]]
 
 
*导航条是建立在超链接的基础上的，我们在盒子中放置超链接，就构成了导航条
 
*导航条是建立在超链接的基础上的，我们在盒子中放置超链接，就构成了导航条
 +
*可以分为水平导航条和竖直导航条
 +
  
 
== 水平导航条的实现 ==
 
== 水平导航条的实现 ==
 
*[[文件:w4-16.png]]
 
*[[文件:w4-16.png]]
−
===编写‘导航栏’盒子===
+
===添加a标签===
 
*编写一个叫navigation的盒子，并在盒子中放置几个<a>标签
 
*编写一个叫navigation的盒子，并在盒子中放置几个<a>标签
−
  <nowiki><body>
+
 
−
<div id="navigation">
+
'''css:'''
−
<a href="#">Home</a>
+
  <nowiki>#navigation {   
−
<a href="#">Contact us</a>
+
width:100%;
−
<a href="#">Web Dev</a>
+
height:4.6em;
−
<a href="#">Web Design</a>
+
background-color:yellow;
−
<a href="#">Map</a>
+
font:normal bold 100% "宋体";
−
</div>
+
−
</body></nowiki>
+
            }
−
*效果图：
+
</nowiki>
−
*[[文件:w4-25.png]]
+
−
*关于a标记:
+
'''html :'''
−
a标记为行内元素
+
−
a{dispay：block；} 转换为块级元素
+
<nowiki><div id="navigation">
−
行内元素a浮动后也会成为一个新的块级框，可以设置其区域大小、边框及边距。
+
<a href="#">首页</a>
−
===为导航栏添加样式===
+
<a href="#">休闲零食</a>
−
*[[文件:w4-26.png]]
+
<a href="#">日用百货</a>
−
*'''思考1'''：如何保证每一个菜单项的等宽？'''在设置宽度基础上添加a标记浮动'''
+
<a href="#">服装鞋帽</a>
−
*'''思考2'''：如何使导航条中文本如何垂直居中？
+
<a href="#">数码电子</a>
 +
</div></nowiki>
 +
 
 +
===将a标签转化为浮动块元素===
 +
要是导航栏真正变成导航栏，链接需要变成按钮。
 +
 
 +
'给a标记添加''' float:left;'''属性，变成浮动的块级元素，设置宽、高
 +
 
 +
CSS:
 +
 
 +
<nowiki> #navigation a{
 +
width:18%;
 +
height:4.6em;
 +
float:left;
 +
border:1px solid red;
 +
 
 +
}</nowiki>
 +
 
 +
 
 +
 
 +
===设置水平垂直居中===
 +
 
 +
水平居中：
 +
 
 +
text-align:center; /* 这个属性使盒子中的链接居中 */
 +
 
 +
垂直居中：
 +
 
 
  <nowiki>height:4em;
 
  <nowiki>height:4em;
 
line-height:4em;/*确保文字垂直居中*/</nowiki>
 
line-height:4em;/*确保文字垂直居中*/</nowiki>
−
*'''思考3'''：如何产生左侧的粗边？
 
−
<nowiki>border-left:12px solid #151571; </nowiki>
 
−
*解决了上述三个问题的CSS源码如下：
 
−
<nowiki>#navigation {   
 
−
width:60%;
 
−
height:4.6em;
 
−
background-color:#1136c1;
 
−
font-weight:bold;
 
−
font-size:1em;
 
−
text-align:center; /* 这个属性使盒子中的链接居中 */
 
−
margin:0;
 
−
padding:0;
 
  
 +
或把行高属性集成到font属性中也可：
 +
 +
font:normal bold 100%/4.6em  "宋体";
 +
 +
*效果图：
 +
*[[文件:web4-42.png]]
 +
 +
CSS:
 +
 +
<nowiki>
 +
    #navigation a{
 +
width:18%;
 +
height:4.6em;
 +
float:left;
 +
border:1px solid red;
 +
text-align:center; /* 这个属性使盒子中的链接居中 */
 +
line-height:4.6em;
 +
color:black;/*字体颜色*/
 +
                text-decoration: none;
 +
 +
}</nowiki>
 +
 +
===设置悬停效果===
 +
 +
 +
悬停效果：
 +
 +
<nowiki>#navigation  a:hover{ /* 鼠标经过时 */
 +
background-color:blue; /* 改变背景色 */
 +
color:black; /* 改变文字颜色 */
 +
 +
 +
  }</nowiki>
 +
 +
效果图;
 +
 +
*[[文件:web4-43.png]]
 +
 +
源代码：
 +
 +
<nowiki><!doctype html>
 +
<html>
 +
<head>
 +
<title>商苑电商</title>
 +
<meta charset="utf-8" />
 +
               
 +
                <style type="text/css">
 +
   
 +
  #navigation {   
 +
width:100%;
 +
height:4.6em;
 +
background-color:blue;
 +
font:normal bold 100%  "宋体";
 +
 +
text-align:center;
 +
line-height:4.6em;
 +
  }
 +
 +
  #navigation a{
 +
            color:#FFFFFF;/*字体颜色*/
 +
            text-decoration: none;
 +
float:left;
 +
width:17%;
 +
height:4.6em;
 +
box-sizing:border-box;
 +
line-height: 4.5em;
 +
border:0.05em solid black;
 +
    border-left:1em solid #151571;
 +
 +
  }
 +
  #navigation  a:hover{ /* 鼠标经过时 */
 +
background-color:yellow; /* 改变背景色 */
 +
color:black; /* 改变文字颜色 */
 +
border-left:1em solid orange;
 +
 +
  }
 +
</style>
 +
</head>
 +
 +
<body>
 +
    <div id="navigation">
 +
<a href="#">首页</a>
 +
<a href="#">休闲零食</a>
 +
<a href="#">日用百货</a>
 +
<a href="#">服装鞋帽</a>
 +
<a href="#">数码电子</a>
 +
</div>
 +
</body>
 +
</html></nowiki>
 +
 +
==垂直导航条的制作==
 +
*[[文件:web4-44.png]]
 +
*垂直导航条的实现也异常简单，分为4步
 +
 +
 +
 +
===添加a标签===
 +
 +
<nowiki><!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<style type="text/css">
 +
    #navigation {
 +
width:20%;
 +
height:auto;
 +
background:yellow;
 +
}
 +
 +
</style>
 +
<title>无标题文档</title>
 +
</head>
 +
 +
<body>
 +
   
 +
<div id="navigation">
 +
<a href="#">首页</a>
 +
<a href="#">休闲零食</a>
 +
<a href="#">日用百货</a>
 +
<a href="#">服装鞋帽</a>
 +
<a href="#">数码电子</a>
 +
</div>
 
 
−
}
+
</html>
−
#navigation a{
+
</body>
−
+
</html></nowiki>
−
width:16%;
+
 
−
float:left;
+
===将a 标签转化为块级元素===
−
height:4em;
+
 
−
line-height:4em;
+
<nowiki>  #navigation a{
−
color:#FFFFFF;
+
display:block;
−
background-color:#1136c1;
+
                width:100%;
−
padding:5px 5px 5px 0.5em;
+
height:50px;
−
text-decoration:none;
+
               
−
border-left:12px solid #151571; /* 左边的粗边 */
+
background:blue;
−
+
border:1px solid red;
−
}</nowiki>
+
color:white;
−
===为导航栏设置悬停效果===
+
  }
−
*[[文件:w4-27.png]]
+
</nowiki>
−
*上节课我们学到超链接有4种伪类选择符，可以设置超链接的不同样式
+
 
−
  '''a { 样式规则; }'''    — 用父标记指定4种子状态共有的样式，由4个伪类继承<br/>
+
===设置水平垂直居中===
−
  '''a:link { 样式规则1; }'''  — 单独指定尚未访问超链接的样式<br/>
+
<nowiki> #navigation a{
−
'''a:visited { 样式规则2; }''' — 单独指定已经访问过超链接的样式<br/>
+
display:block;
−
'''a:hover { 样式规则3; }'''  — 单独指定鼠标指向超链接时的样式<br/>
+
                width:100%;
−
'''a:active { 样式规则4; }'''  — 单独指定单击激活超链接时的样式<br/>
+
height:50px;
−
*'''提示'''：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。
+
               
−
*现在，我们在CSS中添加悬停效果，只需要添加上面的a:hover就好了：
+
               
 +
background:blue;
 +
border:1px solid red;
 +
color:white;
  
−
  <nowiki>#navigation  a:hover{ /* 鼠标经过时 */
+
text-align:center;
−
background-color:#002099; /* 改变背景色 */
+
line-height:50px;
−
color:#ffff00; /* 改变文字颜色 */
+
text-decoration: none;
−
border-left:12px solid yellow;
+
border-left:20px solid green;
−
  }</nowiki>
+
}</nowiki>
  
−
*至此，我们的水平导航栏就添好了。
+
===设置悬停效果===
 +
<nowiki>  #navigation a:hover{
 +
background: yellow;
 +
color:black;
 +
border-left:20px solid red;
 +
}</nowiki>
  
−
==垂直导航条的制作==
 
−
*[[文件:w4-17.png]]
 
−
*垂直导航条的实现也异常简单，分为3步
 
−
  1.将导航盒子navigation的宽度由原先的60%设定为一个较小的值，比方说30%，高度设为auto;
 
−
  2.将a标签的属性float:left改为display:block，使每一个链接独占一行；
 
−
  3.a盒子的宽度设置为其父元素navigation的100%;
 
 
*完整代码如下：
 
*完整代码如下：
−
   <nowiki><style>
+
   <nowiki>
−
#navigation {  
+
<!DOCTYPE html>
−
width:30%;
+
<html>
−
height:auto;
+
<head>
−
background-color:#1136c1;
+
<meta charset="utf-8" />
−
font-weight:bold;
+
<title></title>
−
font-size:1em;
+
<style type="text/css">
−
text-align:center; /* 这个属性使盒子中的链接居中 */
+
            #navigation{
−
margin:0;
+
width:20%;
−
padding:0;
+
height:300px;
 +
background: yellow;
 +
}
 +
#navigation a{
 +
display:block;
 +
width:100%;
 +
height:50px;
 +
background:blue;
 +
border:1px solid red;
 +
color:white;
 +
text-align:center;
 +
line-height:50px;
 +
text-decoration: none;
 +
border-left:20px solid green;
 +
}
 +
#navigation a:hover{
 +
background: yellow;
 +
color:black;
 +
border-left:20px solid red;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<div id="navigation">
 +
<a href="#">首页</a>
 +
<a href="#">休闲零食</a>
 +
<a href="#">日用百货</a>
 +
<a href="#">服装鞋帽</a>
 +
<a href="#">数码电子</a>
 +
</div>
 +
</body>
 +
</html>
 +
</nowiki>
  
−
+
'''思考'''：如何使竖直导航条一直固定在页面的左侧 ？
−
}
 
−
#navigation a{
 
−
 
−
width:100%;
 
−
display:block;
 
−
height:4em;
 
−
line-height:4em;
 
−
color:#FFFFFF;
 
−
background-color:#1136c1;
 
−
padding:5px 5px 5px 0.5em;
 
−
text-decoration:none;
 
−
        border-top:1px solid white;
 
−
border-left:12px solid #151571; /* 左边的粗边 */
 
−
 
−
}
 
−
</style></nowiki>
 
−
*[[文件:w4-28.png]]
 
  
 
==手机和平板端的导航条==
 
==手机和平板端的导航条==
第128行： 第288行：
 
    }
 
    }
 
#navigation a{
 
#navigation a{
−
          width:45%;
+
          width:30%;
 
}
 
}
 
 

2020年11月30日 (一) 01:58的最新版本

背景知识

关于a标记

  • a标记为行内元素
  • 可通过添加dispay：block或float:left属性，将它转换为块级元素
  • a元素成为一个块级框后，可以设置其区域大小、边框及边距。

应用：导航条的制作

  • 导航条是建立在超链接的基础上的，我们在盒子中放置超链接，就构成了导航条
  • 可以分为水平导航条和竖直导航条


水平导航条的实现

  • W4-16.png

添加a标签

  • 编写一个叫navigation的盒子，并在盒子中放置几个<a>标签

css: 

  #navigation {    
				width:100%;
				height:4.6em;
				background-color:yellow;
				font:normal bold 100%  "宋体";			
	
            }

html : 

<div id="navigation">
			<a href="#">首页</a>
			<a href="#">休闲零食</a>
			<a href="#">日用百货</a>
			<a href="#">服装鞋帽</a>
			<a href="#">数码电子</a>
		</div>

将a标签转化为浮动块元素

要是导航栏真正变成导航栏，链接需要变成按钮。

'给a标记添加 float:left;属性，变成浮动的块级元素，设置宽、高

CSS: 

	 #navigation a{
		 width:18%;
		 height:4.6em;
		 float:left;
		 border:1px solid red;

	 }


设置水平垂直居中

水平居中： 

text-align:center; /* 这个属性使盒子中的链接居中 */

垂直居中： 

height:4em;
line-height:4em;/*确保文字垂直居中*/

或把行高属性集成到font属性中也可： 

font:normal bold 100%/4.6em  "宋体";
  • 效果图：
  • Web4-42.png

CSS: 

	 
    #navigation a{
		 width:18%;
		 height:4.6em;
		 float:left;
		 border:1px solid red;
		 text-align:center; /* 这个属性使盒子中的链接居中 */
		 line-height:4.6em;
		 color:black;/*字体颜色*/
                 text-decoration: none;

	 }

设置悬停效果

悬停效果： 

#navigation  a:hover{					/* 鼠标经过时 */
				background-color:blue;			/* 改变背景色 */
				color:black;						/* 改变文字颜色 */
				

  			}

效果图;

  • Web4-43.png

源代码： 

<!doctype html>
<html>
	<head>
		<title>商苑电商</title>
		<meta charset="utf-8" />
                
                <style type="text/css">
    
   #navigation {    
				width:100%;
				height:4.6em;
				background-color:blue;
				font:normal bold 100%  "宋体";		
					
				text-align:center; 
				line-height:4.6em;
   }

   #navigation a{
            	color:#FFFFFF;/*字体颜色*/
            	text-decoration: none;
				float:left;
				width:17%;
				height:4.6em;
				box-sizing:border-box;
				line-height: 4.5em;
				border:0.05em solid black; 
			    border-left:1em solid #151571;

   }
   #navigation  a:hover{					/* 鼠标经过时 */
				background-color:yellow;			/* 改变背景色 */
				color:black;						/* 改变文字颜色 */
				border-left:1em solid orange;

  	}
</style>
</head>

<body>
    <div id="navigation">
			<a href="#">首页</a>
			<a href="#">休闲零食</a>
			<a href="#">日用百货</a>
			<a href="#">服装鞋帽</a>
			<a href="#">数码电子</a>
	</div>
</body>
</html>

垂直导航条的制作

  • Web4-44.png
  • 垂直导航条的实现也异常简单，分为4步


添加a标签

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     #navigation {
		 width:20%;
		 height:auto;
		 background:yellow;
	 }

</style>
<title>无标题文档</title>
</head>

<body>
    		
	<div id="navigation">
			<a href="#">首页</a>
			<a href="#">休闲零食</a>
			<a href="#">日用百货</a>
			<a href="#">服装鞋帽</a>
			<a href="#">数码电子</a>
	</div>		
	
</html>
</body>
</html>

将a 标签转化为块级元素

  #navigation a{
		 display:block;
                 width:100%;
		 height:50px;
                 
		 background:blue;
		 border:1px solid red;
		 color:white;
	  }

设置水平垂直居中

	 #navigation a{
		 display:block;
                 width:100%;
		 height:50px;
                
                 
		 background:blue;
		 border:1px solid red;
		 color:white;

		 text-align:center;
		 line-height:50px;
		 text-decoration: none;
		 border-left:20px solid green;
	 }

设置悬停效果

  #navigation a:hover{
				 background: yellow;
				 color:black;
				 border-left:20px solid red;
			 }
  • 完整代码如下：
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
             #navigation{
				 width:20%;
				 height:300px;
				 background: yellow;
			 }
			 #navigation a{
				 display:block;
				 width:100%;
				 height:50px;
				 background:blue;
				 border:1px solid red;
				 color:white;
				 text-align:center;
				 line-height:50px;
				 text-decoration: none;
				 border-left:20px solid green;
			 }
			 #navigation a:hover{
				 background: yellow;
				 color:black;
				 border-left:20px solid red;
			 }
		</style>
	</head>
	<body>
		<div id="navigation">
			<a href="#">首页</a>
			<a href="#">休闲零食</a>
			<a href="#">日用百货</a>
			<a href="#">服装鞋帽</a>
			<a href="#">数码电子</a>
		</div>
	</body>
</html>

思考：如何使竖直导航条一直固定在页面的左侧 ？

手机和平板端的导航条

  • W4-29.png
  • 在手机和平板电脑观看导航条时，
  • 垂直导航条跟在电脑上的效果是一样的，无需修改；
  • 水平导航条受屏幕宽度所限，需要在上面水平导航条代码的基础上添加以下内容：
 /*当页面的宽度在900px ~ 1200px之间的时候,平板电脑屏*/
         @media screen and (min-width: 900px) and (max-width: 1200px){
            #navigation {    
	          width:100%;
		  background-color:#FFFFFF;
		  font-size:2em;
	    }
	 #navigation a{
	          width:30%;
		}
			
			
         }
         /*当页面的宽度在600px ~ 900px之间的时候，手机屏*/
        @media screen and (min-width: 900px) and (max-width: 1200px){
            #navigation {    
	          width:100%;
		  background-color:#FFFFFF;
		  font-size:2em;
	    }
	 #navigation a{
	          width:45%;
		}
			
         }



返回 网页设计与开发

取自“http://www.openbrains.net/mediawiki/index.php?title=导航条的制作&oldid=24294”