3.18日企业实训第三节(导航与Banner的实现第三部分)

超链接标签<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>

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/4094999/blog/3024206