我們繼續接著DIV+CSS實操系列：[DIV+CSS實操一：經管系網頁總體模塊布局](http://blog.csdn.net/erlian1992/article/details/49928091)，[DIV+CSS實操二：經管系網頁](http://blog.csdn.net/erlian1992/article/details/49945823)[添](http://blog.csdn.net/erlian1992/article/details/49945823)[加導航欄和友情鏈接欄](http://blog.csdn.net/erlian1992/article/details/49945823)和[DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊](http://blog.csdn.net/erlian1992/article/details/49966797)。今天我們就來給內容模塊添加內容，所有的內容都用超鏈接。
由于內容部分較多，我會分兩次添加，先來左半部分內容的添加：
HTML代碼：
~~~
<span style="font-size:18px;"><!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"><img src="images/n_icon001.gif" />常用服務</div>
<div id="news_left_top_content">
<ul>
<li><a href="#">唐山師范學院校歷查詢</a></li>
<li><a href="#">課程表查詢</a></li>
<li><a href="#">期末成績錄入與查詢</a></li>
<li><a href="#">論文檢索[CNKI，萬方，讀秀]</a></li>
<li><a href="#">畢業論文格式及相關表格</a></li>
<li><a href="#">常用下載</a></li>
<li><a href="#">電子資源</a></li>
</ul>
</div>
</div>
<div id="news_left_mid">
<div class="news_left_titlebar"><img src="images/n_icon001.gif" />站內導航</div>
<div id="news_left_mid_content">
<table>
<tr>
<td><a href="#">專業介紹</a></td>
<td><a href="#">新生向導</a></td>
</tr>
<tr>
<td><a href="#">教授風采</a></td>
<td><a href="#">學生社團</a></td>
</tr>
<tr>
<td><a href="#">課程建設</a></td>
<td><a href="#">學子風采</a></td>
</tr>
<tr>
<td><a href="#">實踐教學</a></td>
<td><a href="#">招聘信息</a></td>
</tr>
<tr>
<td><a href="#">實習動態</a></td>
<td><a href="#">求職指導</td>
</tr>
<tr>
<td><a href="#">學術活動</a></td>
<td><a href="#">就業精英</td>
</tr>
<tr>
<td><a href="#">科研成果</a></td>
<td><a href="#">考研專題</a></td>
</tr>
</table>
</div>
</div>
<div id="news_left_bottom">
<div class="news_left_titlebar"><img src="images/n_icon001.gif" />掃一掃</div>
<div id="news_left_bottom_content">
<a href="#"><img src="images/ewm.png" width="233" height="200" border="0" /></a>
<!--二維碼圖片-->
</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_mid_content"></div>
</div>
<div id="news_right_bottom">
<div class="news_right_titlebar">學生工作</div>
<div id="news_right_bottom_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 id="copyright_top"><a href="#">版權所有：</a></div>
<div id="copyright_bottom"><a href="#">所在地址：</a></div>
</div>
</body>
</html></span>
~~~
? ? ? ?CSS代碼：
~~~
<span style="font-size:18px;">/*第一次添加網頁總體布局的代碼*/
* {
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;
}
#news #news_left #news_left_mid {
height: 240px;
width: 233px;
}
#news #news_left #news_left_bottom {
height: 232px;
width: 233px;
}
#news #news_mid #news_mid_top {
height: 488px;
width: 455px;
}
#news #news_mid #news_mid_bottom {
height: 232px;
width: 455px;
}
#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;
}
/*第三次添加內容標題欄的代碼*/
img { /*消除圖片的默認格式*/
border:none;
}
.news_left_titlebar {
background-repeat: no-repeat;
height: 31px;
width: 233px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
background-color: #FFFFFF;
font-size: 14px;
line-height: 32px;
font-weight: bold;
color: #009966;
}
.news_left_titlebar img {/*設置圖片的格式*/
float: left;
height: 14px;
width: 14px;
margin-top: 9px;
margin-right:5px;
}
.news_mid_titlebar {
background-image: url(images/n_title_bg.gif);
background-repeat: repeat-x;
height: 32px;
width: 445px;
font-size: 14px;
line-height: 32px;
font-weight: bold;
color: #009966;
padding-left: 10px;
}
.news_right_titlebar {
background-image: url(images/n_title_bg.gif);
background-repeat: repeat-x;
height: 32px;
width: 290px;
font-size: 14px;
line-height: 32px;
font-weight: bold;
color: #009966;
padding-left: 10px;
}
#copyright #copyright_top {
height: 20px;
width: 998px;
text-align:center;
line-height:20px;
padding-top:20px;
}
#copyright #copyright_bottom {
height: 20px;
width: 998px;
text-align:center;
line-height:20px;
padding-bottom:20px;
}
/*第四次代碼左半部分內容的添加*/
#news #news_left #news_left_top #news_left_top_content {
height: 210px;
width: 233px;
overflow: hidden;
padding-top:3px;
padding-bottom:3px;
}
#news #news_left #news_left_top #news_left_top_content li {
float: left;
height: 30px;
width: 233px;
display:block;
}
#news #news_left #news_left_top #news_left_top_content a:link{
color:#999999;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:233px;
height:30px;
display:block;
text-align:left;
vertical-align:middle;
}
#news #news_left #news_left_top #news_left_top_content a:visited{
color:#999999;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:233px;
height:30px;
display:block;
text-align:left;
vertical-align:middle;
}
#news #news_left #news_left_top #news_left_top_content a:hover{
color:#FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
background-color: #009966;
width:233px;
height:30px;
display:block;
text-align:left;
vertical-align:middle;
}
#news #news_left #news_left_mid #news_left_mid_content {
height: 196px;
width: 200px;
overflow: hidden;
padding-top:6px;
padding-bottom:6px;
padding-left:13px;
padding-right:20px;
}
#news #news_left #news_left_mid #news_left_mid_content a:link{
color:#999999;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:100px;
height:28px;
display:block;
text-align:center;
vertical-align:middle;
}
#news #news_left #news_left_mid #news_left_mid_content a:visited{
color:#999999;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:100px;
height:28px;
display:block;
text-align:center;
vertical-align:middle;
}
#news #news_left #news_left_mid #news_left_mid_content a:hover{
color:#FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
background-color: #009966;
width:100px;
height:28px;
display:block;
text-align:center;
vertical-align:middle;
}</span>
~~~
運行的效果為：
點擊鏈接的效果：
- 前言
- 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中實現字符串和數組的相互轉化