一.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="page">
<div id="page_head">
<div id="logo" align=center><img src="logo.png" /></div>
</div>
<div id="leader">
<ul style="padding:0 0;">
<li id="mainmenu">
<a id="link" >网站首页</a>
</li>
<li id="mainmenu">
<a id="link" >学院概况</a>
</li>
<li id="mainmenu">
<a id="link" >本科生教育</a>
</li>
<li id="mainmenu">
<a id="link" >研究生教育</a>
</li>
<li id="mainmenu">
<a id="link">师资队伍</a>
</li>
<li id="mainmenu">
<a id="link">科学研究</a>
</li>
<li id="mainmenu">
<a id="link">学生工作</a>
</li>
<li id="mainmenu">
<a id="link">招生工作</a>
</li>
<li id="mainmenu">
<a id="link">实验中心</a>
<li id="mainmenu">
<a id="link">党建之窗</a>
</ul>
</div>
<div id="img_welcome"><img src="welcome.jpg" width="975" height="195" ></div>
<div id="page_body">
<div style="height:30%;blackground-color:grey">
<div id="leftli">
<div id="topli">
<div id="topli-leftpart"><b>图片新闻</b></div>
<div id="topli-rightpart"><img src="more.png" ></div>
</div>
<div id="downimg">
<img src="abc.jpg" width="300" height="180">
</div>
<div id="leftfloat">
<ul id="forul">
<li>
<a>计算机科学学院举办2019年寒假留...[02-01]</a>
</li>
<li>
<a>学院召开党委中心组学习会暨党风廉...[03-18]</a>
</li>
<li>
<a>学院召开教职工大会学习传达中层干...[03-15]</a>
</li>
<li>
<a>计科院工会组织学院女教职工庆祝第...[03-12]</a>
</li>
<li>
<a>学术讲座——人工智能改变我们的未...[03-05]</a>
</li>
<li>
<a>计算机科学学院各年级辅导员集中走...[01-21]</a>
</li>
</ul>
</div>
</div>
<div id="rightli">
<div id="topli">
<div id="topli-leftpart"><b>学术交流</b></div>
<div id="topli-rightpart"><img src="more.png" ></div>
</div>
<ul type="square">
<li>
<a>人工智能改变我们的未来生活</a>
</li>
<li>
<a>计算时代的虚假信息传播</a>
</li>
<li>
<a>人工智能+：视界充满AI</a>
</li>
<li>
<a>零行列式策略及其网络演化动力学</a>
</li>
<li>
<a>视频遇上云服务</a>
</li>
<li>
<a>计科院关于举行2018年校庆论文报告会的...</a>
</li>
</ul>
</div>
</div>
<div style="height:35%;blackground-color:grey">
<div id="leftli">
<div id="topli">
<div id="topli-leftpart"><b>新闻速递</b></div>
<div id="topli-rightpart"><img src="more.png" ></div>
</div>
<div style="padding-top:10px">
<a id="blue" style="font-weight:bold;padding-left:10px;font-size:16px;" >计算机科学学院举办2019年寒假留校学生新春团拜会</a>
</div>
<div>
<p id="grey" style="font-size:12px;">    在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<a herf=“”>详细信息</a>]</p>
</div>
<ul>
<li>
<a>学院召开党委中心组学习会暨党风廉政建设专题会03/18</a>
</li>
<li>
<a>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作03/15</a>
</li>
<li>
<a>计科院工会组织学院女教职工庆祝第109个“三八妇女节”03/12</a>
</li>
<li>
<a>学术讲座——人工智能改变我们的未来生活03/05</a>
</li>
<li>
<a>计算机科学学院各年级辅导员集中走访学生寝室01/21</a>
</li>
<li>
<a>学院召开2018年度领导班子民主生活会01/14</a>
</li>
</ul>
</div>
<div id="rightli">
<div id="topli">
<div id="topli-leftpart"><b>党建动态</b></div>
<div id="topli-rightpart"><img src="more.png" ></div>
</div>
<ul>
<li>
<a>学院召开党委中心组学习会暨党风廉政建...</a>
</li>
<li>
<a>学院召开教职工大会学习传达中层干部大...</a>
</li>
<li>
<a>学院召开2018年领导班子民主生活会</a>
</li>
<li>
<a>刘翔同志任计算机科学学院党委副书记、...</a>
</li>
<li>
<a>学院党委组织师生收看庆祝改革开放40周...</a>
</li>
<li>
<a>【审核评估】学院召开本科教学工作审核...</a>
</li>
<li>
<a>【聚焦评估】学院召开本科教学工作审核...</a>
</li>
<li>
<a>学院党委开展迎校庆主题党日活动</a>
</li>
</ul>
</div>
</div>
<div style="height:35%;blackground-color:grey">
<div id="leftli">
<div id="topli">
<div id="topli-leftpart"><b>通知公告</b></div>
<div id="topli-rightpart"><img src="more.png" ></div>
</div>
<ul>
<li>
<a>自组团出访前公示信息表（彭博）</a>
</li>
<li>
<a>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a>
</li>
<li>
<a>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a>
</li>
<li>
<a>2018年秋季学期期末考试情况总结</a>
</li>
<li>
<a>计算机科学学院2018年度教职工考核优秀名单公示</a>
</li>
<li>
<a>国际学术会议（ICCIS2019）征稿通知</a>
</li>
<li>
<a>计算机科学学院领导班子2018年度民主生活会征求意见</a>
</li>
<li>
<a>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a>
</li>
</ul>
</div>
<div id="rightli">
<div id="topli">
<div id="topli-leftpart"><b>专题列表</b></div>
<div id="topli-rightpart"><img src="more.png" ></div>
</div>
<ul>
<li>
<a>中美联合高性能和大数据计算实验室</a>
</li>
<li>
<a>石油工程计算机模拟技术重点实验室</a>
</li>
<li>
<a>思科网络技术学院教师培训中心</a>
</li>
</ul>
</div>
</div>
</div>
<div id="pag_foot" align=center>
<b>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</b>
</div>
</div>
</body>
</html>
二.CSS代码
#page{
margin:0px;padding:0px
}
#page_head{
background-color:white;
height:113px;width:100%;
margin:auto;
}
#page_body{
height:900px;width:975px;
margin:auto;margin-top:10px;
}
#pag_foot{
background-color:#224b77;
height:60px;
margin:auto;line-height:60px;
text-align:center;font-size:13px;color:#fff;
}
#logo{
}
#leader{
background-color:#0b6cb8;
height:50px;width:975px;
margin:auto;
}
#img_welcome{
margin:auto;text-align:center;padding-top:0px;
}
#link{
padding-left:28px;
padding-top:0px;
font-size:16px;color:#fff;
}
#mainmenu{
list-style-type:none;
float:left;
height:50px;margin: 0px;
text-align:center;
line-height:30px;
}
#leftli{
width:64%;float:left;height:100%;
background-color:white;
}
#rightli{
width:34%;float:right;height:100%;
background-color:white;
}
#topli{
height:35px;
background-color:#dddddd;
}
#topli-leftpart{
float:left;line-height:35px;
width:80px;height:100%;
background-color:#0b6cb8;
text-align:center;color:#fff;
}
#topli-rightpart{
float:right;line-height:30px;
width:40px;height:100%;
}
#downimg{
float:left;
width:50%;
padding-top:10px
}
#leftfloat{
float:left;
}
#grey{
color:grey;
}
#blue{
color:blue;
}
ul {list-style-type:square;color:grey;font-size:13px;padding-left:15px}
三.效果如下
四.网盘
链接：https://pan.baidu.com/s/15gtX7vBDBhLzIL9Fg8wJCg
提取码：ghhc