WEB之静态网页（模仿昆工主页）

网站主页

仿照昆工主页 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文件，本来想每个样式分别做的，后来代码多了，就乱了。

WEB之静态网页（模仿昆工主页）

网站主页

1.页面分区

2.html代码

3. css代码

4. 结果动画

5. 总结

猜你喜欢