接著[DIV+CSS實操一：經管系網頁總體模塊布局](http://blog.csdn.net/erlian1992/article/details/49928091)這篇博客繼續，實現添加導航欄和友情鏈接欄，導航欄的下
拉菜單我們后續會加上。
先來HTML代碼：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>經管系</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<!--經管系Logo板塊-->
<div id="top">Dreamweaver8</div>
<!--經管系網頁導航欄板塊-->
<div id="nav">
<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>
<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>
<!--經管系網頁風采展示廣告板塊-->
<div id="adpic"></div>
<!--經管系內容板塊-->
<div id="news">
<div id="news_left">
<div id="news_left_top">
<div class="news_left_titlebar"></div>
<div id="news_left_top_content"></div>
</div>
<div id="news_left_mid">
<div class="news_left_titlebar"></div>
<div id="news_left_top_content"></div>
</div>
<div id="news_left_bottom">
<div class="news_left_titlebar"></div>
<div id="news_left_top_content"></div>
</div>
</div>
<div id="news_mid">
<div id="news_mid_top">
<div class="news_mid_titlebar"></div>
<div id="news_mid_top_content"></div>
</div>
<div id="news_mid_bottom">
<div class="news_mid_titlebar">/div>
<div id="news_mid_bottom_content"></div>
</div>
</div>
<div id="news_right">
<div id="news_right_top">
<div class="news_right_titlebar"></div>
<div id="news_right_top_content"></div>
</div>
<div id="news_right_mid">
<div class="news_right_titlebar"></div>
<div id="news_right_top_content"></div>
</div>
<div id="news_right_bottom">
<div class="news_right_titlebar"></div>
<div id="news_right_top_content"></div>
</div>
</div>
</div>
<!--經管系網站友情鏈接板塊-->
<div id="link">
<div id="link_left">友情鏈接：</div>
<div id="link_right">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><!--表格-->
<tr align="center" valign="middle">
<td><a href="#">教學資源網</a></td>
<td>|</td>
<td><a href="#">中國大學</a></td>
<td>|</td>
<td><a href="#">教育部</a></td>
<td>|</td>
<td><a href="#">河北省教育廳</a></td>
<td>|</td>
<td><a href="#">中國教育科研網</a></td>
<td>|</td>
<td><a href="#">教育網河北主節點</a></td>
<td>|</td>
<td><a href="#">慕課網</a></td>
<td>|</td>
<td><a href="#">愛課程</a></td>
<td>|</td>
<td><a href="#">南方周末</a></td>
<td>|</td>
<td><a href="#">經濟觀察</a></td>
<td>|</td>
<td><a href="#">中國企業家</a></td>
</tr>
</table>
</div>
</div>
<!--經管系網站制作信息板塊-->
<div id="copyright"></div>
</body>
</html>
~~~
再來CSS代碼：
~~~
/*第一次添加網頁總體布局的代碼*/
* {
margin:0px;
padding:0px;
}
body {
padding:0px;
margin:0px;
font-size:12px;
}
#top {
background-image: url(images/head.jpg);
background-repeat: no-repeat;
height: 120px;
width: 998px;
margin-right: auto;
margin-left: auto;
}
#nav {
background-image: url(images/n_nav_bg.gif);
background-repeat: repeat-x;
height: 37px;
width: 998px;
margin-right: auto;
margin-left: auto;
}
#adpic {
background-image: url(images/h4.jpg);
background-repeat: no-repeat;
height: 218px;
width: 998px;
margin-right: auto;
margin-left: auto;
}
#news {
height: 720px;
width: 998px;
margin-right: auto;
margin-left: auto;
}
#link {
background-image: url(images/n_title_bg.gif);
background-repeat: repeat-x;
height: 40px;
width: 998px;
margin-right: auto;
margin-left: auto;
}
#copyright {
background-color: #E2E2E2;
height: 80px;
width: 998px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
border-top-width: 5px;/*設置5像素的上邊框*/
border-top-style: solid;
border-top-color: #006042;
margin-bottom: 0px;
}
#news #news_left {
float: left;
height: 720px;
width: 233px;
margin-right: 5px;
}
#news #news_mid {
float: left;
height: 720px;
width: 455px;
margin-right: 5px;
}
#news #news_right {
height: 720px;
width: 300px;
float: left;
}
#news #news_left #news_left_top {
height: 248px;
width: 233px;
background-color:#FF0000;
}
#news #news_left #news_left_mid {
height: 240px;
width: 233px;
background-color:#00FF00;
}
#news #news_left #news_left_bottom {
height: 232px;
width: 233px;
}
#news #news_mid #news_mid_top {
height: 488px;
width: 455px;
background-color:#000000;
}
#news #news_mid #news_mid_bottom {
height: 232px;
width: 455px;
background-color:#999999;
}
#news #news_right #news_right_top {
height: 248px;
width: 300px;
background-color:#FFFF00;
}
#news #news_right #news_right_mid {
height: 240px;
width: 300px;
background-color:#00FFFF;
}
#news #news_right #news_right_bottom {
height: 232px;
width: 300px;
background-color:#FF00FF;
}
/*第二次添加導航欄和友情鏈接欄的代碼，下拉菜單我們后面做*/
a:link { /*偽類選擇頁面中全部的超鏈接標簽的未訪問的鏈接狀態*/
color:#000000;
text-decoration:none;
}
a:visited { /*偽類選擇頁面中全部的超鏈接標簽的已訪問的鏈接狀態*/
color:#000000;
text-decoration:none;
}
a:hover{ /*偽類選擇頁面中全部的超鏈接標簽的鼠標懸停的狀態*/
color:#FF0000;
text-decoration:none;
font-weight: bold;
}
#nav li {/*后代選擇器選擇div中行內元素li的設置*/
float: left;
line-height: 37px;
list-style-type:none;
text-align:center;
}
#link #link_left {
font-family: "微軟雅黑";
font-size: 14px;
line-height: 32px;
font-weight: bold;
color: #009966;
float: left;
height: 32px;
width: 80px;
padding-left: 10px;
}
#link #link_right {
line-height: 32px;
float: left;
height: 32px;
width: 908px;
}
#nav a:link{/*后代選擇器選擇div中行內選擇a設置未訪問的鏈接狀態*/
color:#FFFFFF;
text-decoration:none;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:89px;
height:37px;
display:block;
}
#nav a:visited{/*后代選擇器選擇div中行內選擇a設置已訪問的鏈接狀態*/
color:#FFFFFF;
text-decoration:none;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:89px;
height:37px;
display:block;
}
#nav a:hover{/*后代選擇器選擇div中行內選擇a設置鼠標懸浮在鏈接的的狀態*/
color:#FFFFFF;
text-decoration:none;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
background-color: #009966;
width:89px;
height:37px;
display:block;
}
~~~
瀏覽器運行的結果為：
導航欄：
點擊導航欄效果：
未點擊的友情鏈接欄：
鼠標懸浮在鏈接上的友情鏈接欄：
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化