今天學習了CSS基本樣式和屬性。在做練習的時候遇到一個小問題，最後解決了。
記住：浏覽器有預設margin和padding。樣式最開始記得一定寫：*{margin:0;padding:0}。
學習經驗：
1、margin值相鄰兩個元素的margin會疊加在一起
2、margin子元素的值會傳遞給父元素
3、能用padding,盡量不用margin，margin浏覽器相容性較差。
4、h标簽不能直接寫在ul中，必須用li包起來。簡言之，ul下隻能是li标簽。
下面是CSS常用基本樣式和屬性。
#box1{
width:350px;
height:350px;
background: #f00;
border: 10px solid #000;
font-size: 16px;
color: yellow;
font-weight: bold;
font-family: "宋體";
line-height:32px;
font-style: italic;
text-indent: 2em;/*首行縮進：1em=一個文字大小*/
text-align: left;/*對齊方式*/
text-decoration: underline;/*文字修飾：through-line(删除線)、overline(上劃線)、underline(下劃線)、none*/
word-spacing: 6px;/*詞間距*/
letter-spacing:5px;/*字母間距（字間距）
*/
}
以下是練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網易新聞小執行個體</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:300px;
height:419px;
background: url(bg.png) 0 0 no-repeat;
margin: 0 auto;
li{
font-size: 12px;
line-height: 24px;
list-style: none;
padding-left:52px;
vertical-align: middle;
.title{
height:32px;
padding:6px;
.con1{
height:58px;
padding-top: 10px;
.con2{
height:126px;
.con3{
height:78px;
.con4{
height:128px;
</style>
</head>
<body>
<div id="box">
<ul>
<li class="title"><h5>網易産品</h5></li>
<li class="con1">免費郵 VIP郵箱 企業郵 郵箱大師 易信</li>
<li class="con2">夢幻西遊2 新大話2 新大話3 藏地傳奇 魔獸世界 星際争霸II 倩女幽魂2 武魂2 天下3 突擊英雄 新飛飛 大唐無雙零 天谕 英雄三國 龍劍 亂鬥西遊 爐石傳說 UU加速</li>
<li class="con3">考拉海購 LOFTER 部落格 相冊 花田交友 約會 女神 跟帖 搶購 CC語音 BoBo直播</li>
<li class="con4">彩票 理财 商城 貴金屬 電影票 車險 有道詞典 翻譯 雲筆記 印象派 公開課 雲課堂 讀小說 雲音樂 火車票 遊戲助手 公正郵 應用 雜志 新聞用戶端 大學慕課 </li>
</ul>
</div>
</body>
</html>
運作結果：
![怎麼能學好Web前端開發 該如何規劃學習路線[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)