一.HTML代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 7 </head> 8 <body> 9 <div id="page"> 10 <div id="page_head"> 11 <div id="logo" align=center><img src="logo.png" /></div> 12 </div> 13 <div id="leader"> 14 <ul style="padding:0 0;"> 15 <li id="mainmenu"> 16 <a id="link" >网站首页</a> 17 </li> 18 <li id="mainmenu"> 19 <a id="link" >学院概况</a> 20 </li> 21 <li id="mainmenu"> 22 <a id="link" >本科生教育</a> 23 </li> 24 <li id="mainmenu"> 25 <a id="link" >研究生教育</a> 26 </li> 27 <li id="mainmenu"> 28 <a id="link">师资队伍</a> 29 </li> 30 <li id="mainmenu"> 31 <a id="link">科学研究</a> 32 </li> 33 <li id="mainmenu"> 34 <a id="link">学生工作</a> 35 </li> 36 <li id="mainmenu"> 37 <a id="link">招生工作</a> 38 </li> 39 <li id="mainmenu"> 40 <a id="link">实验中心</a> 41 <li id="mainmenu"> 42 <a id="link">党建之窗</a> 43 </ul> 44 </div> 45 <div id="img_welcome"><img src="welcome.jpg" width="975" height="195" ></div> 46 <div id="page_body"> 47 <div style="height:30%;blackground-color:grey"> 48 <div id="leftli"> 49 <div id="topli"> 50 <div id="topli-leftpart"><b>图片新闻</b></div> 51 <div id="topli-rightpart"><img src="more.png" ></div> 52 </div> 53 <div id="downimg"> 54 <img src="abc.jpg" width="300" height="180"> 55 </div> 56 <div id="leftfloat"> 57 <ul id="forul"> 58 <li> 59 <a>计算机科学学院举办2019年寒假留...[02-01]</a> 60 </li> 61 <li> 62 <a>学院召开党委中心组学习会暨党风廉...[03-18]</a> 63 </li> 64 <li> 65 <a>学院召开教职工大会学习传达中层干...[03-15]</a> 66 </li> 67 <li> 68 <a>计科院工会组织学院女教职工庆祝第...[03-12]</a> 69 </li> 70 <li> 71 <a>学术讲座——人工智能改变我们的未...[03-05]</a> 72 </li> 73 <li> 74 <a>计算机科学学院各年级辅导员集中走...[01-21]</a> 75 </li> 76 </ul> 77 </div> 78 </div> 79 <div id="rightli"> 80 <div id="topli"> 81 <div id="topli-leftpart"><b>学术交流</b></div> 82 <div id="topli-rightpart"><img src="more.png" ></div> 83 </div> 84 <ul type="square"> 85 <li> 86 <a>人工智能改变我们的未来生活</a> 87 </li> 88 <li> 89 <a>计算时代的虚假信息传播</a> 90 </li> 91 <li> 92 <a>人工智能+：视界充满AI</a> 93 </li> 94 <li> 95 <a>零行列式策略及其网络演化动力学</a> 96 </li> 97 <li> 98 <a>视频遇上云服务</a> 99 </li> 100 <li> 101 <a>计科院关于举行2018年校庆论文报告会的...</a> 102 </li> 103 </ul> 104 </div> 105 </div> 106 <div style="height:35%;blackground-color:grey"> 107 <div id="leftli"> 108 <div id="topli"> 109 <div id="topli-leftpart"><b>新闻速递</b></div> 110 <div id="topli-rightpart"><img src="more.png" ></div> 111 </div> 112 <div style="padding-top:10px"> 113 <a id="blue" style="font-weight:bold;padding-left:10px;font-size:16px;" >计算机科学学院举办2019年寒假留校学生新春团拜会</a> 114 </div> 115 <div> 116 <p id="grey" style="font-size:12px;">    在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<a herf=“”>详细信息</a>]</p> 117 </div> 118 <ul> 119 <li> 120 <a>学院召开党委中心组学习会暨党风廉政建设专题会03/18</a> 121 </li> 122 <li> 123 <a>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作03/15</a> 124 </li> 125 <li> 126 <a>计科院工会组织学院女教职工庆祝第109个“三八妇女节”03/12</a> 127 </li> 128 <li> 129 <a>学术讲座——人工智能改变我们的未来生活03/05</a> 130 </li> 131 <li> 132 <a>计算机科学学院各年级辅导员集中走访学生寝室01/21</a> 133 </li> 134 <li> 135 <a>学院召开2018年度领导班子民主生活会01/14</a> 136 </li> 137 </ul> 138 </div> 139 <div id="rightli"> 140 <div id="topli"> 141 <div id="topli-leftpart"><b>党建动态</b></div> 142 <div id="topli-rightpart"><img src="more.png" ></div> 143 </div> 144 <ul> 145 <li> 146 <a>学院召开党委中心组学习会暨党风廉政建...</a> 147 </li> 148 <li> 149 <a>学院召开教职工大会学习传达中层干部大...</a> 150 </li> 151 <li> 152 <a>学院召开2018年领导班子民主生活会</a> 153 </li> 154 <li> 155 <a>刘翔同志任计算机科学学院党委副书记、...</a> 156 </li> 157 <li> 158 <a>学院党委组织师生收看庆祝改革开放40周...</a> 159 </li> 160 <li> 161 <a>【审核评估】学院召开本科教学工作审核...</a> 162 </li> 163 <li> 164 <a>【聚焦评估】学院召开本科教学工作审核...</a> 165 </li> 166 <li> 167 <a>学院党委开展迎校庆主题党日活动</a> 168 </li> 169 </ul> 170 </div> 171 </div> 172 <div style="height:35%;blackground-color:grey"> 173 <div id="leftli"> 174 <div id="topli"> 175 <div id="topli-leftpart"><b>通知公告</b></div> 176 <div id="topli-rightpart"><img src="more.png" ></div> 177 </div> 178 <ul> 179 <li> 180 <a>自组团出访前公示信息表（彭博）</a> 181 </li> 182 <li> 183 <a>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a> 184 </li> 185 <li> 186 <a>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a> 187 </li> 188 <li> 189 <a>2018年秋季学期期末考试情况总结</a> 190 </li> 191 <li> 192 <a>计算机科学学院2018年度教职工考核优秀名单公示</a> 193 </li> 194 <li> 195 <a>国际学术会议（ICCIS2019）征稿通知</a> 196 </li> 197 <li> 198 <a>计算机科学学院领导班子2018年度民主生活会征求意见</a> 199 </li> 200 <li> 201 <a>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a> 202 </li> 203 </ul> 204 </div> 205 <div id="rightli"> 206 <div id="topli"> 207 <div id="topli-leftpart"><b>专题列表</b></div> 208 <div id="topli-rightpart"><img src="more.png" ></div> 209 </div> 210 <ul> 211 <li> 212 <a>中美联合高性能和大数据计算实验室</a> 213 </li> 214 <li> 215 <a>石油工程计算机模拟技术重点实验室</a> 216 </li> 217 <li> 218 <a>思科网络技术学院教师培训中心</a> 219 </li> 220 </ul> 221 </div> 222 </div> 223 </div> 224 <div id="pag_foot" align=center> 225 <b>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</b> 226 </div> 227 </div> 228 229 </body> 230 </html>
二.CSS代码
1 #page{ 2 margin:0px;padding:0px 3 } 4 #page_head{ 5 background-color:white; 6 height:113px;100%; 7 margin:auto; 8 } 9 #page_body{ 10 height:900px;975px; 11 margin:auto;margin-top:10px; 12 } 13 #pag_foot{ 14 background-color:#224b77; 15 height:60px; 16 margin:auto;line-height:60px; 17 text-align:center;font-size:13px;color:#fff; 18 } 19 #logo{ 20 21 } 22 #leader{ 23 background-color:#0b6cb8; 24 height:50px;975px; 25 margin:auto; 26 } 27 #img_welcome{ 28 margin:auto;text-align:center;padding-top:0px; 29 } 30 #link{ 31 padding-left:28px; 32 padding-top:0px; 33 font-size:16px;color:#fff; 34 } 35 #mainmenu{ 36 list-style-type:none; 37 float:left; 38 height:50px;margin: 0px; 39 text-align:center; 40 line-height:30px; 41 } 42 #leftli{ 43 64%;float:left;height:100%; 44 background-color:white; 45 } 46 #rightli{ 47 34%;float:right;height:100%; 48 background-color:white; 49 } 50 #topli{ 51 height:35px; 52 background-color:#dddddd; 53 } 54 #topli-leftpart{ 55 float:left;line-height:35px; 56 80px;height:100%; 57 background-color:#0b6cb8; 58 text-align:center;color:#fff; 59 } 60 #topli-rightpart{ 61 float:right;line-height:30px; 62 40px;height:100%; 63 } 64 #downimg{ 65 float:left; 66 50%; 67 padding-top:10px 68 } 69 #leftfloat{ 70 float:left; 71 } 72 #grey{ 73 color:grey; 74 } 75 #blue{ 76 color:blue; 77 } 78 ul {list-style-type:square;color:grey;font-size:13px;padding-left:15px}
三.效果如下
四.网盘
链接：https://pan.baidu.com/s/15gtX7vBDBhLzIL9Fg8wJCg
提取码：ghhc