用HTML+CSS编写一个计科院网站首页的静态网页
由于能力的不足，这个网页还有很多功能未完善，比如图片的滚动，在学习了javascript后我会将其完善。
以下是几张成品和工程的截图：
以下是完整的HTML和CSS代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>西南石油大学-计算机科学学院</title> 6 <link rel="stylesheet" type="text/css" href="Style.css" /> 7 </head> 8 9 <body> 10 <!-- 居中显示 --> 11 <div style="display: block; margin: 0 auto; width: 50%; background: #fff;"> 12 <!-- 顶部及搜索 --> 13 <div class="divTop"> 14 <div class="divSearch"> 15 <input type="text" placeholder="请输入关键词搜索"> 16 <input type="submit" value="搜索"> 17 </div> 18 </div> 19 20 <!-- 导航 --> 21 <div class="Guide"> 22 <ul class="ul1"> 23 <li class="li1"><a href="#">网站首页</li> 24 <div class="dropDown"> 25 <a href="#" class="dropBtn">学院概况</a> 26 <div class="dropDown-content"> 27 <a href="#">学院简介</a> 28 <a href="#">学院领导</a> 29 <a href="#">组织机构</a> 30 </div> 31 </div> 32 <div class="dropDown"> 33 <a href="#" class="dropBtn">本科生教育</a> 34 <div class="dropDown-content"> 35 <a href="#">计算机科学与技术专业</a> 36 <a href="#">软件工程专业</a> 37 <a href="#">网络工程专业</a> 38 <a href="#">物联网工程专业</a> 39 <a href="#">信息管理与信息系统专业</a> 40 <a href="#">网络空间安全专业</a> 41 <a href="#">数据科学与大数据技术专业</a> 42 <a href="#">对外人才合作培养项目</a> 43 <a href="#">考试信息</a> 44 <a href="#">选课重修信息</a> 45 <a href="#">通知公告</a> 46 <a href="#">资料下载</a> 47 <a href="#">公选课教师视频</a> 48 </div> 49 </div> 50 <div class="dropDown"> 51 <a href="#" class="dropBtn">研究生教育</a> 52 <div class="dropDown-content"> 53 <a href="#">招生简章</a> 54 <a href="#">计算机科学与技术一级学科</a> 55 <a href="#">软件工程一级学科</a> 56 <a href="#">网络空间安全一级学科</a> 57 <a href="#">研究生导师</a> 58 <a href="#">研究生奖助体系</a> 59 <a href="#">通知公告</a> 60 <a href="#">资料下载</a> 61 </div> 62 </div> 63 <div class="dropDown"> 64 <a href="#" class="dropBtn">师资队伍</a> 65 <div class="dropDown-content"> 66 <a href="#">教授</a> 67 <a href="#">副教授</a> 68 <a href="#">讲师</a> 69 <a href="#">实验人员</a> 70 </div> 71 </div> 72 <div class="dropDown"> 73 <a href="#" class="dropBtn">科学研究</a> 74 <div class="dropDown-content"> 75 <a href="#">科研团队</a> 76 <a href="#">科研平台</a> 77 <a href="#">科研成果</a> 78 </div> 79 </div> 80 <div class="dropDown"> 81 <a href="#" class="dropBtn">学生工作</a> 82 <div class="dropDown-content"> 83 <a href="#">工作动态</a> 84 <a href="#">通知公告</a> 85 <a href="#">课外创新实践</a> 86 <a href="#">毕业生就业</a> 87 <a href="#">心灵之窗</a> 88 <a href="#">青春风采</a> 89 <a href="#">资料下载</a> 90 </div> 91 </div> 92 <div class="dropDown"> 93 <a href="#" class="dropBtn">招生工作</a> 94 <div class="dropDown-content"> 95 <a href="#">学院介绍</a> 96 <a href="#">毕业生就业去向</a> 97 <a href="#">优秀毕业生简介</a> 98 <a href="#">学生获奖</a> 99 <a href="#">精英校友介绍</a> 100 <a href="#">招生工作宣传报道</a> 101 </div> 102 </div> 103 <div class="dropDown"> 104 <a href="#" class="dropBtn">实验中心</a> 105 <div class="dropDown-content"> 106 <a href="#">中心简介</a> 107 <a href="#">实验分室</a> 108 <a href="#">规章制度</a> 109 <a href="#">资料下载</a> 110 <a href="#">开放预约</a> 111 </div> 112 </div> 113 <div class="dropDown"> 114 <a href="#" class="dropBtn">党建之窗</a> 115 <div class="dropDown-content"> 116 <a href="#">党建动态</a> 117 <a href="#">学习园地</a> 118 <a href="#">党务政务公开</a> 119 <a href="#">资料下载</a> 120 </div> 121 </div> 122 </ul> 123 </div> 124 <br> 125 <!-- 滚动图片（暂时静态） --> 126 <div class="divPicture"> 127 <a href="#"><img alt="welcome" src="images/welcome.jpg"></a> 128 </div> 129 130 <!-- 文字新闻版块 --> 131 <div style="width:974px;height:970px;background-color:white;"> 132 <!-- 图片新闻 --> 133 <div class="q1"> 134 <div class="p1"> 135 <div class="t1"> 136 图片新闻 137 </div> 138 <div class="t2"> 139 <a href="#"><img alt="more" src="images/more.png"></a> 140 </div> 141 </div> 142 <div id="sp"> 143 <a><img alt="chat" src="images/chat.jpg" style="width:350px;width:300px"></a> 144 </div> 145 <p> 146 <ul> 147 <li class="li2"><a href="#">计算机科学学院举办2019寒...[02-01]</a></li> 148 <li class="li2"><a href="#">学院召开党委中心组学习会... [03-18]</a></li> 149 <li class="li2"><a href="#">学院召开教职工大会学习传... [03-15]</a></li> 150 <li class="li2"><a href="#">计科院工会组织学院女教职... [03-15]</a></li> 151 <li class="li2"><a href="#">学术讲座——人工智能改变... [03-15]</a></li> 152 <li class="li2"><a href="#">计算机科学学院各年级辅导... [03-15]</a></li> 153 </ul> 154 </p> 155 </div> 156 <!-- 空行 --> 157 <div class="q"></div> 158 <!-- 学术交流 --> 159 <div class="q2"> 160 <div class="p2"> 161 <div class="t1"> 162 学术交流 163 </div> 164 <div class="t2"> 165 <a href="#"><img alt="more" src="images/more.png"></a> 166 </div> 167 </div> 168 <p> 169 <ul> 170 <li class="li2"><a href="#">人工智能改变我们的未来生活</a></li> 171 <li class="li2"><a href="#">计算时代的虚假信息传播</a></li> 172 <li class="li2"><a href="#">人工智能+：视界充满AI</a></li> 173 <li class="li2"><a href="#">零行列式策略及其网络演化动力学</a></li> 174 <li class="li2"><a href="#">视频遇上云服务</a></li> 175 <li class="li2"><a href="#">计科院关于举行2018年校庆论文报告会的通知</a></li> 176 </ul> 177 </p> 178 </div> 179 180 <!-- 新闻速递 --> 181 <div class="q1"> 182 <div class="p1"> 183 <div class="t1"> 184 新闻速递 185 </div> 186 <div class="t2"> 187 <a href="#"><img alt="more" src="images/more.png"></a> 188 </div> 189 </div> 190 <p> 191 <ul> 192 <li class="li2"><a href="#">学院召开党委中心组学习会暨党风廉政建设专题会</a></li> 193 <li class="li2"><a href="#">学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</a></li> 194 <li class="li2"><a href="#">计科院工会组织学院女教职工庆祝第109个“三八妇女节”</a></li> 195 <li class="li2"><a href="#">学术讲座——人工智能改变我们的未来生活</a></li> 196 <li class="li2"><a href="#">计算机科学学院各年级辅导员集中走访学生寝室</a></li> 197 <li class="li2"><a href="#">学院召开2018年度领导班子民主生活会</a></li> 198 </ul> 199 </p> 200 </div> 201 <!-- 空行 --> 202 <div class="q"></div> 203 <!-- 党建动态 --> 204 <div class="q2"> 205 <div class="p2"> 206 <div class="t1"> 207 党建动态 208 </div> 209 <div class="t2"> 210 <a href="#"><img alt="more" src="images/more.png"></a> 211 </div> 212 </div> 213 <p> 214 <ul> 215 <li class="li3"><a href="#">学院召开党委中心组学习会暨党风...</a></li> 216 <li class="li3"><a href="#">学院召开教职工大会学习传达中层...</a></li> 217 <li class="li3"><a href="#">学院召开2018年领导班子民主生...</a></li> 218 <li class="li3"><a href="#">刘翔同志任计算机科学学院党委副...</a></li> 219 <li class="li3"><a href="#">学院党委组织师生收看庆祝改革开...</a></li> 220 <li class="li3"><a href="#">【审核评估】学院召开本科教学工...</a></li> 221 <li class="li3"><a href="#">【聚焦评估】学院召开本科教学工...</a></li> 222 <li class="li3"><a href="#">学院党委开展迎校庆主题党日活动</a></li> 223 </ul> 224 </p> 225 </div> 226 227 <!-- 通知公告 --> 228 <div class="q1" style="height:350px;"> 229 <div class="p1"> 230 <div class="t1"> 231 通知公告 232 </div> 233 <div class="t2"> 234 <a href="#"><img alt="more" src="images/more.png"></a> 235 </div> 236 </div> 237 <p> 238 <ul> 239 <li class="li2"><a href="#">自组团出访前公示信息表（彭博）</a></li> 240 <li class="li2"><a href="#">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li> 241 <li class="li2"><a href="#">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li> 242 <li class="li2"><a href="#">2018年秋季学期期末考试情况总结</a></li> 243 <li class="li2"><a href="#">计算机科学学院2018年度教职工考核优秀名单公示</a></li> 244 <li class="li2"><a href="#">国际学术会议（ICCIS2019）征稿通知</a></li> 245 <li class="li2"><a href="#">计算机科学学院领导班子2018年度民主生活会征求意见</a></li> 246 <li class="li2"><a href="#">关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a></li> 247 </ul> 248 </p> 249 </div> 250 <!-- 空行 --> 251 <div class="q"></div> 252 <!-- 专题列表 --> 253 <div class="q2" style="height:350px;"> 254 <div class="p2"> 255 <div class="t1"> 256 专题列表 257 </div> 258 <div class="t2"> 259 <a href="#"><img alt="more" src="images/more.png"></a> 260 </div> 261 </div> 262 <p> 263 <ul> 264 <li class="li3"><a href="#">中美联合高性能和大数据实验室</a></li> 265 <li class="li3"><a href="#">石油工程计算机模拟技术重点实验室</a></li> 266 <li class="li3"><a href="#">思科网络技术学院教师培训中心</a></li> 267 </ul> 268 </p> 269 </div> 270 </div> 271 </div> 272 <!-- 底部 --> 273 <div style="width:100%;height:70px;background-color:#224B77;color: white;text-align: center;line-height:70px;"> 274 Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院 275 </div> 276 </body> 277 </html>
1 @CHARSET "UTF-8"; 2 3 .divTop{width: 974px; 4 height:117px; 5 background-image:url(images/top-bg.jpg);} 6 7 .divSearch{ width:280px; 8 height:100px; 9 float:right; 10 margin-top:45px; 11 margin-right:0px;} 12 13 .Guide{width:974px; 14 height:80px; 15 background-color:white; 16 } 17 18 .ul1{ 19 width:974px; 20 list-style-type: none; 21 margin: 0px; 22 padding: 0px; 23 overflow: hidden; 24 background-color: #0B6CB8; 25 } 26 .li1{ 27 float:left; 28 } 29 .li1 a,.dropBtn{ 30 display: inline-block; 31 color: white; 32 text-align: center; 33 padding: 15px 13px; 34 text-decoration: none; 35 } 36 .dropDown{ 37 display:inline-block; 38 } 39 .dropDown-content{ 40 display:none; 41 position: absolute; 42 background-color: #0A5894; 43 min-width: 160px; 44 } 45 .dropDown-content a { 46 display: block; 47 color: white; 48 padding: 10px 10px; 49 text-decoration: none; 50 } 51 .dropDown-content a:hover { 52 background-color: #0D6DB9; 53 } 54 .dropDown:hover .dropDown-content{ 55 display:block; 56 } 57 58 .divPicture{ 59 width:974px; 60 height:200px; 61 } 62 63 .q{ 64 float:left; 65 width:24px; 66 height:300px; 67 } 68 69 .q1{ 70 float:left; 71 width:630px; 72 height:300px; 73 background-color:white; 74 } 75 .q2{ 76 float:left; 77 width:320px; 78 height:300px; 79 background-color:white; 80 } 81 .p1{ 82 float:left; 83 width:630px; 84 height:30px; 85 background-color:#dddddd; 86 } 87 .p2{ 88 float:left; 89 width:320px; 90 height:30px; 91 background-color:#dddddd; 92 } 93 .t1{ 94 color:white; 95 text-align: center; 96 float:left; 97 width:100px; 98 height:30px; 99 background-color:#2780CB; 100 } 101 .t2{ 102 align:center; 103 float:right; 104 width:50px; 105 height:30px; 106 } 107 #sp{ 108 width:350px; 109 height:250px; 110 background-color:white; 111 float:left; 112 } 113 .li2{ 114 padding: 10px 10px; 115 } 116 .li2 a{ 117 text-decoration: none; 118 color:gray; 119 } 120 .li3{ 121 padding: 5px 0px; 122 } 123 .li3 a{ 124 text-decoration: none; 125 color:gray; 126 }
以下是百度云链接：
链接：https://pan.baidu.com/s/1WZXI_YZEeN8uz-_eAbyPbw
提取码：avfv
复制这段内容后打开百度网盘手机App，操作更方便哦
