一.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?
