用HTML+CSS编写一个计科院网站首页的静态网页
地址
链接: https://pan.baidu.com/s/1oOESSqzWVA2VaPoOqDhrjA 提取码: wi2q 复制这段内容后打开百度网盘手机App，操作更方便哦
截图
部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>西南石油大学 - 计算机科学学院</title>
<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="css/_sitegray_d.css">
<link rel="stylesheet" type="text/css" href="css/index.vsb.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".mainmenu dl").hide();
$("li.mainmenu").hover(function() {
$(this).find("dl").stop(true, true);
$(this).find("dl").slideDown();
}, function() {
$(this).find("dl").stop(true, true);
$(this).find("dl").slideUp();
});
})
</script>
</head>
<body style="position: relative">
<div class="topWrap clearfix">
<div style="width: 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>
<input type="text" value="请输入关键字搜索" name="showkeycode" class="search_text" id="showkeycode192730_2" />
<div class="fdj fr">
<input type="submit" class="button" value="">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="navWrap clearfix" style="width: 974px">
<div class="nav">
<ul>
<li><a class="link" href="index.htm">网站首页</a></li>
<li class="mainmenu"><a class="link" href="">学院概况</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">学院简介</a>
</dd>
<dd>
<a href="">学院领导</a>
</dd>
<dd>
<a href="">组织机构</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">本科生教育</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">计算机科学与技术专业</a>
</dd>
<dd>
<a href="">软件工程专业</a>
</dd>
<dd>
<a href="">网络工程专业</a>
</dd>
<dd>
<a href="">物联网工程专业</a>
</dd>
<dd>
<a href="">信息管理与信息系统专业</a>
</dd>
<dd>
<a href="">网络空间安全专业</a>
</dd>
<dd>
<a href="">数据科学与大数据技术专业</a>
</dd>
<dd>
<a href="">对外人才合作培养项目</a>
</dd>
<dd>
<a href="">考试信息</a>
</dd>
<dd>
<a href="">选课重修信息</a>
</dd>
<dd>
<a href="">通知公告</a>
</dd>
<dd>
<a href="">资料下载</a>
</dd>
<dd>
<a href="">公选课教师视频</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">研究生教育</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">招生简章</a>
</dd>
<dd>
<a href="">计算机科学与技术一级学科</a>
</dd>
<dd>
<a href="">软件工程一级学科</a>
</dd>
<dd>
<a href="">网络空间安全一级学科</a>
</dd>
<dd>
<a href="">研究生导师</a>
</dd>
<dd>
<a href="">研究生奖助体系</a>
</dd>
<dd>
<a href="">通知公告</a>
</dd>
<dd>
<a href="">资料下载</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">师资队伍</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">教授</a>
</dd>
<dd>
<a href="">副教授</a>
</dd>
<dd>
<a href="">讲师</a>
</dd>
<dd>
<a href="">实验人员</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">科学研究</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">科研团队</a>
</dd>
<dd>
<a href="">科研平台</a>
</dd>
<dd>
<a href="kxyj/kycg.htm">科研成果</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">学生工作</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">工作动态</a>
</dd>
<dd>
<a href="">通知公告</a>
</dd>
<dd>
<a href="">课外创新实践</a>
</dd>
<dd>
<a href="">毕业生就业</a>
</dd>
<dd>
<a href="">心灵之窗</a>
</dd>
<dd>
<a href="">青春风采</a>
</dd>
<dd>
<a href="">资料下载</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">招生工作</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">学院介绍</a>
</dd>
<dd>
<a href="">毕业生就业去向</a>
</dd>
<dd>
<a href="">优秀毕业生简介</a>
</dd>
<dd>
<a href="">学生获奖</a>
</dd>
<dd>
<a href="">精英校友介绍</a>
</dd>
<dd>
<a href="">招生工作宣传报道</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">实验中心</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">中心简介</a>
</dd>
<dd>
<a href="">实验分室</a>
</dd>
<dd>
<a href="">规章制度</a>
</dd>
<dd>
<a href="">资料下载</a>
</dd>
<dd>
<a href="">开放预约</a>
</dd>
</dl></li>
<li class="mainmenu"><a class="link" href="">党建之窗</a> <!--如果是导航字数很多，则加上 class="chang"，否则去掉即可-->
<dl>
<dd>
<a href="">党建动态</a>
</dd>
<dd>
<a href="">学习园地</a>
</dd>
<dd>
<a href="">党务政务公开</a>
</dd>
<dd>
<a href="">资料下载</a>
</dd>
</dl></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">
<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="img/welcome.jpg" /></a></li>
</ul>
</div>
<a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a>
</div>
</div>
</div>
</div>
</div>
<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="img/more.png"></a></span>
</div>
<div class="newBox">
<!--新闻信息-->
<div class="new_pic new_pic1">
<table cellspacing="0" cellpadding="0" border="0" style="padding: 0px margin:0px; border: 0px">
<tr>
<td>
<div style="OVERFLOW: hidden; height: 174px; width: 310px">
<div id="u_u4_div" align="center"
style="padding: 0px; margin: 0px; border: 0px solid black; background: url(img/news.jpg) no-repeat; background-size: 100%; height: 174px; width: 310px">
</div>
<div
style="filter: alpha(style = 1, opacity = 10, finishOpacity = 80); width: 310px; height: 19px; text-align: right; top: -19px; position: relative; padding: 0px; margin: 0px; border: 0px;">
</div>
</div>
</td>
</tr>
<tr>
<td height="25">
<div align="center" style="overflow: hidden; text-overflow: ellipsis; height: 25px; width: 310px;">
<a target="_blank" class="titlestyle192939" id="u_u4_newstitle"></a>
</div>
</td>
</tr>
</table>
</div>
<div class="new_list new_list3">
<ul class="dynamic_list fr">
<LI><A href=""><SPAN>[02-01]</SPAN><em>计算机科学学院举办2019年寒假留校学生新春</em></A></LI>
<LI><A href=""><SPAN>[03-15]</SPAN><em>学院召开教职工大会学习传达中层干部大会精</em></A></LI>
<LI><A href=""><SPAN>[03-12]</SPAN><em>计科院工会组织学院女教职工庆祝第109个“</em></A></LI>
<LI><A href=""><SPAN>[03-05]</SPAN><em>学术讲座——人工智能改变我们的未来生活</em></A></LI>
<LI><A href=""><SPAN>[01-21]</SPAN><em>计算机科学学院各年级辅导员集中走访学生寝</em></A></LI>
<LI><A href=""><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="img/more.png"></a></span>
</div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1" style="padding-top: 10px;">
<li><a href="" title="人工智能改变我们的未来生活">人工智能改变我们的未来生活</a></li>
<li><a href="" title="计算时代的虚假信息传播">计算时代的虚假信息传播</a></li>
<li><a href="" title="人工智能+：视界充满AI">人工智能+：视界充满AI</a></li>
<li><a href="" title="零行列式策略及其网络演化动力学">零行列式策略及其网络演化动力学</a></li>
<li><a href="" title="视频遇上云服务">视频遇上云服务</a></li>
<li><a href="" 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="img/more.png"></a></span>
</div>
<div class="newBox newBoxe">
<div class="new_list new_listd">
<h3>
<a href="">计算机科学学院举办2019年寒假留校学生新春团拜会</a>
</h3>
<ul class="dynamic_list dynamic_listh">
<li><a href=""><span>03/15</span><em>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</em></a></li>
<li><a href=""><span>03/12</span><em>计科院工会组织学院女教职工庆祝第109个“三八妇女节”</em></a></li>
<li><a href=""><span>03/05</span><em>学术讲座——人工智能改变我们的未来生活</em></a></li>
<li><a href=""><span>01/21</span><em>计算机科学学院各年级辅导员集中走访学生寝室</em></a></li>
<li><a href=""><span>01/14</span><em>学院召开2018年度领导班子民主生活会</em></a></li>
<li><a href=""><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="img/more.png"></a></span>
</div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1" style="padding-top: 10px;">
<li><a href="" title="学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作">学院召开教职工大会学习传达中层干部大...</a></li>
<li><a href="" title="学院召开2018年领导班子民主生活会">学院召开2018年领导班子民主生活会</a></li>
<li><a href="" title="刘翔同志任计算机科学学院党委副书记、纪委书记">刘翔同志任计算机科学学院党委副书记、...</a></li>
<li><a href="" title="学院党委组织师生收看庆祝改革开放40周年大会">学院党委组织师生收看庆祝改革开放40周...</a></li>
<li><a href="" title="【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会">【审核评估】学院召开本科教学工作审核...</a></li>
<li><a href="" title="【聚焦评估】学院召开本科教学工作审核评估工作会">【聚焦评估】学院召开本科教学工作审核...</a></li>
<li><a href="" title="学院党委开展迎校庆主题党日活动">学院党委开展迎校庆主题党日活动</a></li>
<li><a href="" 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="img/more.png"></a></span>
</div>
<div class="infor_list">
<ul class="dynamic_list dynamic_list1">
<li><a href="">自组团出访前公示信息表（彭博）</a></li>
<li><a href="">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li>
<li><a href="">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li>
<li><a href="">2018年秋季学期期末考试情况总结</a></li>
<li><a href="">计算机科学学院2018年度教职工考核优秀名单公示</a></li>
<li><a href="">国际学术会议（ICCIS2019）征稿通知</a></li>
<li><a href="">计算机科学学院领导班子2018年度民主生活会征求意见</a></li>
<li><a href="">关于表彰计算机科学学院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="" title="中美联合高性能和大数据计算实验室">中美联合高性能和大数据计算实验室</a></li>
<li><a href="" title="石油工程计算机模拟技术重点实验室">石油工程计算机模拟技术重点实验室</a></li>
<li><a href="" title="思科网络技术学院教师培训中心">思科网络技术学院教师培训中心</a></li>
</ul>
</div>
</div>
</div>
<!--广告-->
<!--foot-->
<div class="footWrap clearfix">
<div class="footDiv_one">
<div class="foot_one">
</div>
</div>
</div>
</div>
</body>
</html>
实现思路
1.在原网站中获取所需要的图片资源。
2.参考源代码实现。
