一.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/1got-kqJkmgyob7ytKs4RlQ
提取码: mg8g