初学静态网页制作2

这节课我们主要学习了导航和banner的主要实现，还有左侧区域的部分实现。

一,

1,图片标签<img>：

<img>标签属于单标签：<img /> <img>

标签有两个必要的属性：

src属性：图像文件的路径

alt属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

例如：

<img src="../images/baby.jpg" alt="不见了"/>

2,超链接标签<a>：

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

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

例如：

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

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

列表标签<ul><li>：

成对出现<ul></ul>、<li></li>、<ol></ol>

列表分为无序列表和有序列表。

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

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>

3,如果发现banner和menu之间还有空：

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

* {   

 margin:0;   

 padding:0;

}

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

4.导航菜单样式：

#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;
}

5,超链接样式

四个链接状态，可以对每一种状态添加样式

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

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

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

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

#menu  a:hover{
	color:#FF0000;
	}

二,

左侧列表的实现:

将左侧分为3个部分

第一个部分是：#zuozhe图片和文本,

<div id="zuozhe">
<img src="../images/baby.jpg" alt="不见了"/>
<!-- 文字，span方便对文字的样式修改，一行不换行-->
<span> lihua</span>
</div>

对zuozhe中的图片和文本进行处理

               #zuozhe{
						padding-top:15px;
						padding-left:15px;/*上边和左边留有空间*/
						text-align:center ;/*整个内容居中*/
						
						}
						#zuozhe img{
							border:1px #6633CC;/*加边soild实现*/
							padding:8px;
							border-radius:20px;/*圆角值越大，角越圆*/
							
							}

第二个部分：#huoli:标题、小图标、列表、

<div id="huoli">
6个列表
</div>

第三部分：#list:标题、列表 文章分类列表 最新文章列表

<div id="list">
分类和列表
</div>

 

转载于:https://my.oschina.net/u/4090343/blog/3024667