用HTML+CSS編寫一個計科院網站首頁的靜態網頁
學號：201631062509
姓名：楊菓
1.觀察計科院主頁
網站所有圖片可以從開發者工具中審查詢到。
計科院靜態網站並沒有佔滿整個網頁，而是在中間，所以左右邊界也是很重要的設定。
2.原始碼
HTML原始碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no"> 6 <title>西南石油大學計科院</title> 7 <link rel="icon" href="favicon.ico"> 8 <link rel="stylesheet" href="css/index.css" type="text/css"> 9 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> 10 11 <link href="css/style.css" rel="stylesheet" type="text/css" /> 12 <script type="text/javascript" src="js/jquery.min.js"></script> 13 <script type="text/javascript" src="js/nav.js"></script> 14 <script type="text/javascript" src="js/bootstrap.min.js"></script> 15 <style> 16 17 #box{ 18 margin-left:430px; 19 margin-right:430px; 20 } 21 22 23 </style> 24 </head> 25 <body> 26 <div id="box"> 27 28 <div class="container-fluid"> 29 <div class="row-fluid"> 30 <div class="span12"> 31 32 <div id="title"> 33 <form class="form-search form-inline"> 34 <input class="input-medium search-query" type="text" /> <button type="submit" class="btn">查詢</button> 35 </form> 36 </div> 37 38 39 <div id="top_bg"> 40 <div class="top"> 41 <!--導航開始--> 42 <div class="nav_z"> 43 <ul id="navul" class="cl"> 44 <li> 45 <a href="#">網站首頁</a> 46 47 </li> 48 <li> 49 <a href="#">學院概況</a> 50 <ul> 51 <li><a href="xygk/xyjj.htm">學院簡介</a></li> 52 <li><a href="xygk/xyld.htm">學院領導</a></li> 53 <li><a href="xygk/zzjg.htm">組織機構</a></li> 54 </ul> 55 </li> 56 <li> 57 <a href="#">本科生教育</a> 58 <ul> 59 <li><a href="bksjy/jsjkxyjszy.htm">電腦科學與技術專業</a></li> 60 <li><a href="bksjy/rjgczy.htm">軟體工程專業</a></li> 61 <li><a href="bksjy/wlgczy.htm">網路工程專業</a></li> 62 <li><a href="bksjy/wlwgczy.htm">物聯網工程專業</a></li> 63 <li><a href="bksjy/xxglyxxxtzy.htm">資訊管理與資訊系統專業</a></li> 64 <li><a href="bksjy/wlkjaqzy.htm">網路空間安全專業</a></li> 65 <li><a href="bksjy/sjkxydsjjszy.htm">資料科學與大資料技術專業</a></li> 66 <li><a href="bksjy/dwrchzpyxm.htm">對外人才合作培養專案</a></li> 67 <li><a href="bksjy/ksxx.htm">考試資訊</a></li> 68 <li><a href="bksjy/xkzxxx.htm">選課重修資訊</a></li> 69 <li><a href="bksjy/tzgg.htm">通知公告</a></li> 70 <li><a href="bksjy/zlxz.htm">資料下載</a></li> 71 <li><a href="bksjy/gxkjssp.htm">公選課教師視訊</a></li> 72 </ul> 73 </li> 74 <li> 75 <a href="#">研究生教育</a> 76 <ul> 77 <li><a href="yjsjy/zsjz.htm">招生簡章</a></li> 78 <li><a href="yjsjy/jsjkxyjsyjxk.htm">電腦科學與技術一級學科</a></li> 79 <li><a href="yjsjy/rjgcyjxk.htm">軟體工程一級學科</a></li> 80 <li><a href="yjsjy/wlkjaqyjxk.htm">網路空間安全一級學科</a></li> 81 <li><a href="yjsjy/yjsds.htm">研究生導師</a></li> 82 <li><a href="yjsjy/yjsjztx.htm">研究生獎助體系</a></li> 83 <li><a href="yjsjy/tzgg.htm">通知公告</a></li> 84 <li><a href="yjsjy/zlxz.htm">資料下載</a></li> 85 </ul> 86 </li> 87 <li> 88 <a href="#">師資隊伍</a> 89 <ul> 90 <li><a href="szdw/js.htm">教授</a></li> 91 <li><a href="szdw/fjs.htm">副教授</a></li> 92 <li><a href="szdw/js1.htm">講師</a></li> 93 <li><a href="szdw/syry.htm">實驗人員</a></li> 94 </ul> 95 </li> 96 <li> 97 <a href="#">科學研究</a> 98 <ul> 99 <li><a href="kxyj/kytd.htm">科研團隊</a></li> 100 <li><a href="kxyj/kypt.htm">科研平臺</a></li> 101 <li><a href="kxyj/kycg.htm">科研成果</a></li> 102 </ul> 103 </li> 104 <li> 105 <a href="#">學生工作</a> 106 <ul> 107 <li><a href="xsgz/gzdt.htm">工作動態</a></li> 108 <li><a href="xsgz/tzgg.htm">通知公告</a></li> 109 <li><a href="xsgz/kwcxsj.htm">課外創新實踐</a></li> 110 <li><a href="xsgz/bysjy.htm">畢業生就業</a></li> 111 <li><a href="xsgz/xlzc.htm">心靈之窗</a></li> 112 <li><a href="xsgz/qcfc.htm">青春風采</a></li> 113 <li><a href="xsgz/zlxz.htm">資料下載</a></li> 114 </ul> 115 </li> 116 <li> 117 <a href="#">招生工作</a> 118 <ul> 119 <li><a href="zsgz/xyjs.htm">學院介紹</a></li> 120 <li><a href="zsgz/bysjyqx.htm">畢業生就業去向</a></li> 121 <li><a href="zsgz/yxbysjj.htm">優秀畢業生簡介</a></li> 122 <li><a href="zsgz/xshj.htm">學生獲獎</a></li> 123 <li><a href="zsgz/jyxyjs.htm">精英校友介紹</a></li> 124 <li><a href="zsgz/zsgzxcbd.htm">招生工作宣傳報導</a></li> 125 </ul> 126 </li> 127 <li> 128 <a href="#">實驗中心</a> 129 <ul> 130 <li><a href="syzx/zxjj.htm">中心簡介</a></li> 131 <li><a href="syzx/syfs.htm">實驗分室</a></li> 132 <li><a href="syzx/gzzd.htm">規章制度</a></li> 133 <li><a href="syzx/zlxz.htm">資料下載</a></li> 134 <li><a href="http://syskf.swpu.edu.cn">開放預約</a></li> 135 </ul> 136 </li> 137 <li> 138 <a href="#">黨建之窗</a> 139 <ul> 140 <li><a href="djzc/djdt.htm">黨建動態</a></li> 141 <li><a href="djzc/xxyd.htm">學習園地</a></li> 142 <li><a href="djzc/dwzwgk.htm">黨務政務公開</a></li> 143 <li><a href="djzc/zlxz.htm">資料下載</a></li> 144 </ul> 145 </li> 146 <!--可在此處直接新增導航--> 147 </ul> 148 </div><!--導航結束--> 149 </div><!--導航結束--> 150 </div><!--導航結束--> 151 <div class="carousel slide" id="carousel-915504"> 152 <ol class="carousel-indicators"> 153 <li class="active" data-slide-to="0" data-target="#carousel-915504"> 154 </li> 155 <li data-slide-to="1" data-target="#carousel-915504"> 156 </li> 157 158 </ol> 159 <div class="carousel-inner"> 160 <div class="item active"> 161 <img alt="" src="img/h1.jpg" /> 162 163 </div> 164 <div class="item"> 165 <img alt="" src="img/h2.jpg" /> 166 167 </div> 168 169 </div> <a data-slide="prev" href="#carousel-915504" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-915504" class="right carousel-control">›</a> 170 </div> 171 <div class="row-fluid"> 172 <div class="span8"> 173 174 175 <div id="gonav"> 176 177 <h2>圖片新聞</h2> 178 <span > 179 <a> 180 More>> 181 </a> 182 </span> 183 </div> 184 185 <div class="row-fluid"> 186 <div class="span6"> 187 <div class="carousel slide" id="carousel-589608"> 188 189 <div class="carousel-inner"> 190 <div class="item active"> 191 <img alt="" src="img/a.jpg" /> 192 <div class="carousel-caption"> 193 194 <p> 195 計科院2017-2018年度先進班級評比展示活動圓滿落幕 196 </p> 197 </div> 198 </div> 199 <div class="item"> 200 <img alt="" src="img/b.jpg" /> 201 <div class="carousel-caption"> 202 203 <p> 204 計科院第6屆物聯網創意大賽圓滿落幕 205 </p> 206 </div> 207 </div> 208 <div class="item"> 209 <img alt="" src="img/c.jpg" /> 210 <div class="carousel-caption"> 211 212 <p> 213 樑宗文老師獲得“2018年度四川省優秀物聯網教師”... 214 </p> 215 </div> 216 </div> 217 <div class="item"> 218 <img alt="" src="img/d.jpg" /> 219 <div class="carousel-caption"> 220 221 <p> 222 “傳遞愛心，西柚啟航”--科院“走進敬老院”活動... 223 </p> 224 </div> 225 </div> 226 <div class="item"> 227 <img alt="" src="img/e.jpg" /> 228 <div class="carousel-caption"> 229 230 <p> 231 >電腦科學學院隆重舉行第八屆“盛特杯”大學生課... 232 </p> 233 </div> 234 </div> 235 <div class="item"> 236 <img alt="" src="img/f.jpg" /> 237 <div class="carousel-caption"> 238 239 <p> 240 電腦科學學院隆重舉行第八屆“盛特杯”大學生課... 241 </p> 242 </div> 243 </div> 244 </div> 245 <ol class="carousel-indicators"> 246 <li class="active" data-slide-to="0" data-target="#carousel-589608"> 247 </li> 248 <li data-slide-to="1" data-target="#carousel-589608"> 249 </li> 250 <li data-slide-to="2" data-target="#carousel-589608"> 251 </li> 252 <li data-slide-to="3" data-target="#carousel-589608"> 253 </li> 254 <li data-slide-to="4" data-target="#carousel-589608"> 255 </li> 256 <li data-slide-to="5" data-target="#carousel-589608"> 257 </li> 258 </ol> 259 260 </div> 261 </div> 262 <div class="span6"> 263 <ul id="ull"> 264 <li><a href="info/1045/4613.htm" title="電腦科學學院舉辦2019年寒假留校學生新春團拜會">電腦科學學院舉辦2019年寒假留校學生新春</a></li> 265 266 <li><a href="info/1045/4643.htm" title="計科院工會組織學院女教職工慶祝第109個“三八婦女節”">計科院工會組織學院女教職工慶祝第109個“</a></li> 267 268 <li><a href="info/1045/4633.htm" title="學術講座——人工智慧改變我們的未來生活">學術講座——人工智慧改變我們的未來生活</a></li> 269 270 <li><a href="info/1045/4603.htm" title="電腦科學學院各年級輔導員集中走訪學生寢室">電腦科學學院各年級輔導員集中走訪學生寢</a></li> 271 272 <li><a href="info/1045/4592.htm" title="學院召開2018年度領導班子民主生活會">學院召開2018年度領導班子民主生活會</a></li> 273 274 <li><a href="info/1045/4589.htm" title="計科院與川慶安檢院技術交流大會">計科院與川慶安檢院技術交流大會</a></li> 275 </ul> 276 </div> 277 </div> 278 </div> 279 <div class="span4"> 280 <div id="gonav"> 281 282 <h2>學術交流</h2> 283 <span > 284 <a> 285 More>> 286 </a> 287 </span> 288 </div> 289 290 <div class="row-fluid"> 291 <div class="span12"> 292 <ul id="ull"> 293 <li> <a href="info/1076/4624.htm" title="人工智慧改變我們的未來生活">人工智慧改變我們的未來生活</a></li> 294 <li> <a href="info/1076/4537.htm" title="計算時代的虛假資訊傳播">計算時代的虛假資訊傳播</a></li> 295 <li> <a href="info/1076/4483.htm" title="人工智慧+：視界充滿AI">人工智慧+：視界充滿AI</a></li> 296 <li> <a href="info/1076/4397.htm" title="零行列式策略及其網路演化動力學">零行列式策略及其網路演化動力學</a></li> 297 <li> <a href="info/1076/4388.htm" title="視訊遇上雲服務">視訊遇上雲服務</a></li> 298 <li> <a href="info/1076/4380.htm" title="計科院關於舉行2018年校慶論文報告會的通知">計科院關於舉行2018年校慶論文報告會的...</a></li> 299 </ul> 300 </div> 301 </div> 302 </div> 303 </div> 304 <div class="row-fluid"> 305 <div class="span8"> 306 <div id="gonav"> 307 308 <h2>新聞速遞</h2> 309 <span > 310 <a> 311 More>> 312 </a> 313 </span> 314 </div> 315 <div class="row-fluid"> 316 <div id="span12"> 317 318 <h3><a href="info/1045/4613.htm">電腦科學學院舉辦2019年寒假留校學生新春團拜會</a></h3> 319 <p>​在中華民族傳統節日——春節即將到來之際，為讓學院留校學生感受家的溫暖，向他們傳達學院的慰問和祝福。2019年2月1日上午9時30分，電腦科學學院在明理樓B306會議室隆重舉行2019年寒假留…[<span><a href="info/1045/4613.htm">詳細資訊</a></span>]</p> 320 321 <ul id="ull"> 322 <li><a href="info/1045/4643.htm">計科院工會組織學院女教職工慶祝第109個“三八婦女節”</a></li> 323 <li><a href="info/1045/4633.htm">學術講座——人工智慧改變我們的未來生活</a></li> 324 <li><a href="info/1045/4603.htm">電腦科學學院各年級輔導員集中走訪學生寢室</a></li> 325 <li><a href="info/1045/4592.htm">學院召開2018年度領導班子民主生活會</a></li> 326 <li><a href="info/1045/4589.htm">計科院與川慶安檢院技術交流大會</a></li> 327 <li><a href="info/1045/4599.htm">電腦科學學院分年級召開期末年級大會</a></li> 328 329 </ul> 330 </ul> 331 </div> 332 </div> 333 334 </div> 335 <div class="span4"> 336 <div id="gonav"> 337 338 <h2>黨建動態</h2> 339 <span > 340 <a> 341 More>> 342 </a> 343 </span> 344 </div> 345 <div class="row-fluid"> 346 <div class="span12"> 347 <ul id="ull"> 348 <li> <a href="info/1082/4593.htm" title="學院召開2018年領導班子民主生活會">學院召開2018年領導班子民主生活會</a></li> 349 <li> <a href="info/1082/4520.htm" title="劉翔同志任電腦科學學院黨委副書記、紀委書記">劉翔同志任電腦科學學院黨委副書記、...</a></li> 350 <li> <a href="info/1082/4512.htm" title="學院黨委組織師生收看慶祝改革開放40週年大會">學院黨委組織師生收看慶祝改革開放40周...</a></li> 351 <li> <a href="info/1082/4464.htm" title="【稽核評估】學院召開本科教學工作稽核評估辦學定位與目標宣講大會">【稽核評估】學院召開本科教學工作稽核...</a></li> 352 <li> <a href="info/1082/4424.htm" title="【聚焦評估】學院召開本科教學工作稽核評估工作會">【聚焦評估】學院召開本科教學工作稽核...</a></li> 353 <li> <a href="info/1082/4471.htm" title="學院黨委開展迎校慶主題黨日活動">學院黨委開展迎校慶主題黨日活動</a></li> 354 <li> <a href="info/1082/4376.htm" title="學院黨委組織收看2018年全國科學道德和學風建設宣講教育報告會">學院黨委組織收看2018年全國科學道德和...</a></li> 355 <li> <a href="info/1082/4356.htm" title="【聚焦評估】學院召開全院教職工大會部署本學期本科稽核評估迎評促建工作">【聚焦評估】學院召開全院教職工大會部...</a></li> 356 </ul> 357 </div> 358 </div> 359 </div> 360 </div> 361 <div class="row-fluid"> 362 <div class="span8"> 363 <div id="gonav"> 364 365 <h2>通知公告</h2> 366 <span > 367 <a> 368 More>> 369 </a> 370 </span> 371 </div> 372 <div class="row-fluid"> 373 <div class="span12"> 374 <ul id="ull"> 375 <li> <a href="info/1055/4638.htm">自組團出訪前公示資訊表（彭博）</a></li> 376 <li> <a href="info/1055/4627.htm">電腦科學學院2019年春季學期開學教學準備及檢查工作實施方案</a></li> 377 <li> <a href="info/1055/4626.htm">西南石油大學電腦科學學院關於舉行學院2019年春季田徑運動會的通知</a></li> 378 <li> <a href="info/1055/4600.htm">2018年秋季學期期末考試情況總結</a></li> 379 <li> <a href="info/1055/4597.htm">電腦科學學院2018年度教職工考核優秀名單公示</a></li> 380 <li> <a href="info/1055/4588.htm">國際學術會議（ICCIS2019）徵稿通知</a></li> 381 <li> <a href="info/1055/4584.htm">電腦科學學院領導班子2018年度民主生活會徵求意見</a></li> 382 <li> <a href="info/1055/4578.htm">關於表彰電腦科學學院2018-2019學年秋季學期“最美寢室”的通知</a></li> 383 </ul> 384 </div> 385 </div> 386 </div> 387 <div class="span4"> 388 <div id="gonav"> 389 390 <h2>專題列表</h2> 391 <span > 392 <a> 393 More>> 394 </a> 395 </span> 396 </div> 397 <div class="row-fluid"> 398 <div class="span12"> 399 <ul id="ull"> 400 <li> <a href="info/1173/2003.htm" title="中美聯合高效能和大資料計算實驗室">中美聯合高效能和大資料計算實驗室</a></li> 401 402 403 <li> <a href="info/1173/2004.htm" title="石油工程計算機模擬技術重點實驗室">石油工程計算機模擬技術重點實驗室</a></li> 404 405 406 <li> <a href="info/1173/2005.htm" title="思科網路技術學院教師培訓中心">思科網路技術學院教師培訓中心</a></li> 407 </ul> 408 </div> 409 </div> 410 </div> 411 </div> 412 </div> 413 </div> 414 </div> 415 416 </div> 417 </body> 418 419 </html>
CSS原始碼：
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 6 .heading{ 7 8 margin: 0px auto; 9 } 10 11 .heading img{ 12 width: 100%; 13 margin: 0px auto; 14 } 15 .wrapper{ 16 width: 984px; 17 margin: 0px auto; 18 } 19 20 .nav{ 21 width:984px; 22 height:50px; 23 margin: 0 auto; 24 } 25 .nav ul{ 26 width: 100%; 27 } 28 .nav li{ 29 float:left; 30 height:50px; 31 line-height:50px; 32 font-size:16px; 33 position:relative; 34 list-style-type: none; 35 background-color: #0066CC; 36 } 37 .nav li a{ 38 color:#FFF; 39 display:block; 40 padding: 0 15.6px; 41 text-decoration: none; 42 } 43 .nav ul li a:hover{ 44 display:block; 45 color: #fff; 46 background:#0a5894; 47 text-decoration: none; 48 } 49 .body_img img{ 50 width: 100%; 51 margin: 0px auto; 52 } 53 .body{ 54 width: 100%; 55 margin: 0 auto; 56 } 57 .body_content{ 58 width: 100%; 59 height: 800px; 60 margin: 10px auto; 61 } 62 .content1{ 63 height: 280px; 64 width: 685px; 65 float: left; 66 } 67 .content1_head{ 68 margin-top: 0px; 69 width: 685px; 70 height: 40px; 71 background-color: #969696; 72 } 73 .content1_head1{ 74 font-size: 18px; 75 width: 80px; 76 height: 35px; 77 background-color: #0066CC; 78 margin-top: 0px; 79 margin-left: auto; 80 margin-right: auto; 81 float: left; 82 color: white; 83 padding: 2px; 84 text-align: center; 85 } 86 .content1_head img{ 87 margin: 15px auto; 88 float: right; 89 border: none; 90 } 91 .content1_body{ 92 width: 685px; 93 margin:0px auto; 94 float: left; 95 } 96 .content1_left img{ 97 margin: 20px auto; 98 float: left; 99 } 100 .content1_right ul{ 101 text-align: right; 102 list-style-type: none; 103 margin:20px auto; 104 font-size: 14px; 105 padding: 10px; 106 } 107 .content1_right ul li{ 108 padding: 5px; 109 } 110 a:link,a:visited{ 111 text-decoration: none; 112 color: darkgray; 113 } 114 a:hover{ 115 text-decoration: none; 116 color: black; 117 } 118 .content2{ 119 height: 260px; 120 float: right; 121 width: 280px; 122 } 123 .content2_head{ 124 margin-top: 0px; 125 width: 280px; 126 height: 40px; 127 background-color: #969696; 128 129 } 130 .content2_head1{ 131 font-size: 18px; 132 width: 90px; 133 height: 35px; 134 background-color: #0066CC; 135 margin-top: 0px; 136 margin-left: auto; 137 margin-right: auto; 138 float: left; 139 color: white; 140 padding: 2px; 141 text-align: center; 142 } 143 .content2_head img{ 144 margin: 15px auto; 145 float: right; 146 border: none; 147 } 148 .content2_body{ 149 height: 220px; 150 } 151 .content2_body ul{ 152 text-align: left; 153 list-style-type: none; 154 font-size: 14px; 155 margin-top: 25px; 156 } 157 .content2_body ul li{ 158 padding: 5px; 159 } 160 .content3{ 161 height: 280px; 162 width: 685px; 163 float: left; 164 } 165 166 .content3_head{ 167 margin-top: 0px; 168 width: 685px; 169 height: 40px; 170 background-color: #969696; 171 } 172 .content3_head1{ 173 font-size: 18px; 174 width: 80px; 175 height: 35px; 176 background-color: #0066CC; 177 margin-top: 0px; 178 margin-left: auto; 179 margin-right: auto; 180 float: left; 181 color: white; 182 padding: 2px; 183 text-align: center; 184 } 185 .content3_head img{ 186 margin: 15px auto; 187 float: right; 188 border: none; 189 } 190 191 .conten3_body{ 192 height: 240px; 193 } 194 .content3_body ul{ 195 text-align: left; 196 list-style-type: none; 197 font-size: 14px; 198 margin-top: 15px; 199 line-height: 30px; 200 } 201 .conten3_body ul li{ 202 padding: 5px; 203 } 204 205 .content4{ 206 height: 280px; 207 float: right; 208 width: 280px; 209 } 210 .content4_head{ 211 margin-top: 0px; 212 width: 280px; 213 height: 40px; 214 background-color: #969696; 215 } 216 .content4_head1{ 217 font-size: 18px; 218 width: 80px; 219 height: 35px; 220 background-color: #0066CC; 221 margin-top: 0px; 222 margin-left: auto; 223 margin-right: auto; 224 float: left; 225 color: white; 226 padding: 2px; 227 text-align: center; 228 } 229 .content4_head img{ 230 margin: 15px auto; 231 float: right; 232 border: none; 233 } 234 .content4_body ul{ 235 text-align: left; 236 list-style-type: none; 237 font-size: 14px; 238 margin-top: 10px; 239 } 240 .content4_body ul li{ 241 padding: 5px; 242 } 243 244 .content5{ 245 height: 280px; 246 width: 685px; 247 float: left; 248 } 249 250 .content5_head{ 251 margin-top: 0px; 252 width: 685px; 253 height: 40px; 254 background-color: #969696; 255 } 256 .content5_head1{ 257 font-size: 18px; 258 width: 80px; 259 height: 35px; 260 background-color: #0066CC; 261 margin-top: 0px; 262 margin-left: auto; 263 margin-right: auto; 264 float: left; 265 color: white; 266 padding: 2px; 267 text-align: center; 268 } 269 .content5_head img{ 270 margin: 15px auto; 271 float: right; 272 border: none; 273 } 274 275 .content5_body ul{ 276 text-align: left; 277 list-style-type: none; 278 font-size: 14px; 279 padding-top: 10px; 280 line-height: 30px; 281 } 282 .conten5_body ul li{ 283 padding: 5px; 284 } 285 286 .content6{ 287 height: 280px; 288 float: right; 289 width: 280px; 290 } 291 .content6_head{ 292 margin-top: 0px; 293 width: 280px; 294 height: 40px; 295 background-color: #969696; 296 } 297 .content6_head1{ 298 font-size: 18px; 299 width: 80px; 300 height: 35px; 301 background-color: #0066CC; 302 margin-top: 0px; 303 margin-left: auto; 304 margin-right: auto; 305 float: left; 306 color: white; 307 padding: 2px; 308 text-align: center; 309 } 310 .content6_head img{ 311 margin: 15px auto; 312 float: right; 313 border: none; 314 } 315 .content6_body ul{ 316 text-align: left; 317 margin:20px auto; 318 font-size: 14px; 319 padding: 10px; 320 } 321 .content6_body ul li{ 322 padding: 5px; 323 } 324 325 .footing{ 326 width: 100%; 327 background-color: #006699; 328 height: 100px; 329 text-align: center; 330 } 331 332 .footing font{ 333 color: white; 334 font-size: 4; 335 }
3.執行結果
4.百度雲地址
連結：https://pan.baidu.com/s/1zwA3kkQPtxvbyHYY1yHkKw
提取碼：gpbu