html+css实现的计算机科学学院首页静态页面
家人们啊，我真是出息了
终于不是我仿写的了，是我真正意义上完全由自己编写的一个静态页面，总算是看起来比较可以了
主要是在仿写的时候，感觉博主写的实在是太乱了又很复杂，不如自己编写一下简单，就简单试了一下
经过了大概一个星期，总算是写出来了
主要是一个西南石油大学计算机学院的页面，很简单，更多的是类似于报纸上的这种广告性质的超链接
使用了多个<ul><li><a>无序列表来表达，感觉更重要的是页面的布局，首先要构思页面的整体布局，将每一块区分，再将区分的快更加详细的
分为多个小块，也就是做到多个<div>相互嵌套的形式
另外比较重要的就是CSS的样式编写，要对每一个div块区编辑样式，还要考虑多个div之间的样式关系，避免页面的崩溃，
其次在小块之间遇到的问题可以重新设置工程单独编写来查找解决方式，总之是一个非常好的尝试，希望未来写出更多的页面，淦！
话不多说，直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>计算机科学</title> <style> *{ margin: 0; padding: 0; } .top{ width: 1172px; height: 112px; border: 1px solid blue; background-image: url(./jikeimg/toutu.png); margin-top: 0; margin-left: 180px; } .nav{ width: 1173px; height: 60px; margin-top: o; background-color:#0B6CB8; margin-left: 180px; } .nav ul{ list-style-type: none; border: 1px solid yellow; width: 1173px; height: 60px; } .nav ul li{ float: left; } .nav ul li a{ display: block; text-decoration: none; color: white; text-align: center; width: auto; height: 30px; padding:15px; } .nav ul li a:hover{ background-color: #102b6a; } .banner{ width: 1172px; border: 1px solid #548EFF; margin-left: 180px; } .banner img{ width: 1172px; height: 180px; } .a1, .b1{ width: 1172px; height: 280px; border: 1px solid blue; margin-left: 180px; } .c1{ width: 1172px; height: 260px; border: 1px solid blue; margin-left: 180px; } .a11{ width: 700px; height: 260px; border: 1px solid red; float: left; } .a111{ width: 698px; height: 40px; border: 1px solid yellow; background-color: #DDDDDD; } .a111 a{ display: block; background-color: #0B6CB8; color: white; padding: 8px 5px; float: left; text-decoration: none; } .a112 img{ width: 349px; height: 200px; border: 1px solid black; margin-top: 10px; float: left; } .a113 ul{ margin-top: 10px; width: 280px; height: 200px; border: 1px solid black; float: right; margin-right: 20px; list-style-type: square; color: #5c5c5c; padding-left: 20px; } .a113 ul li{ margin: 5px 5px; padding: 5px 5px; } .a113 ul li a{ text-decoration: none; color: #5c5c5c; } .a113 ul li a:hover{ color: #2780CB; } .a12{ width: 400px; height: 260px; border: 1px solid red; float: right; } .a121{ width: 398px; height: 40px; border: 1px solid yellow; background-color: #DDDDDD; } .a121 a{ display: block; background-color: #0B6CB8; color: white; padding: 8px 5px; float: left; text-decoration: none; } .a122 ul{ margin-top: 10px; width: 340px; height: 200px; border: 1px solid black; list-style-type: square; color: #5c5c5c; padding-left: 20px; } .a122 ul li{ margin: 5px 5px; padding: 5px 5px; } .a122 ul li a{ text-decoration: none; color: #5c5c5c; } .a122 ul li a:hover{ color: #2780CB; } .b11{ width: 700px; height: 260px; border: 1px solid red; float: left; } .b111{ width: 698px; height: 40px; border: 1px solid yellow; background-color: #dddddd; } .b111 a{ display: block; background-color: #0B6CB8; color: white; padding: 8px 5px; float: left; text-decoration: none; } .b112{ text-decoration: none; color: #0B6CB8; font-size: 10px; } .b113{ width: 650px; height: 160px; border: 1px solid black; } .b113 ul{ list-style-type: square; padding-left: 20px; } .b113 ul li{ margin: 2px 2px; padding: 2px 2px; } .b113 ul li a{ text-decoration: none; color: #5c5c5c; } .b113 ul li a:hover{ color:#0B6CB8; } .b12{ width: 400px; height: 260px; border: 1px solid red; float: right } .b121{ width: 398px; height: 40px; border: 1px solid yellow; background-color: #dddddd; } .b121 a{ display: block; background-color: #0b6cbb; color: white; padding: 8px 5px; float: left; text-decoration: none; } .b122{ width: 350px; height: 190px; border: 1px solid black; margin-top: 10px; } .b122 ul{ list-style-type: square; padding-left: 20px; } .b122 ul li{ margin: 2px; padding: 2px; } .b122 ul li a{ text-decoration: none; color:#5c5c5c ; } .b122 ul li a:hover{ color: #0B6CB8; } .c11{ width: 700px; height: 260px; border: 1px solid red; float: left; } .c12{ width: 400px; height: 260px; border:1px solid red; float:right; } .c111{ width: 698px; height: 40px; border: 1px solid yellow; background-color: #dddddd; } .c111 a{ display: block; text-decoration: none; color: white; background-color:#0b6cbb; padding: 8px 5px; float: left; } .c112{ width: 650px; height: 215px; border: 1px solid black; } .c112 ul{ list-style-type: square; padding-left: 20px; } .c112 ul li{ margin: 2px; padding: 2px; } .c112 ul li a{ text-decoration: none; color:#5c5c5c ; } .c112 ul li a:hover{ color: #0B6CB8; } .c121{ width: 398px; height: 40px; border: 1px solid yellow; background-color: #dddddd; } .c121 a{ display: block; background-color: #0b6cbb; color: white; padding: 8px 5px; float: left; text-decoration: none; } .c122{ width: 350px; height: 190px; border: 1px solid black; margin-top: 10px; } .c122 ul{ list-style-type: square; padding-left: 20px; } .c122 ul li{ margin: 2px; padding: 2px; } .c122 ul li a{ text-decoration: none; color:#5c5c5c ; } .c122 ul li a:hover{ color:#0B6CB8; } .foot{ width: 1173px; height: 60px; border: 1px solid blue; margin-left: 180px; background-color: #224B77; } .foot p{ color: white; text-align: center; padding-top: 20px; } </style> </head> <body> <!-- 大框架 --> <div class="da"> <!-- 头部图 --> <div class="top"> </div> <!-- 头部导航 --> <div class="nav"> <ul> <li> <a href="">网站首页</a> </li> <li> <a href="">学院概况</a> </li> <li> <a href="">本科生教育</a> </li> </ul> </div> <!-- 轮播图 --> <div class="banner"> <img src="./jikeimg/welcome.jpg"> </div> <!-- 第一部分 --> <div class="a1"> <div class="a11"> <div class="a111"> <a href="#">图片新闻</a> </div> <div class="a112"> <img src="./jikeimg/wulianwang.jpg"> </div> <div class="a113"> <ul> <li> <a href="#">通信协力促合作 校企联合谋发展</a> </li> <li> <a href="#">计算机科学学院到英特尔FPGA中国</a> </li> <li> <a href="#">计算机科学学院与罗瑞爱卿故居共建</a> </li> <li> <a href="#">西南石油大学领先级华为ICT学院</a> </li> <li> <a href="#">计算机科学学院副院长赴川内多地开展本科</a> </li> </ul> </div> </div> <div class="a12"> <div class="a121"> <a href="#">学术交流</a> </div> <div class="a122"> <ul> <li> <a href="#">浅谈深度学习在图像复原与合成中的应用</a> </li> <li> <a href="#">血管内超声智能分析-从临床问题到技术实现</a> </li> <li> <a href="#">Cross-modal and Cross-domain Adaptive...</a> </li> <li> <a href="#">恶劣观测场景的鲁棒任务模型交互研究及应用</a> </li> <li> <a href="#">Recent advances in deep learning for ...</a> </li> </ul> </div> </div> </div> <!-- 第二部分 --> <div class="b1"> <div class="b11"> <div class="b111"> <a href="#">新闻速递</a> </div> <a class="b112" href="#"><h2>    同心协力促合作 校企联合谋发展-----计科院与电信院共同深入走访微网优联科<br>技有限公司</h2></a> <div class="b113"> <ul> <li> <a href="#">计算机科学学院到英特尔FPGA中国穿心中心开展访企拓岗促就业活动</a> </li> <li> <a href="#">计算机科学学院与罗瑞爱卿故居共建大学生红色教育劳动教育实践基地</a> </li> <li> <a href="#">西南石油大学领先级华为ICT学院授牌华为ICR大赛2022-2023四川省建赛颁奖典礼</a> </li> <li> <a href="#">计算机科学学院副院长徐林、龚接开展实验室安全检查</a> </li> <li> <a href="#">计算机科学学院赴川内多地开展本科招生巡展工作</a> </li> <li> <a href="#">计算机科学学院（南充）助航求职训练营正式启动</a> </li> </ul> </div> </div> <div class="b12"> <div class="b121"> <a href="#">党建动态</a> </div> <div class="b122"> <ul> <li> <a href="#">学院召开党风廉政教育工作会</a> </li> <li> <a href="#">计科教研室党支部与中建西勘院职能第二...</a> </li> <li> <a href="#">学院2023年春季学期入党积极分子培训班...</a> </li> <li> <a href="#">学院举办"党的性质与指导思想"的专题辅导</a> </li> <li> <a href="#">学生党员观看"传承红色基因争当青年先进"</a> </li> <li> <a href="#">学院举办党风廉政建设专题培训会</a> </li> <li> <a href="#">【聚焦二十大】学院党委举行党的二十大...</a> </li> </ul> </div> </div> </div> <!-- 第三部分 --> <div class="c1"> <div class="c11"> <div class="c111"> <a href="#">通知公告</a> </div> <div class="c112"> <ul> <li> <a href="#">计算机科学学院关于开展2023年度研究生导师遴选工作的通知</a> </li> <li> <a href="#"><b>关于举办第九届西南石油大学“互联网+”大学生创新创业大赛的通知</b></a> </li> <li> <a href="#">关于启动第九届计算机科学学院研究生会换届工作的通知</a> </li> <li> <a href="#">计算机科学学院2022级计算机类专业分流结果公示</a> </li> <li> <a href="#">关于组织参加2023年度“中国计算机应用技术大赛—金山办公杯WPS办公软件能力大赛”的通知</a> </li> <li> <a href="#">计算机科学学院2022级计算机类专业分流实施细则</a> </li> <li> <a href="#">【学术讲座】作为公共服务功能的超算中心如何赋能科学研究</a> </li> </ul> </div> </div> <div class="c12"> <div class="c121"> <a href="#">专题列表</a> </div> <div class="c122"> <ul> <li> <a href="#">中美联合高性能和大数据计算实验室</a> </li> <li> <a href="#">石油工程计算机模拟技术重点实验室</a> </li> <li> <a href="#">思科网络技术学院教师培训中心</a> </li> </ul> </div> </div> </div> <div class="foot"> <p>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</p> </div> </div> </body> </html>
感觉写了很多重复的样式，代码一定有可以优化的地方，也一定有更好的描述方式，多加学习
效果图如下：便于学习，加了很多的边框，这样更加明显
完毕。
