第二章 博客靜態網頁1

 製做一個網頁首先肯定總體佈局分析設計

HTML中<div></div>：劃分頁面的區域，佈局

<div id="box">   
	<div id="banner"></div>  <!-- 頭部：橫幅的圖片區域 banner  -->
	<div id="menu「></div> <!-- 頭部：導航欄區域 menu -->
	<div id="main"> <!-- 中間主要的部分 main -->
  		<div id="left"> </div>
  		<div id="right"></div>
	</div>  
	<div id="footer"></div> <!-- 最下面尾部的區域：footer -->
</div>

CSS 樣式中的：如何使用樣式、設置 div 的樣式（寬、高、背景、 div 並排）

@charset "utf-8";
#box{
	width:1024px;/* 設置id是box的div，高度爲1014px */
	height:1300px;
	margin:0 auto;/*居中*/
	background-color:#C00;
}

引用方式 - 外鏈式： <link href ="style.css" rel ="stylesheet" type="text/ css " />    //href="css的地址"

HTML中的新使用的標籤：圖片<img>、超連接<a>、列表<ul><li>

圖片標籤<img>：<img>標籤屬於單標籤：<img />

< img > 標籤有兩個必要的屬性：

src 屬性：圖像文件的路徑

alt 屬性：圖片說明。當圖片找不到不能顯示時，會顯示這個文字內容

<img src="images/bg.jpg" 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>