当前位置：Gxlcms > html代码 > DIV+CSS实操四：经管系网页内容模块内容添加(上)_html/css_WEB-ITnose

DIV+CSS实操四：经管系网页内容模块内容添加(上)_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：12人阅读

我们继续接着DIV+CSS实操系列：DIV+CSS实操一：经管系网页总体模块布局，DIV+CSS实操二：经管系网页

添加导航栏和友情链接栏和DIV+CSS实操三：经管系网页内容模块添加标题栏和版权信息模块。今天我们就来给内容

模块添加内容，所有的内容都用超链接。

由于内容部分较多，我会分两次添加，先来左半部分内容的添加：

HTML代码：

  1. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>经管系</title><!--经管系Logo板块--><div id="top">Dreamweaver8</div><!--经管系网页导航栏板块--><div id="nav">    <ul><!--无序列表-->
  2. <li>本站首页</li>
  3. <li>本系概况</li>
  4. <li>教育教学</li>
  5. <li>科学研究</li>
  6. <li>招生就业</li>
  7. <li>学生工作</li>
  8. <li>党团建设</li>
  9. <li>考研升本</li>
  10. <li>实习基地</li>
  11. <li>经管动态</li>
  12. <li>通知公告</li>
  13. </ul></div><!--经管系网页风采展示广告板块--><div id="adpic"></div><!--经管系内容板块--><div id="news">    <div id="news_left">
  14.     <div id="news_left_top">
  15.     <div class="news_left_titlebar"><img src="https://www.gxlcms.com/images/n_icon001.gif">常用服务</div>
  16.     <div id="news_left_top_content">
  17.      <ul>
  18.       <li>唐山师范学院校历查询</li>
  19.       <li>课程表查询</li>
  20.       <li>期末成绩录入与查询</li>
  21.       <li>论文检索[CNKI，万方，读秀]</li>
  22.       <li>毕业论文格式及相关表格</li>
  23.       <li>常用下载</li>
  24.       <li>电子资源</li>
  25.     </ul>
  26. </div>
  27. </div>
  28. <div id="news_left_mid">
  29.     <div class="news_left_titlebar"><img src="https://www.gxlcms.com/images/n_icon001.gif">站内导航</div>
  30. <div id="news_left_mid_content">
  31.     <table>
  32.            <tbody><tr>
  33.        <td>专业介绍</td>
  34.        <td>新生向导</td>
  35.    </tr>
  36.    <tr>
  37.        <td>教授风采</td>
  38.        <td>学生社团</td>
  39.    </tr>
  40.    <tr>
  41.        <td>课程建设</td>
  42.        <td>学子风采</td>
  43.    </tr>
  44.    <tr>
  45.        <td>实践教学</td>
  46.        <td>招聘信息</td>
  47.    </tr>
  48.    <tr>
  49.        <td>实习动态</td>
  50.        <td>求职指导</td>
  51.    </tr>
  52.    <tr>
  53.        <td>学术活动</td>
  54.        <td>就业精英</td>
  55.    </tr>
  56.    <tr>
  57.        <td>科研成果</td>
  58.        <td>考研专题</td>
  59.    </tr>
  60. </tbody></table>
  61. </div>
  62. </div>
  63. <div id="news_left_bottom">
  64.     <div class="news_left_titlebar"><img src="https://www.gxlcms.com/images/n_icon001.gif">扫一扫</div>
  65.     <div id="news_left_bottom_content">
  66.     <img src="https://www.gxlcms.com/images/ewm.png" width="233" height="200" border="0"> <!--二维码图片-->
  67.     </div>
  68. </div>
  69. </div>    <div id="news_mid">
  70.     <div id="news_mid_top">
  71.     <div class="news_mid_titlebar">经管动态</div>
  72.     <div id="news_mid_top_content"></div>
  73. </div>
  74. <div id="news_mid_bottom">
  75.     <div class="news_mid_titlebar">通知公告</div>
  76.     <div id="news_mid_bottom_content"></div>
  77. </div>
  78. </div>
  79. <div id="news_right">
  80.     <div id="news_right_top">
  81.     <div class="news_right_titlebar">招生就业</div>
  82.     <div id="news_right_top_content"></div>
  83. </div>
  84. <div id="news_right_mid">
  85.     <div class="news_right_titlebar">实习基地</div>
  86.     <div id="news_right_mid_content"></div>
  87. </div>
  88. <div id="news_right_bottom">
  89.      <div class="news_right_titlebar">学生工作</div>
  90.     <div id="news_right_bottom_content"></div>
  91. </div>
  92. </div></div><!--经管系网站友情链接板块--><div id="link">    <div id="link_left">友情链接：</div>
  93. <div id="link_right">
  94. <table width="100%" border="0" cellspacing="0" cellpadding="0"><!--表格-->
  95.       <tbody><tr align="center" valign="middle">
  96.       <td>教学资源网</td>
  97.       <td>|</td>
  98.       <td>中国大学</td>
  99.       <td>|</td>
  100.       <td>教育部</td>
  101.       <td>|</td>
  102.       <td>河北省教育厅</td>
  103.       <td>|</td>
  104.       <td>中国教育科研网</td>
  105.       <td>|</td>
  106.       <td>教育网河北主节点</td>
  107.       <td>|</td>
  108.       <td>慕课网</td>
  109.       <td>|</td>
  110.       <td>爱课程</td>
  111.       <td>|</td>
  112.       <td>南方周末</td>
  113.       <td>|</td>
  114.       <td>经济观察</td>
  115.       <td>|</td>
  116.       <td>中国企业家</td>
  117.        </tr>
  118.     </tbody></table>
  119. </div></div><!--经管系网站制作版权信息板块--><div id="copyright">    <div id="copyright_top">版权所有：</div>    <div id="copyright_bottom">所在地址：</div></div>
