html實戰之一（利用html+css做一個靜態頁面）
參照一般部落格的樣子，做了個超簡易版，先秀一下樣子
html1
很明顯主體部分是三個模組，頂部左側和右側div
寫的過程中客服的幾個問題：
1.參照了w3school的樣子，固定主體寬度，調整瀏覽器時，保持最小寬度
html {
width: 966px;
background-color: #f9f9f9;
margin: 0px auto; //整體居中
/* overflow: scroll;
overflow-x: hidden;*/
}
2.頂部圖片是個連結，並且撐到了最大
<div id="header_index">
<a href="index.html" title="w3school 線上教程">
<img src="http://img5.imgtn.bdimg.com/it/u=2769827889,3349501200&fm=21&gp=0.jpg" width="100%">
</a>
</div>
3.左側div的'我的分類'下部分是一個ul，這裡css也調了好久，才打到w3school的類似對齊效果。做以下幾個工作：
<div id="kind" >
<h2>我的分類</h2>
<ul style="list-style:none">
<li><a href="index.html" title="文章">文章</a></li>
<li><a href="imagescan.html" title="圖片瀏覽">圖片瀏覽</a></li>
<li><a href="index.html" title="分類3">分類3</a></li>
<li><a href="index.html" title="分類4">分類4</a></li>
<li><a href="index.html" title="分類5">分類5</a></li>
<li><a href="index.html" title="分類6">分類6</a></li>
<li><a href="index.html" title="分類7">分類7</a></li>
<li><a href="index.html" title="分類8">分類8</a></li>
<li><a href="index.html" title="分類9">分類9</a></li>
</ul>
</div>
//樣式
去邊距空格，不懂得可以開啟chrome瀏覽器的開發者工具，看看右下角的這個圖
*
{
margin:0;
padding:0;
border:0;
}
ul去掉點 <ul style="list-style-type:none">
li連結項設定樣式 a:link代表未訪問過連結 a:visited代表訪問過的連結
a:link,a:visited {
text-decoration: none; //無裝飾
color: #000;
background: transparent;
}
設定行高字型等
li{
font-family: Verdana, Arial, '宋體';
line-height: 21px;
font-size: 15px;
margin: 0;
padding: 0;
text-align: left;
}
4.正文部分不說了，就是左側和右側要設定寬，然後要在同一層，設定float得一起，不然可能很奇怪