网站主页
| 仿照昆工主页 http://www.kmust.edu.cn/ 做一个静态WEB页面 |
1.页面分区
2.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>昆明理工大学：根植红土，情系有色，坚韧不拔，赤诚报国</title>
<link rel="stylesheet" href="km.css"/>
<script>
//页面加载后
window.onload = function(){
lunbo();
}
//轮播
var id;
var n = 0;//轮播次数
function lunbo(){
//启动定时器
id = setInterval(function(){
n++;
//获取所有图片
var imgs = document.getElementById("image").getElementsByTagName("img");
//将所有的图片隐藏
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide";
}
//将下一张图片显示
var index = n%imgs.length;
imgs[index].className = "show";
},2000);
}
function stop(){
clearInterval(id);
}
</script>
</head>
<body>
<!-- logo区 -->
<div class="logo">
<div class="l1">
<a href="#">中文版</a>
|
<a href="http://english.kmust.edu.cn/">English version</a>
<form id="search" action="http://www.kmust.edu.cn/html/search.html" method="post">
<input type="text" value="请输入关键字" style="width:120px;" />
<input type="button" value="搜索" style="width:50px;"/>
</form>
</div>
</div>
<!-- 菜单区 -->
<div class="menu">
<div class="m1">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">学校概况</a>
</li>
<li>
<a href="#">教育科研</a>
</li>
<li>
<a href="#">人才培养</a>
</li>
<li>
<a href="#">网上学习</a>
</li>
<li>
<a href="#">信息服务</a>
</li>
<li>
<a href="#">网络服务</a>
</li>
<li>
<a href="#">校园文化</a>
</li>
<li>
<a href="#">校庆宣传片</a>
</li>
</ul>
</div>
<div class="m2">
<p>
<script language=JavaScript>
var d1 = new Date();
var y = d1.getFullYear();
var m = d1.getMonth();
var d = d1.getDate();
var today = y+"年"+(m+1)+"月"+d+"日";
var weekday=new Array(7);
weekday[0]="星期天";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
document.write("今天是"+today+" "+weekday[d1.getDay()]);
</script>
</p>
</div>
</div>
<!-- 核心区 -->
<div class="core1">
<div class="d1">
<div class="e1">
<div class="g1">
<a href="#">更多>>></a>
</div>
<div class="g2">
<p style="font-size:20px;"><b>校园新闻</b></p>
</div>
</div>
<div class="e2">
<ul>
<li><a href="#">昆明理工大学2017年协议供货竞价采购公告...</a>2017-07-08</li>
<li><a href="#">昆明理工大学自行采购项目询价函(编号：2017...</a></li>
<li><a href="#">昆明理工大学2017-2019年度建设项目招标代理...</a></li>
<li><a href="#">昆明理工大学附属中小学图书采购项目...</a></li>
<li><a href="#">关于暂停校园网及信息系统服务的通知</a></li>
<li><a href="#">昆明理工大学2016-2017学年“国家奖学金”...</a></li>
<li><a href="#">昆明理工大学2017年协议供货竞价采购公告...</a>2017-07-08</li>
<li><a href="#">昆明理工大学自行采购项目询价函(编号：2017...</a></li>
<li><a href="#">昆明理工大学2017-2019年度建设项目招标代理...</a></li>
<li><a href="#">昆明理工大学附属中小学图书采购项目...</a></li>
<li><a href="#">关于暂停校园网及信息系统服务的通知</a></li>
<li><a href="#">昆明理工大学2016-2017学年“国家奖学金”...</a></li>
<li><a href="#">昆明理工大学2017年协议供货竞价采购公告...</a>2017-07-08</li>
<li><a href="#">昆明理工大学自行采购项目询价函(编号：2017...</a></li>
<li><a href="#">昆明理工大学2017-2019年度建设项目招标代理...</a></li>
</ul>
</div>
</div>
<div class="d2">
<div class="e3">
<div onmouseover="stop();" onmouseout="lunbo();" id="image">
<img src="../img/w.jpg"/>
<img src="../img/2.jpg" class="hide"/>
<img src="../img/3.jpg" class="hide"/>
<img src="../img/4.jpg" class="hide"/>
<img src="../img/5.jpg" class="hide"/>
</div>
</div>
<div class="e4">
<div class="f1">
<div class="g1">
<a href="#">更多>>></a>
</div>
<div class="g2">
<p style="font-size:20px;"><b>通知通告</b></p>
</div>
</div>
<div class="f2">
<ul>
<li><a href="#">昆明理工大学2017年协议供货竞价采购公告...</a>2017-07-08</li>
<li><a href="#">昆明理工大学自行采购项目询价函(编号：2017...</a></li>
<li><a href="#">昆明理工大学2017-2019年度建设项目招标代理...</a></li>
<li><a href="#">昆明理工大学附属中小学图书采购项目...</a></li>
<li><a href="#">关于暂停校园网及信息系统服务的通知</a></li>
<li><a href="#">昆明理工大学2016-2017学年“国家奖学金”...</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="core2"></div>
<div class="core3">
<div class="d3">
<div class="e7">
<ul>
<li>媒体昆工</li>
<li>校园风光</li>
<li>廉政之窗</li>
<li>干部在线学习</li>
<li>专题网站</li>
<li>审核评估</li>
<li>《榜样》观看</li>
</ul>
</div>
<div class="e8">
<ul>
<li><a href="#">昆明理工大学2017年协议供货竞价采购公告...</a>2017-07-08</li>
<li><a href="#">昆明理工大学自行采购项目询价函(编号：2017...</a></li>
<li><a href="#">昆明理工大学2017-2019年度建设项目招标代理...</a></li>
<li><a href="#">昆明理工大学附属中小学图书采购项目...</a></li>
<li><a href="#">关于暂停校园网及信息系统服务的通知</a></li>
</ul>
</div>
</div>
<div class="d4">
<div class="e5">
<table>
<tr>
<td><input type="button" value="校友总会"></td>
<td><input type="button" value="书记校长邮箱"></td>
<td><input type="button" value="网络办公"></td>
<td><input type="button" value="质量工程"></td>
</tr>
<tr>
<td><input type="button" value="招生信息"></td>
<td><input type="button" value="信息门户"></td>
<td><input type="button" value="虚拟专用网"></td>
<td><input type="button" value="虚拟校园"></td>
</tr>
</table>
</div>
<div class="e6">
<div class="f3">
<form action="http://www.kmust.edu.cn/html/search.html" method="post">
<p>
用户名<input type="text" style="width:150px;height:20px;"/>
<select style="height:20px;">
<option value="0">@Kmust.edu.cn</option>
<option value="1">@qq.com</option>
</select>
</p>
<p>
密 码<input type="password" style="width:200px;height:20px;margin-left:7px;"/>
<input type="submit" value="邮箱登录" style="height:30px;background-color:#800000;"/>
</p>
</form>
</div>
</div>
</div>
</div>
<!-- 版权区 -->
<div class="copy">
<div class="top"></div>
<div>
<table>
<tbody>
<tr>
<td width="5%"><img src="../img/blue.png"/></td>
<td width="4%"><img src="../img/ba.png"/></td>
<td width="85%">
<p>版权所有©昆明理工大学 地址：云南省昆明市一二一大街文昌路68号 设计：昆明理工大学网页设计大赛获奖作品</p>
<p>滇ICP备05001246号 All Rights Reserved © Kunming University of Science and Technology <a href="#">返回首页</a></p>
</td>
<td width="6%"><img src="../img/g2.png"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
3. css代码
/*对网页做统一的设置*/
* {
padding: 0;
margin: 0;
}
/*给网页分区,设置每个区域的尺寸*/
.logo {
margin: 0 auto;
width: 960px;
height: 100px;
}
.l1 {
height:40px;
width: 210px;
float:right;
text-align:center;
margin-top: 30px;
}
.menu {
margin: 0 auto;
width: 960px;
height: 70px;
}
.core1 {
margin: 0 auto;
width: 960px;
height: 485px;
}
.d1 {
border-left:5px solid #c0c0c0;
width:538px;
height: 485px;
float:right;
}
.d2 {
width:420px;
height: 485px;
}
.e1 {
width:538px;
height: 40px;
}
.e2 {
width:538px;
height: 432px;
margin-top: 10px;
}
.e3 {
width:410px;
height: 256px;
}
.e4 {
width:410px;
height: 230px;
}
.f1 {
width:410px;
height: 40px;
}
.g1 {
width:200px;
height: 40px;
float:right;
}
.g2 {
width:300px;
height: 40px;
border-bottom: 3px solid #800000;
margin-left: 5px;
}
.f2 {
margin-top: 10px;
width:410px;
height: 190px;
}
.core2 {
margin: 0 auto;
width: 960px;
height: 5px;
}
.core3 {
margin: 0 auto;
width: 960px;
height: 210px;
}
.d3 {
width:608px;
height: 210px;
float:right;
}
.e7 {
margin-top: 8px;
width:608px;
background-color: #c0c0c0;
}
.e8 {
margin-top: 8px;
}
.d4 {
width:350px;
height: 210px;
}
.e6 {
border: 2px solid #808080;
width:335px;
height: 100px;
margin-top: 30px;
margin-left:5px;
}
.f3 {
margin-top: 20px;
}
.copy {
margin: 0 auto;
width: 960px;
height: 100px;
}
.top {
height: 15px;
width: 960px;
background-color: #800000;
}
.m1 {
margin: 0 auto;
width: 960px;
height: 40px;
}
.m2 {
margin: 0 auto;
width: 960px;
height: 30px;
}
/*设置背景*/
body {
background-color:#0EA8D8;
}
.logo {
background-image:url(../img/km.jpg);
}
.m1 {
background-color: #800000;
}
.m2{
background-color: #ffffff;
}
.core1 {
background-color: #ffffff;
}
.core2 {
background-color: #c0c0c0;
}
.core3 {
background-color: #ffffff;
}
.copy {
background-color: #c0c0c0;
}
/*设置文本样式*/
body {
font-family:"微软雅黑","文泉驿正黑","黑体";
font-size: 14px;
}
.g1 {
text-align:right;
line-height: 40px;
}
.g1 a {
margin-right:5px;
color:#800000;
text-decoration: none;
}
.g2 {
line-height: 40px;
}
.g2 p {
margin-left:10px;
color: #800000;
}
/*设置版本按钮位置*/
.logo {
text-align:right;
}
.logo a {
margin-right:5px;
color: #fff;
text-decoration: none;
}
.logo a:hover{
color:#800000;
}
.copy p {
color: #000000;
text-align: center;
line-height: 25px;
}
/*li样式设置*/
.menu ul {
width: 960px;
height: 40px;
margin: 0 auto;
list-style-type: none;
}
.menu li {
width: 105px;
height: 32px;
margin: 3px 0px;
float: left;
line-height:32px;
text-align:center;
}
.menu li:hover {
background-color:#bf0000;
}
.m1 li a {
color: #fff;
text-decoration: none;
}
body li {
font-family:"微软雅黑","文泉驿正黑","黑体";
font-size: 20px;
}
.m2 p {
line-height:28px;
text-align:left;
margin-left:10px;
}
.f2 li {
margin-left: 10px;
list-style-type:none;
font-size: 14px;
height: 30px;
text-align:left;
}
.f2 li a {
color: #000000;
text-decoration: none;
}
.f2 li a:hover {
color: #800000;
}
.e2 li {
margin-left: 10px;
list-style-type:none;
font-size: 14px;
height: 30px;
text-align:left;
}
.e2 li a {
color: #000000;
text-decoration: none;
}
.e2 li a:hover {
color: #800000;
}
.e7 ul {
width: 608px;
height: 40px;
margin: 0 auto;
list-style-type: none;
}
.e7 li {
width: 86px;
height: 32px;
margin: 3px 0px;
float: left;
line-height:32px;
text-align:center;
font-size: 14px;
}
.e7 li:hover {
background-color:#bf0000;
}
.e8 li {
margin-left: 10px;
list-style-type:none;
font-size: 14px;
height: 30px;
text-align:left;
}
.e8 li a {
color: #000000;
text-decoration: none;
}
.e8 li a:hover {
color: #800000;
}
/* table样式*/
.e5 input {
width: 84px;
height: 30px;
font-size: 13px;
}
.e5 input:hover {
cursor:pointer;
background-color:#bf0000;
}
/*图片轮播*/
.show {
display: inline-block;
}
.hide {
display: none;
}
4. 结果动画
5. 总结
- 根据网页分区，一个一个区完成。
- 用了html、css、js
- 实现了超链接、表单提交、图片轮播等。
- 页面里的大多超链接我都链接到了本页，没分别去做，英文版直接连接到了学校英文版。
- 最后感觉自己的写的代码很乱，尤其css文件，本来想每个样式分别做的，后来代码多了，就乱了。
扫一扫
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