CSS代码： 

  1. /*第一次添加网页总体布局的代码*/* {    margin:0px; 
  2. padding:0px;}body {    padding:0px; 
  3. margin:0px; 
  4. font-size:12px;}#top {
  5. background-image: url(images/head.jpg);
  6. background-repeat: no-repeat;
  7. height: 120px;
  8. width: 998px;
  9. margin-right: auto;
  10. margin-left: auto;}#nav {
  11. background-image: url(images/n_nav_bg.gif);
  12. background-repeat: repeat-x;
  13. height: 37px;
  14. width: 998px;
  15. margin-right: auto;
  16. margin-left: auto;}#adpic {
  17. background-image: url(images/h4.jpg);
  18. background-repeat: no-repeat;
  19. height: 218px;
  20. width: 998px;
  21. margin-right: auto;
  22. margin-left: auto;}#news {
  23. height: 720px;
  24. width: 998px;
  25. margin-right: auto;
  26. margin-left: auto;}#link {
  27. background-image: url(images/n_title_bg.gif);
  28. background-repeat: repeat-x;
  29. height: 40px;
  30. width: 998px;
  31. margin-right: auto;
  32. margin-left: auto;}#copyright {
  33. background-color: #E2E2E2;
  34. height: 80px;
  35. width: 998px;
  36. margin-top: 0px;
  37. margin-right: auto;
  38. margin-left: auto;
  39. border-top-width: 5px;/*设置5像素的上边框*/
  40. border-top-style: solid;
  41. border-top-color: #006042;
  42. margin-bottom: 0px;}#news #news_left {
  43. float: left;
  44. height: 720px;
  45. width: 233px;
  46. margin-right: 5px;}#news #news_mid {
  47. float: left;
  48. height: 720px;
  49. width: 455px;
  50. margin-right: 5px;}#news #news_right {
  51. height: 720px;
  52. width: 300px;
  53. float: left;}#news #news_left #news_left_top {
  54. height: 248px;
  55. width: 233px;}#news #news_left #news_left_mid {
  56. height: 240px;
  57. width: 233px;}#news #news_left #news_left_bottom {
  58. height: 232px;
  59. width: 233px;}#news #news_mid #news_mid_top {
  60. height: 488px;
  61. width: 455px;}#news #news_mid #news_mid_bottom {
  62. height: 232px;
  63. width: 455px;}#news #news_right #news_right_top {
  64. height: 248px;
  65. width: 300px;
  66. background-color:#FFFF00;}#news #news_right #news_right_mid {
  67. height: 240px;
  68. width: 300px;
  69. background-color:#00FFFF;}#news #news_right #news_right_bottom {
  70. height: 232px;
  71. width: 300px;
  72. background-color:#FF00FF;}/*第二次添加导航栏和友情链接栏的代码，下拉菜单我们后面做*/a:link { /*伪类选择页面中全部的超链接标签的未访问的链接状态*/    color:#000000; 
  73. text-decoration:none;}a:visited { /*伪类选择页面中全部的超链接标签的已访问的链接状态*/    color:#000000; 
  74. text-decoration:none;}a:hover{ /*伪类选择页面中全部的超链接标签的鼠标悬停的状态*/
  75. color:#FF0000;
  76. text-decoration:none;
  77. font-weight: bold;
  78. }#nav li {/*后代选择器选择div中行内元素li的设置*/
  79. float: left;
  80. line-height: 37px;
  81. list-style-type:none;
  82. text-align:center;
  83. }#link #link_left {
  84. font-family: "微软雅黑";
  85. font-size: 14px;
  86. line-height: 32px;
  87. font-weight: bold;
  88. color: #009966;
  89. float: left;
  90. height: 32px;
  91. width: 80px;
  92. padding-left: 10px;}#link #link_right {
  93. line-height: 32px;
  94. float: left;
  95. height: 32px;
  96. width: 908px;}#nav a:link{/*后代选择器选择div中行内选择a设置未访问的链接状态*/
  97. color:#FFFFFF;
  98. text-decoration:none;
  99. font-family: "微软雅黑";
  100. font-size: 14px;
  101. font-weight: bold;
  102. width:89px;
  103. height:37px;
  104. display:block;}#nav a:visited{/*后代选择器选择div中行内选择a设置已访问的链接状态*/
  105. color:#FFFFFF;
  106. text-decoration:none;
  107. font-family: "微软雅黑";
  108. font-size: 14px;
  109. font-weight: bold;
  110. width:89px;
  111. height:37px;
  112. display:block;}#nav a:hover{/*后代选择器选择div中行内选择a设置鼠标悬浮在链接的的状态*/
  113. color:#FFFFFF;
  114. text-decoration:none;
  115. font-family: "微软雅黑";
  116. font-size: 14px;
  117. font-weight: bold;
  118. background-color: #009966;
  119. width:89px;
  120. height:37px;
  121. display:block;}/*第三次添加内容标题栏的代码*/img { /*消除图片的默认格式*/    border:none;}.news_left_titlebar {
  122. background-repeat: no-repeat;
  123. height: 31px;
  124. width: 233px;
  125. border-bottom-width: 1px;
  126. border-bottom-style: dashed;
  127. border-bottom-color: #CCCCCC;
  128. background-color: #FFFFFF;
  129. font-size: 14px;
  130. line-height: 32px;
  131. font-weight: bold;
  132. color: #009966;}.news_left_titlebar img {/*设置图片的格式*/
  133. float: left;
  134. height: 14px;
  135. width: 14px;
  136. margin-top: 9px;
  137. margin-right:5px;}.news_mid_titlebar {
  138. background-image: url(images/n_title_bg.gif);
  139. background-repeat: repeat-x;
  140. height: 32px;
  141. width: 445px;
  142. font-size: 14px;
  143. line-height: 32px;
  144. font-weight: bold;
  145. color: #009966;
  146. padding-left: 10px;}.news_right_titlebar {
  147. background-image: url(images/n_title_bg.gif);
  148. background-repeat: repeat-x;
  149. height: 32px;
  150. width: 290px;
  151. font-size: 14px;
  152. line-height: 32px;
  153. font-weight: bold;
  154. color: #009966;
  155. padding-left: 10px;}#copyright #copyright_top {
  156. height: 20px;
  157. width: 998px;
  158. text-align:center;
  159. line-height:20px;
  160. padding-top:20px;}#copyright #copyright_bottom {
  161. height: 20px;
  162. width: 998px;
  163. text-align:center;
  164. line-height:20px;
  165. padding-bottom:20px;}/*第四次代码左半部分内容的添加*/#news #news_left #news_left_top #news_left_top_content {
  166. height: 210px;
  167. width: 233px;
  168. overflow: hidden;
  169. padding-top:3px;
  170. padding-bottom:3px;}#news #news_left #news_left_top #news_left_top_content li {
  171. float: left;
  172. height: 30px;
  173. width: 233px;        display:block;}#news #news_left #news_left_top #news_left_top_content a:link{
  174. color:#999999;
  175. font-family: "微软雅黑";
  176. font-size: 14px;
  177. font-weight: bold;
  178. width:233px;
  179. height:30px;
  180. display:block;        text-align:left;
  181. vertical-align:middle;}#news #news_left #news_left_top #news_left_top_content a:visited{
  182. color:#999999;
  183. font-family: "微软雅黑";
  184. font-size: 14px;
  185. font-weight: bold;
  186. width:233px;
  187. height:30px;
  188. display:block;        text-align:left;
  189. vertical-align:middle;}#news #news_left #news_left_top #news_left_top_content a:hover{
  190. color:#FFFFFF;
  191. font-family: "微软雅黑";
  192. font-size: 14px;
  193. font-weight: bold;
  194. background-color: #009966;
  195. width:233px;
  196. height:30px;
  197. display:block;        text-align:left;
  198. vertical-align:middle;}#news #news_left #news_left_mid #news_left_mid_content {
  199. height: 196px;
  200. width: 200px;
  201. overflow: hidden;
  202. padding-top:6px;
  203. padding-bottom:6px;
  204. padding-left:13px;
  205. padding-right:20px;}#news #news_left #news_left_mid #news_left_mid_content a:link{
  206. color:#999999;
  207. font-family: "微软雅黑";
  208. font-size: 14px;
  209. font-weight: bold;
  210. width:100px;
  211. height:28px;
  212. display:block;
  213. text-align:center;
  214. vertical-align:middle;}#news #news_left #news_left_mid #news_left_mid_content a:visited{
  215. color:#999999;
  216. font-family: "微软雅黑";
  217. font-size: 14px;
  218. font-weight: bold;
  219. width:100px;
  220. height:28px;
  221. display:block;
  222. text-align:center;
  223. vertical-align:middle;}#news #news_left #news_left_mid #news_left_mid_content a:hover{
  224. color:#FFFFFF;
  225. font-family: "微软雅黑";
  226. font-size: 14px;
  227. font-weight: bold;
  228. background-color: #009966;
  229. width:100px;
  230. height:28px;
  231. display:block;
  232. text-align:center;
  233. vertical-align:middle;}
运行的效果为：


点击链接的效果：

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！