用HTML+CSS编写一个计科院网站首页的静态网页
利用浏览器查看网页源代码，并将一些图片分门别类的下载到本地，然后删除javascript脚本。
项目的文件目录
最终效果
<!DOCTYPE html>
<html>
<head>
<title>西南石油大学 - 计算机科学学院</title><META Name="keywords" Content="西南石油大学,计算机科学学院" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/publice.css">
<link rel="stylesheet" type="text/css" href="index.vsb.css" />
</head>
<body style="position: relative">
<!--top s--><a href="http://webscan.360.cn/index/checkwebsite/url/scss.bupt.edu.cn" name="d1aa96141abaa877e8ad955b964f8fa6"></a>
<div class="topWrap clearfix">
<div style="100%;height:112px;background:url(img/top-bg.jpg) no-repeat center top">
<div class="topDiv">
<div class="topR fr"><div class="topR_t fr" style="color:#fff;">
</div>
<div class="Search">
<form action="ssjg.jsp?wbtreeid=1033" method="post" id="au1a" name="au1a" onsubmit="return _nl_ys_check_2()">
<input type="hidden" id="lucenenewssearchkey192730" name="lucenenewssearchkey" value=""><input type="hidden" id="_lucenesearchtype192730" name="_lucenesearchtype" value="1"><input type="hidden" id="searchScope192730" name="searchScope" value="0">
<input type="text" value="请输入关键字搜索" name="showkeycode" class="search_text" onfocus="test3()" onblur="test4()" id="showkeycode192730_2" />
<div class="fdj fr"> <input type="submit" class="button pngFix" value="" style="cursor: hand"></div>
</form>
</div>
</div>
</div>
</div>
</div><!--nav--><div class="navWrap clearfix" style=" 974px">
<div class="nav">
<ul>
<li>
<a class="link" href="index.htm">网站首页</a>
</li>
<li class="mainmenu">
<a class="link" href="xygk/xyjj.htm">学院概况</a>
</li>
<li class="mainmenu">
<a class="link" href="bksjy/jsjkxyjszy.htm">本科生教育</a>
</li>
<li class="mainmenu">
<a class="link" href="yjsjy/zsjz.htm">研究生教育</a>
</li>
<li class="mainmenu">
<a class="link" href="szdw/js.htm">师资队伍</a>
</li>
<li class="mainmenu">
<a class="link" href="kxyj/kytd.htm">科学研究</a>
</li>
<li class="mainmenu">
<a class="link" href="xsgz/gzdt.htm">学生工作</a>
</li>
<li class="mainmenu">
<a class="link" href="info/1189/4517.htm">招生工作</a>
</li>
<li class="mainmenu">
<a class="link" href="info/1183/2625.htm">实验中心</a>
</li>
<li class="mainmenu">
<a class="link" href="djzc/djdt.htm">党建之窗</a>
</li>
</ul>
</div>
</div>
<div class="vsb-box" style="margin-top:12px;">
<div class="vsb-container a" containerid="1" columns="6">
<div class="vsb-space bannerWrap clearfix" columns="6"><!--banner1--> <!--banner1-->
<div class="banner_one">
<div id="slideBox" class="slideBox">
<div class="hd">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="bd">
<ul>
<li><a href="info/1033/4634.htm" target="_blank"><img src="images/welcome.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!--main-->
<div class="vsb-container a" containerid="1" columns="6"><!--banner2--></div>
<div class="vsb-container a" containerid="1" columns="6"><!--banner3--></div>
</div>
<div></div><!--container-->
<div class="vsb-box">
<div class="vsb-container container clearfix" containerid="2" columns="6">
<!--新闻信息-->
<div class="vsb-space new_inforBox new_inforBox2 fl" columns="4">
<div class="dynamic">
<h2>图片新闻</h2><span><a href="index/xwsd.htm"><img src="temp/more.png"></a></span>
</div>
<div class="newBox">
<!--新闻信息-->
<div class="new_pic new_pic1">
<LINK href="/system/resource/style/component/news/list/imagechangenews.css" type="text/css" rel="stylesheet">
<table cellspacing="0" cellpadding="0" border="0" style="padding:0px margin:0px; border:0px">
<tr><td>
<div style="OVERFLOW: hidden;height:174px;310px">
<div id="u_u4_div" align="center" style="padding:0px;margin:0px;border:0px solid black;background-color:#000000;FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2.0,transition=23);height:174px;310px">
<div id="u_u4_imgdiv" style="padding:0px;border:0px;"><a id="u_u4_url" target="_blank"><img id="u_u4_pic" border="0" width="310" height="174" src="temp/pic1.jpg"></a></div>
</div>
<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);310px;height:19px;text-align:right;top:-19px;position:relative;padding:0px;margin:0px;border:0px;">
<a href="javascript:u_u4_icn.changeimg(0)" ; id="u_u4_selectNode0" class="imagechangenews_pnode" target="_self">1</a><a href="javascript:u_u4_icn.changeimg(1)" ; id="u_u4_selectNode1" class="imagechangenews_pnode" target="_self">2</a><a href="javascript:u_u4_icn.changeimg(2)" ; id="u_u4_selectNode2" class="imagechangenews_pnode" target="_self">3</a><a href="javascript:u_u4_icn.changeimg(3)" ; id="u_u4_selectNode3" class="imagechangenews_pnode" target="_self">4</a><a href="javascript:u_u4_icn.changeimg(4)" ; id="u_u4_selectNode4" class="imagechangenews_pnode" target="_self">5</a><a href="javascript:u_u4_icn.changeimg(5)" ; id="u_u4_selectNode5" class="imagechangenews_pnode" target="_self">6</a>
</div></div></td></tr>
<tr><td height="25">
<div align="center" style="overflow:hidden;text-overflow:ellipsis;height:25px;310px;"><a target="_blank" class="titlestyle192939" id="u_u4_newstitle"></a></div>
</td></tr>
<div align="left" display="none" style="overflow:hidden;text-overflow:ellipsis;height:0px;310px;padding-left:2px;padding-right:2px"><a target="_blank" class="summarystyle192939" id="u_u4_newssummary"></a></div>
</table></div>
<div class="new_list new_list3"><ul class="dynamic_list fr">
<LI><A href="info/1045/4613.htm" title="计算机科学学院举办2019年寒假留校学生新春团拜会"><SPAN>[02-01]</SPAN><em>计算机科学学院举办2019年寒假留校学生新春</em></A></LI>
<LI><A href="info/1045/4650.htm" title="学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作"><SPAN>[03-15]</SPAN><em>学院召开教职工大会学习传达中层干部大会精</em></A></LI>
<LI><A href="info/1045/4643.htm" title="计科院工会组织学院女教职工庆祝第109个“三八妇女节”"><SPAN>[03-12]</SPAN><em>计科院工会组织学院女教职工庆祝第109个“</em></A></LI>
<LI><A href="info/1045/4633.htm" title="学术讲座——人工智能改变我们的未来生活"><SPAN>[03-05]</SPAN><em>学术讲座——人工智能改变我们的未来生活</em></A></LI>
<LI><A href="info/1045/4603.htm" title="计算机科学学院各年级辅导员集中走访学生寝室"><SPAN>[01-21]</SPAN><em>计算机科学学院各年级辅导员集中走访学生寝</em></A></LI>
<LI><A href="info/1045/4592.htm" title="学院召开2018年度领导班子民主生活会"><SPAN>[01-14]</SPAN><em>学院召开2018年度领导班子民主生活会</em></A></LI>
</UL>
</div>
</div>
</div><!--通知公告-->
<div class="vsb-space informBox informBox3 fl" columns="2">
<div class="dynamic cleafix">
<h2>学术交流</h2><span><a href="kxyj/kytd.htm"><img src="temp/more.png"></a></span></div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1" style="padding-top:10px;">
<li> <a href="info/1076/4624.htm" title="人工智能改变我们的未来生活">人工智能改变我们的未来生活</a></li>
<li> <a href="info/1076/4537.htm" title="计算时代的虚假信息传播">计算时代的虚假信息传播</a></li>
<li> <a href="info/1076/4483.htm" title="人工智能+：视界充满AI">人工智能+：视界充满AI</a></li>
<li> <a href="info/1076/4397.htm" title="零行列式策略及其网络演化动力学">零行列式策略及其网络演化动力学</a></li>
<li> <a href="info/1076/4388.htm" title="视频遇上云服务">视频遇上云服务</a></li>
<li> <a href="info/1076/4380.htm" title="计科院关于举行2018年校庆论文报告会的通知">计科院关于举行2018年校庆论文报告会的...</a></li>
</ul>
</div>
</div>
</div>
<div class="vsb-container container clearfix" containerid="2" columns="6"><!--精品课程--></div><!--新闻信息-->
<div class="vsb-container container clearfix" containerid="2" columns="6"><!--近期学术讲座--></div>
<div class="vsb-container container clearfix" containerid="2" columns="6">
<!--新闻信息4-->
<div class="vsb-space new_inforBox new_inforBoxa new_inforBoxa1 fl" columns="4">
<div class="dynamic dynamicf">
<h2>新闻速递</h2><span><a href="index/xwsd.htm"><img src="temp/more.png"></a></span></div>
<div class="newBox newBoxe">
<div class="new_list new_listd">
<h3><a href="info/1045/4613.htm">计算机科学学院举办2019年寒假留校学生新春团拜会</a></h3>
<p>在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<span><a href="info/1045/4613.htm">详细信息</a></span>]</p>
<ul class="dynamic_list dynamic_listh">
<li><a href="info/1045/4650.htm"><span>03/15</span><em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em></a></li>
<li><a href="info/1045/4643.htm"><span>03/12</span><em>计科院工会组织学院女教职工庆祝第109个“三八妇女节”</em></a></li>
<li><a href="info/1045/4633.htm"><span>03/05</span><em>学术讲座——人工智能改变我们的未来生活</em></a></li>
<li><a href="info/1045/4603.htm"><span>01/21</span><em>计算机科学学院各年级辅导员集中走访学生寝室</em></a></li>
<li><a href="info/1045/4592.htm"><span>01/14</span><em>学院召开2018年度领导班子民主生活会</em></a></li>
<li><a href="info/1045/4589.htm"><span>01/10</span><em>计科院与川庆安检院技术交流大会</em></a></li>
</ul>
</div>
</div>
</div><!--中国银行-->
<div class="vsb-space informBox informBox3 fl" columns="2"><div class="dynamic cleafix">
<h2>党建动态</h2><span><a href="djzc/djdt.htm"><img src="temp/more.png"></a></span></div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1" style="padding-top:10px;">
<li> <a href="info/1082/4651.htm" title="学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作">学院召开教职工大会学习传达中层干部大...</a></li>
<li> <a href="info/1082/4593.htm" title="学院召开2018年领导班子民主生活会">学院召开2018年领导班子民主生活会</a></li>
<li> <a href="info/1082/4520.htm" title="刘翔同志任计算机科学学院党委副书记、纪委书记">刘翔同志任计算机科学学院党委副书记、...</a></li>
<li> <a href="info/1082/4512.htm" title="学院党委组织师生收看庆祝改革开放40周年大会">学院党委组织师生收看庆祝改革开放40周...</a></li>
<li> <a href="info/1082/4464.htm" title="【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会">【审核评估】学院召开本科教学工作审核...</a></li>
<li> <a href="info/1082/4424.htm" title="【聚焦评估】学院召开本科教学工作审核评估工作会">【聚焦评估】学院召开本科教学工作审核...</a></li>
<li> <a href="info/1082/4471.htm" title="学院党委开展迎校庆主题党日活动">学院党委开展迎校庆主题党日活动</a></li>
<li> <a href="info/1082/4376.htm" title="学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会">学院党委组织收看2018年全国科学道德和...</a></li>
</ul>
</div>
</div>
</div><!--广告-->
<div class="vsb-container container clearfix" containerid="2" columns="6">
<!--新闻信息4-->
<div class="vsb-space new_inforBox new_inforBoxa new_inforBoxa1 fl" columns="4">
<div class="dynamic cleafix">
<h2>通知公告</h2><span><a href="index/tzgg.htm"><img src="temp/more.png"></a></span></div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1">
<li> <a href="info/1055/4638.htm">自组团出访前公示信息表（彭博）</a></li>
<li> <a href="info/1055/4627.htm">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li>
<li> <a href="info/1055/4626.htm">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li>
<li> <a href="info/1055/4600.htm">2018年秋季学期期末考试情况总结</a></li>
<li> <a href="info/1055/4597.htm">计算机科学学院2018年度教职工考核优秀名单公示</a></li>
<li> <a href="info/1055/4588.htm">国际学术会议（ICCIS2019）征稿通知</a></li>
<li> <a href="info/1055/4584.htm">计算机科学学院领导班子2018年度民主生活会征求意见</a></li>
<li> <a href="info/1055/4578.htm">关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a></li>
</ul>
</div>
</div>
<div class="vsb-space informBox informBox3 fl" columns="2">
<div class="dynamic cleafix">
<h2>专题列表</h2></div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1">
<li> <a href="info/1173/2003.htm" title="中美联合高性能和大数据计算实验室">中美联合高性能和大数据计算实验室</a></li>
<li> <a href="info/1173/2004.htm" title="石油工程计算机模拟技术重点实验室">石油工程计算机模拟技术重点实验室</a></li>
<li> <a href="info/1173/2005.htm" title="思科网络技术学院教师培训中心">思科网络技术学院教师培训中心</a></li>
</ul>
</div>
</div>
</div><!--广告-->
<!--foot-->
<div class="footWrap clearfix">
<div class="footDiv_one">
<div class="foot_one">
<p><div>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</div></p>
</div>
</div>
</div>
</div>
</body>
</html>
百度云
链接: https://pan.baidu.com/s/1ex73peJAUnq28DUeiWU3OA 提取码: ft62