本節課咱們學習了博客靜態網頁，重點是網站總體佈局分析設計和導航與Banner的實現。css
在網站總體佈局分析設計中html
| #banner | 一張頭部圖片 | #footer | 尾部的部分 |
| #left | 中間的左邊部分 | #menu | 導航菜單 |
| #main | 中間主要部分 | #right | 中間的右邊部分 |
<div></div> 做用：劃分頁面的區域，佈局網絡
中間主題 div main 最外層div box工具
div標籤：佈局
① Html的標籤，成對出現<div></div>學習
②<div>定義頁面上的一塊區域，對整個頁面劃分區域用網站
③經常使用的有id和class屬性：<div id="menu"></div>ui
博客網頁佈局的HTML代碼以下：spa
<div id="box"> <div id="banner"></div> <!-- 頭部：橫幅的圖片區域 banner --> <div id="menu「></div> <!-- 頭部：導航欄區域 menu --> <div id="main"> <!-- 中間主要的部分 main --> <div id="left"> </div> <div id="right"></div> </div> <div id="footer"></div> <!-- 最下面尾部的區域：footer --> </div>
Css樣式：設計
①引用方式-外鏈式：<link href="style.css" rel="stylesheet" type="text/css" />
②css樣式寫法：選擇器{ 屬性1:屬性1的值;… }
③選擇器分爲：id選擇器（#id）、class選擇器（.class）、標籤選擇器（div）
博客網頁佈局的CSS代碼以下（須要設置每一個div的寬、高、位置、背景色）：
@charset "utf-8";
#box{
width:1024px;/* 設置id是box的div，高度爲1014px */
height:1300px;
margin:0 auto;/*居中*/
background-color:#C00;
}
<!– 圖片區域的高、寬、背景色 -->
#banner{
width:100%;
height:209px;
background-color:#6FF;
}
<!– 導航菜單區域的高、寬、背景色 -->
#menu{
height:50px;
background-color:#328048;
}
<!– 中間一大塊主體區域的高、寬、背景色 -->
#main{
height:1000px;
padding-top:10px;
}
<!– 中間區域左邊部分的的高、寬、背景色 -->
#left{
height:1000px;
width:250px;
background-color:#6F9;
float:left;
}
#right{
height:1000px;
width:744px;
background-color:#FFC;
float:right;
}
#footer{
height:80px;
background-color:#328048;
}
二，導航與Banner的實現
HTML中的3個新標籤：圖片標籤<img>、超連接標籤<a>、列表標籤<ul><li>
CSS樣式中的：背景色、超連接樣式、列表樣式的寫法
圖片標籤<img>：
<img>標籤屬於單標籤：<img />
<img>標籤有兩個必要的屬性：
src屬性：圖像文件的路徑
alt屬性：圖片說明。當圖片找不到不能顯示時，會顯示這個文字內容
博客網頁-Banner區域的HTML代碼以下：
<img src="images/bg.jpg" alt="這是個人圖片" />
超連接標籤<a>：
①成對出現<a></a>、用於從一個頁面跳轉到另外一個頁面
②<a>最重要的屬性href，跳轉的鏈接目標。若沒有目標，可用#表示空連接
<a href=「http://www.baidu.com」>去百度
</a> <a href=「#」>哪也不去</a>
③列表標籤<ul><li>：成對出現<ul></ul>、<li></li>、<ol></ol>
列表分爲無序列表和有序列表。無需列表用粗體圓點對項目標記，有序用數字。
a<!– 有序列表 --> <ol> <li><a href=「#」>陽光生活</a></li> <li><a href=「#」>校園夢想</a></li> </ol> <!– 無序列表 --> <ul> <li><a href=「#」>陽光生活</a></li> <li><a href=「#」>校園夢想</a></li> </ul>
<!–導航 --> <div id="menu" <ul> <li><a href="#">首頁</a></li> <li><a href="#">相冊</a></li> <li><a href="#">陽光生活</a></li> <li><a href="#">校園情緣</a></li> <li><a href="#">釋放夢想</a></li> <li><a href="#">留言</a></li> </ul> </div>
<!– css樣式：全局都默認設成無邊距 -->
* {
margin:0;
padding:0;
}
通配符-選擇器 * 表明應用到頁面全部的標籤上
導航菜單樣式：
#menu{
<!– 吸管工具，十六進制-->
background-color:#328048;
height:50px;
}
#menu ul{
<!– 去掉那個點-->
list-style:none;
width:430px;
height:50px;
<!– 設置行高，可讓li中的內容居中-->
line-height:50px ;
<!–整個ul標籤向右浮動-->
float:right;
}
#menu ul li{
<!–每一個li標籤向左浮動，一個挨一個，知道ul的寬度放不下了，就掉下去了-->
float:left;
margin-left:20px;
}
超連接樣式 四個連接狀態，能夠對每一種狀態添加樣式（可去菜鳥教程學習下）
a:link - 正常，未訪問過的連接 a:visited - 用戶已訪問過的連接
a:hover - 當用戶鼠標放在連接上時 a:active - 連接被點擊的那一刻
#menu ul li a{
<!– 去掉下劃線-->
text-decoration:none;
font-size:16px;
color:#FFF;
font-family:"微軟雅黑"
}
#menu ul li a:hover{
color:#F60;
}
接下來是本節課學習的代碼以下
創建一個blog.css
@charset "utf-8";
/* CSS Document */
#box{
background-color:#F00;
width:1024px;
height:1300px;
/*margin:0 auto;*/
margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放圖片，設置高度和圖片同樣高*/
#banner{
background-color:#66F;
height:209px;
}
#menu{
background-color:#C3F;
height:50px;
}
#main{
background-color:#6F0;
height:1000px;
}
#left{
background-color:#33C;
height:1000px;
width:250px;
float:left;/*可使div橫向排排坐*/
}
#right{
background-color:#F3F;
height:1000px;
width:774px;
float:right;/*可使div橫向排排坐*/
}
#footer{
background-color:#F63;
height:80px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css">
#txt{background-color:#F36 !important;width:800px;}
</style>
</head>
<!-- 註釋 -->
<body>
<div id="text" style="width:770px; background-color:#6F6; margin:0 auto;">
<h1>你好，秋天</h1>
<p>zhaoqi @ 2018-10-08</p>
<p>春天是一把琴，將優美琴聲帶給世人，叫他們脫去衣襖，從新奔跑在溫暖的大地中；夏天是一把扇，扇去炎熱，以熱情的臉龐去溫撫他人；冬天時一雪花，飄飄而來，爲人們帶來雪的姿態，可是秋天的葉則更令我喜歡。</p>
<p>秋天的葉是淒涼的飄飄灑灑的落葉如一隻蝴蝶，飛舞着，飄到大地母親的懷抱裏。</p>
<p>秋天的葉是一位化妝師，把世界渲染，把大地變成金黃色；秋天的葉，默 默無聞，春天夏天，樹葉的綠葉陪襯使鳥兒鶯歌燕舞，秋天的你，默默而去， 但你不傷心，由於你熟知"落紅不是無情物，化做春泥更護花。"</p>
<p>秋日的葉是富有詩意的，你好，秋天，你好！</p>
<p>瀏覽[1051]|評論[105]</p>
<p>注：文字摘自網絡</p>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#txt{
background-color:#C36 !important;
whdth:800px;
}
.myclass{
text-align:center;
color:#CCC;
font-family:楷體;
font-style:italic;
}
p{
color:#39C;
text-indent:2em;
line-height:35px;
}