本節課咱們學習了博客靜態網頁第三部分左側列表的實現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; }