第二章 博客靜態網頁3

左側列表的實現

<!--左邊區域-->
       		<div id="left">
            	<!--劃分3個區域-->
                <div id="zuozhe">
                	<img src="images/baby.jpg" alt="個人照片"/>
                    <!--文字,span方便對文字的樣式修改，一行，不換行-->
                    <span>linda zhaoqi</span>
                </div>
                <div id="huoli">
                	<h5 class="biaoti">活力地帶</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 id="list">
                	<h5 class="biaoti">個人文章分類</h5>
                    <ul>
                    	<li><a href="#">我的隨筆</a></li>
                    	<li><a href="#">Web開發</a></li>
                        <li><a href="#">Spring框架</a></li>
                        <li><a href="#">JavaSE</a></li>
                        <h5 class="biaoti">文章列表</h5>
                        <li><a href="#">你家在哪裏</a></li>
                        <li><a href="#">你好！秋天</a></li>
                        <li><a href="#">你好！春天</a></li>
                        <li><a href="#">你好！冬天</a></li>
                    </ul>
                </div>
            </div>

標題h1~h6 h1最大

css代碼

.biaoti{
	color:#FFF;
	background-color:#328048;/*背景色綠色 ，取色器取到*/
	height:40px;
	width:220px;
	line-height:40px;/*設置垂直居中，值要跟height的值同樣*/
	font-size:16px;
	font-weight:border;/*加粗，h5原本就是標題 已經加粗過 不加也能夠*/	
	padding-left:30px;/*左邊騰出一個空*/	
	border-radius:0 10px 10px 0;/*和margin、border、padding  都是4個值*/
	/*順序：左上 右上 右下 左下*/
}

#huoli ul{
	list-style:none;
	padding-left:20px;
	padding-top:10px;
}

#huoli ul li{
	margin:5px;/*每一個li之間的距離*/
	width:80px;
	float:left;/*由於外面ul的寬度過小了， 因此本來應該都放在一行的li都會自動的掉下去，使一行只能展現2個li*/
}

#huoli ul li a{
	text-decoration:none;/*去掉下劃線*/
	font-size:12px;
	color:#333;/*網站字體通常都不是黑色*/
}
#huoli ul li img{
	margin-right:2px;/*讓圖標和文字間的距離變大*/
}

#huoli ul li a:hover{/*鼠標滑過變色*/
	color:#090;
}

#list{
	clear:both;/*清空全部自帶的float影響*/
}

#list ul{
	list-style:none;
	padding:15px;/*不靠左邊和上邊 留空*/
}
#list ul li{
	padding-bottom:8px;
	padding-left:15px;	
	border-bottom:1px #999 dotted;/*下面的虛線 dashed 或者 dotted*/
	margin-bottom:8px;/*個人邊和其餘人的字的距離，padding表示個人字和個人邊的距離*/
	background:url(images/iconl.gif) no-repeat;/*不重複的話 變成背景*/
	background-position:5px center;/*背景點位置*/
}

border-radius這個屬性能夠選擇有弧度的角是哪些

background-position:5px center;背景圖片左上角相對於li元素左上角位置 x軸 y軸

 

這一節主要講了左邊標題的設計方式 如何排版 以及一些細節點的注意部分

調節字體大小以及居中都是很重要的地方還有選擇顏色的方法