企业实训_2019.3.19

<img src="images/bg.jpg" alt="这是我的图片" />

图片标签 < img> ：
< img>标签属于单标签：< img />
< img>标签有两个必要的属性：
src属性：图像文件的路径
alt属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

其次对导航来说 对于每一个导航都需要打开新的超链接

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

这仅仅是把主要内容做进去，下面开始做css样式，外观，

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

我做的时候有个地方错了 之后做出来的页面巨丑！！！！

好不容易改过来 还好 还好 嘿嘿···