第二章 博客靜態網頁2

導航與Banner的實現

超連接加鏈表

<!–導航 -->
<div id="menu"
<ul>
<li><a href="http://www.baidu.com">首頁</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樣式：全局都默認設成無邊距 -->
* {
	margin:0;
	padding:0;
}

通配符-選擇器  * 表明應用到頁面全部的標籤上

導航與banner的實現

#menu{
	<!– 吸管工具，十六進制-->
	background-color:#328048; 
	height:50px;
}
#menu ul{
	<!– 去掉那個點-->
	list-style:none; 
	width:430px;
	height:50px;
	 <!– 設置行高，可讓li中的內容居中-->
	line-height:50px ;
	<!–整個ul標籤向右浮動-->
 	float:right;
}
#banner{
	background-color:#66F;
	height:209px;
}
#menu li{
	float:left;/*使列表從橫行變成豎行*/
	margin-left:20px;/*li距離左邊的li的距離*/

超連接樣式

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

 首先劃分左邊區域用div標籤

l < img /> 單標籤、有 src 和 alt 兩個屬性，

l <span></span> 成 對、沒有語義的標籤，主要是爲了方便對文本添加樣式的

<div id="main"><!--左邊區域-->
<div id="left">
			 <div id="zuozhe">
             <img src="images/baby.jpg" alt="個人圖片不見了" />
             <!--文字 span方便對文字的樣式修改，一行 不換行-->
             <span>linda zhaoqi</span>
             </div>
           	 <div id="huoli">
             6個列表
             </div>
           	 <div id="list">
             分類和列表div
             </div>
</div>


</div>