用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">人工智能+：视界充满AIa>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">计算机科学学院各年级辅导员集中走访学生寝室