3.18企业实训

2、导航与Banner的实现

（2）超链接标签<a>：

    成对出现<a></a>、用于从一个页面跳转到另一个页面

    <a>最重要的属性href，跳转的连接目标。若没有目标，可用#表示空链接

    <a href=“http://www.baidu.com”>去百度</a>

    <a href=“#”>哪也不去</a>

    列表标签<ul><li>：成对出现<ul></ul>、<li></li>、<ol></ol>

    列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记，有序用数字。

<!– 有序列表 -->
<ol>
	<li><a href=“#”>阳光生活</a></li>
	<li><a href=“#”>校园梦想</a></li>
</ol>
<!– 无序列表 -->
<ul>
	<li><a href=“#”>阳光生活</a></li>
	<li><a href=“#”>校园梦想</a></li>
</ul>

（3）HTML代码（超链接+列表）：

<!–导航 -->
<div id="menu"
<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>
<li><a href="#">留言</a></li>
</ul>
</div>

你会发现banner和menu之间还有空：     Google浏览器按F12，看看margin边距是否不是0？

<!– css样式：全局都默认设成无边距 -->

* {   

 margin:0;     padding:0;

}

通配符-选择器  * 代表应用到页面所有的标签上

导航菜单样式：

#menu{
	<!– 吸管工具，十六进制-->
	background-color:#328048; 
	height:50px;
}
#menu ul{
	<!– 去掉那个点-->
	list-style:none; 
	width:430px;
	height:50px;
	 <!– 设置行高，可以让li中的内容居中-->
	line-height:50px ;
	<!–整个ul标签向右浮动-->
 	float:right;
}
#menu ul li{
	<!–每个li标签向左浮动，一个挨一个，知道ul的宽度放不下了，就掉下去了-->
	float:left;
	margin-left:20px;
}

超链接样式

四个链接状态，可以对每一种状态添加样式（可去菜鸟教程学习下）

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

#menu ul li a{
	 <!– 去掉下划线-->
	text-decoration:none;
	font-size:16px;
	color:#FFF;
	font-family:"微软雅黑"
}

#menu ul li a:hover{
	color:#F60;
}

 

转载于:https://my.oschina.net/u/4090526/blog/3024782