博客靜態網頁------左側列表的實現

本節課咱們學習了博客靜態網頁第三部分左側列表的實現css

知識點： HTML中的標籤：塊標籤div、圖片<img>、行內標籤<span>、h5標題、列表標籤<ul>、<li>css3

CSS樣式中的屬性：web

圖片邊框	border
高	height
寬	width
內邊距	pandding
外邊距	margin
邊框4個角設爲圓角	border-radius
文本內容居中	text-align
字體	font-size,font=family,font-weight,color
垂直居中	line-height
取消項目符號	list-style
浮動	float
字體下劃線	text-decoration
背景圖片	backround

zouzhe	圖片和文本
huoli	標題，小圖標，列表
list	標題，列表，文章分類列表，最新文章列表

先將左側的div塊劃分紅3個區域，使用div標籤瀏覽器

<!--左側的部分-->
<div id="left">
	<div id="zuozhe"></div>
           	 <div id="huoli"></div>
           	 <div id="list"></div>
</div>

「做者」這個div裏是包含圖片和文本。框架

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

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

<div id="zuozhe">
	<img src="images/baby.jpg" alt="做者的照片"  />
                	<span>linda zhaoqi</span>
</div>

活力地帶」這塊的div，包含標題<h5>、圖片<img />、列表標籤<ul><li></li></ul>url

h1~h6標題，h1最大spa

<div id="huoli">
         <h5>活力地帶</h5>
         <ul>
                	<li><img src="images/1.gif" alt="修飾小圖標" /><a href="#">我的首頁</a></li>
                    <li><img src="images/2.gif" alt="修飾小圖標" /><a href="#">校園情緣</a></li>
                    <li><img src="images/3.gif" alt="修飾小圖標" /><a href="#">陽光生活</a></li>
                    <li><img src="images/4.gif" alt="修飾小圖標" /><a href="#">釋放夢想</a></li>
                    <li><img src="images/5.gif" alt="修飾小圖標" /><a href="#">個人相冊</a></li>
                    <li><img src="images/6.gif" alt="修飾小圖標" /><a href="#">給我留言</a></li>
          </ul>
</div>

文章分類、文章列表」放在一塊div了，包含標題<h5>、列表標籤<ul><li></li></ul>設計

當點擊文章分類或者文章名稱時，會有跳轉這樣一個操做，因此用<a>超連接

<div id="list">
   <h5>個人文章分類</h5>
   <ul>
      <li><a href="#">我的隨筆</a></li>
      <li><a href="#">Web基礎</a></li>
      <li><a href="#">Java基礎</a></li>
      <li><a href="#">Servlet開發</a></li>
      <li><a href="#">Spring框架</a></li>
   </ul>

<h5>最新文章列表</h5>
   <ul>
      <li><a href="#">個人家在哪裏</a></li>
      <li><a href="#">你好!秋天</a></li>
      <li><a href="#">web基礎之HTML</a></li>
      <li><a href="#">大學生軟件設計大賽</a></li>
   </ul>
</div>

盒子模型全部HTML元素能夠看做盒子，span默認不具有盒子模型屬性。

對圖片須要設置：內邊距padding:一圈都是8px; 設置綠色的、實線的邊border：1px solid #096

Css代碼

#zuozhe{
	text-align:center;
	padding-left:15px;
	padding-top:15px;
}
#zuozhe img{
	border:1px solid #096;
	padding:8px;
	border-radius:8px;/*設置圓角CSS3新特性*	
}

注意：之前實現圓角很麻煩，如今css3有了border-radius這個屬性，就很容易了，可是由於css3新特性，因此不一樣的瀏覽器可能存在兼容性問題

設置做者區域中文本的樣式，若是沒有span標籤，就沒有什麼標識能夠針對這段文本來設置css樣式，因此span就是針對這樣的狀況用的

全部HTML元素能夠看做盒子，span默認不具有盒子模型屬性。盒子模型有padding、margin，可是span不具有這些屬性，也就是設置這些是不起做用的，怎麼辦呢？

將span轉成塊元素：display:block 固然也能夠從塊元素轉回行內元素display:inline

#zuozhe span{
	font-size:15px;
	margin:10px;
	border-top:1px dashed #666666;
	border-bottom:1px dashed #666666;
	padding-top:5ox;
	padding-bottom:5px;
	display:block;/*將span行內元素轉成塊元素*/
}

高度確定得設置，由於列表都是浮動的，必須設置在多大的範圍裏浮動

「活力地帶」這個標題和其餘倆標題樣式同樣，那怎麼設置css？Class選擇器

#huoli{
	height:150px;
	margin-top:20px;    }
.biaoti{
	color:#FFFFFF;
	font-size:16px;
	font-weight:bolder; /*加粗*/
	width:220px;
	height:40px;
	background-color:#328048;
	border-radius:0 10px 10px 0; /*只設置右邊的圓角 順序：上 右  下 左*/
	padding-left:30px;
	line-height:40px;    }

「活力地帶」列表和菜單導航裏的同樣，設置爲浮動，就會排排坐，一個個從左到右，由於一行只要2個，因此寬度有限制之後，放置2個li後就自動掉第2行去了

#huoli ul{
	padding-left:20px;
	padding-top:10px;
	list-style:none;
	/*去掉點*/
}
#huoli ul li{
	float:left;
	/*由於空間不夠寬，僅能放下2個li*/
	width:80px;
	margin:5px;
}

#huoli ul li a{
	float:left;
	font-size:12px;
	color:#333333;
	text-decoration:none;
}
#huoli ul li img{
	/*爲了和文字保持隊形，也浮動*/
	float:left;
	margin-right:6px;
}

「文章分類、文章列表」標題樣式和活力地帶用一個class

列表樣式：li標籤：用背景更容易設置列表的圖標樣式 background-position:5px center; 背景圖片左上角相對於li元素左上角位置 x軸 y軸

#list ul{
	list-style:none;
	padding:15px;
}
#list ul li{
	border-bottom:1px dashed #666;
	padding-bottom:8px;
	padding-left:15px;
     background:url(images/icon1.gif) no-repeat;
	/*背景圖片左上角相對於li元素左上角的位置 x軸 y軸*/
	background-position:5px center;
	margin-bottom:8px;
}
#list ul li a{
	font-size:12px;
	color:#333;
	text-decoration:none;
}