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

本節課咱們學習了博客靜態網頁第三部分左側列表的實現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;
}
相關文章
相關標籤/搜索