繼續接著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)和[DIV+CSS實](http://blog.csdn.net/erlian1992/article/details/49977351)[操四：經管系網頁內容模塊內容添加(一)](http://blog.csdn.net/erlian1992/article/details/49977351)。我們還是添加內容版塊的內容，這一次是中間部分和右半部分。由于中間的圖片無縫滾動需要JS實現，我們后續加上。
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"><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 id="news_mid_top_content1">圖片動態無縫滾動需要JS實現，我們后續加上</div>
<div id="news_mid_top_content2">
<ul>
<li><img src="images/arrow.gif" /><a href="#" title="博弈思維與競爭策略 --北京外國語大學">博弈思維與競爭策略 --北京外國語大學</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經濟管理系“四進四信”主題團日活動">經濟管理系“四進四信”主題團日活動</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經濟管理系2015級專接本新生順利開學">經濟管理系2015級專接本新生順利開學</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經濟管理系與合作企業開展實習工作經驗交流">經濟管理系與合作企業開展實習工作經驗交流</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="榮盛集團舉辦“企業精英對話高校學子”高校巡講活動">榮盛集團舉辦“企業精英對話高校學子”高校巡講活動</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經濟管理系第七屆社工文化節開幕">經濟管理系第七屆社工文化節開幕</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="唐山師院經管系學生開展服務高考志愿者活動">唐山師院經管系學生開展服務高考志愿者活動</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="2011級2015屆社會工作專業考研光榮榜">2011級2015屆社會工作專業考研光榮榜</a></li>
</ul>
</div>
</div>
</div>
<div id="news_mid_bottom">
<div class="news_mid_titlebar">通知公告</div>
<div id="news_mid_bottom_content">
<ul>
<li><img src="images/arrow.gif" /><a href="#" title="經管系2016屆論文最新文件(試用于2012級本科)">經管系2016屆論文最新文件(試用于2012級本科)</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="2011級2015屆本科論文安排(修訂)">2011級2015屆本科論文安排(修訂)</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="我系生活部宿舍衛生檢查通報">我系生活部宿舍衛生檢查通報</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經管系2011級本科畢業論文教學工作安排">經管系2011級本科畢業論文教學工作安排</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經管系首問負責制">經管系首問負責制</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="2014暑假社會實踐先進個人">2014暑假社會實踐先進個人</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="社會工作專業歷屆考研人數統計(2011-2014)">社會工作專業歷屆考研人數統計(2011-2014)</a></li>
<li><img src="images/arrow.gif" /><a href="#" title="經濟管理系2013年度系務公開">經濟管理系2013年度系務公開</a></li>
</ul>
</div>
</div>
</div>
<div id="news_right">
<div id="news_right_top">
<div class="news_right_titlebar">招生就業</div>
<div id="news_right_top_content">
<ul>
<li><a href="#" title="2015年招生計劃">2015年招生計劃</a></li>
<li><a href="#" title="長城汽車招聘">長城汽車招聘</a></li>
<li><a href="#" title="河北港口集團">河北港口集團</a></li>
<li><a href="#" title="鏈家地產招聘會">鏈家地產招聘會</a></li>
<li><a href="#" title="北京瑞亞啟明教育簡章">北京瑞亞啟明教育簡章</a></li>
<li><a href="#" title="天津諾航佳運國際貨運代理有限公司">天津諾航佳運國際貨運代理有限公司</a></li>
<li><a href="#" title="春暖社工服務中心2015年4月急聘">春暖社工服務中心2015年4月急聘</a></li>
<li><a href="#" title="唐山君元科技有限責任公司招聘信息">唐山君元科技有限責任公司招聘信息</a></li>
<li><a href="#" title="國企招聘信息匯總">國企招聘信息匯總</a></li>
</ul>
</div>
</div>
<div id="news_right_mid">
<div class="news_right_titlebar">實習基地</div>
<div id="news_right_mid_content">
<div id="news_right_mid_content1">
<ul>
<li><a href="#" title="端正實習態度，明確實習目的">端正實習態度，明確實習目的</a></li>
<li><a href="#" title="我系10社工專業學生赴深圳畢業實習順利進行">我系10社工專業學生赴深圳畢業實習順利進行</a></li>
<li><a href="#" title="總結經驗 鞏固成果 扎實推進 實踐教學工作">總結經驗 鞏固成果 扎實推進 實踐教學工作</a></li>
<li><a href="#" title="11級物流專接本班上海全家實習總結">11級物流專接本班上海全家實習總結</a></li>
</ul>
</div>
</div>
</div>
<div id="news_right_bottom">
<div class="news_right_titlebar">學生工作</div>
<div id="news_right_bottom_content">
<ul>
<li><a href="#" title="唐山師院經管系學生開展服務高考志愿活動">唐山師院經管系學生開展服務高考志愿活動</a></li>
<li><a href="#" title="宿舍文化建設倡議">宿舍文化建設倡議</a></li>
<li><a href="#" title="熱烈祝賀經管系取得佳績">熱烈祝賀經管系取得佳績</a></li>
<li><a href="#" title="灰姑娘舞會">灰姑娘舞會</a></li>
<li><a href="#" title="經濟管理系舉行升旗儀式">經濟管理系舉行升旗儀式</a></li>
<li><a href="#" title="經管系考研交流大會">經管系考研交流大會</a></li>
<li><a href="#" title="書香浸潤校園-好書推薦活動開始了">書香浸潤校園-好書推薦活動開始了</a></li>
<li><a href="#" title="宿舍風采大賽">宿舍風采大賽</a></li>
</ul>
</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>
~~~
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;
}
#news #news_right #news_right_mid {
height: 240px;
width: 300px;
}
#news #news_right #news_right_bottom {
height: 232px;
width: 300px;
}
/*第二次添加導航欄和友情鏈接欄的代碼，下拉菜單我們后面做*/
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;
}
/*第四次代碼左半部分內容的添加*/
li {
list-style-type:none;
}
#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 li a:link{
color:#999999;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:233px;
height:30px;
display:block;
text-align:left;
line-height:30px;
vertical-align:middle;
}
#news #news_left #news_left_top #news_left_top_content li a:visited{
color:#999999;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
width:233px;
height:30px;
display:block;
text-align:left;
line-height:30px;
vertical-align:middle;
}
#news #news_left #news_left_top #news_left_top_content li a:hover{
color:#FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
font-weight: bold;
background-color: #009966;
width:233px;
height:30px;
display:block;
text-align:left;
line-height:30px;
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:27px;
display:block;
text-align:center;
line-height:27px;
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:27px;
display:block;
text-align:center;
line-height:27px;
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:27px;
display:block;
text-align:center;
line-height:27px;
vertical-align:middle;
}
/*第五次代碼中間內容一部分的添加*/
#news #news_mid #news_mid_top #news_mid_top_content #news_mid_top_content1 {
background-color:#CCCCCC;
height: 256px;
width: 455px;
}
#news #news_mid #news_mid_top #news_mid_top_content #news_mid_top_content2 {
height: 232px;
width: 455px;
}
#news #news_mid #news_mid_top #news_mid_top_content #news_mid_top_content2 li {
line-height: 24px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#news #news_mid #news_mid_top #news_mid_top_content #news_mid_top_content2 img {
float: left;
height: 16px;
width: 16px;
margin-top: 5px;
}
#news #news_mid #news_mid_bottom #news_mid_bottom_content li {
line-height: 24px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#news #news_mid #news_mid_bottom #news_mid_bottom_content img {
float: left;
height: 16px;
width: 16px;
margin-top: 5px;
}
/*第五次代碼右半部分內容的添加*/
#news #news_right #news_right_top #news_right_top_content li {
line-height: 23px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#news #news_right #news_right_mid #news_right_mid_content #news_right_mid_content1 {
height: 100px;
width: 300px;
margin-top: 54px;
margin-bottom: 54px;
}
#news #news_right #news_right_mid #news_right_mid_content li {
line-height: 24px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#news #news_right #news_right_bottom #news_right_bottom_content li {
line-height: 24px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}</span>
~~~
運行的效果為：
點擊鏈接的效果是出現和鏈接文字一樣的title提示，這是HTML超鏈接標簽的title屬性實現的。我截圖時并沒有顯
示出右下側的鏈接文字。這是截圖的原因，只要加上了title屬性就可實現！！！
- 前言
- 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中實現字符串和數組的相互轉化