capstone训练营2017-12-11

最新推荐文章于 2017-12-22 10:40:23 发布

2506013878

最新推荐文章于 2017-12-22 10:40:23 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/mazhuang2506013878/article/details/78776222

版权

div容器的居中：margin:0px （距边距离）px;

练习网页html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="beijingdaxue.css">
</head>
<body>
<div class="page" id="page">
    <div class="header" id="header">
        <div class="firstheader" id="firstheader" style="background-color: #700005">
            <ul class="leftul">
                <li class="ulli"><a href="">学生</a></li>
                <li class="ulli"><a href="">教职工</a></li>
                <li class="ulli"><a href="">校友</a></li>
                <li class="ulli"><a href="">家长</a></li>
                <li class="ulli"><a href="">访客</a></li>
                <li class="ulli"><a href="">招聘</a></li>
                <li class="ulli"><a href="">捐赠</a></li>
            </ul>
            <ul class="rightul">
                <li class="ulli"><a href="">门户</a> </li>
                <li class="ulli"><a href="">网络</a> </li>
                <li class="ulli"><a href="">邮箱</a> </li>
                <li class="ulli"><a href="">BBS</a> </li>
                <li class="ulli"><a href="">图书馆</a> </li>
                <li class="ulli"><a href="">医学部</a> </li>
                <li class="ulli"><a href="">领导信箱</a> </li>
                <li class="ulli"><a href="">120周年校庆</a> </li>
                <li class="ulli"><a href="">English</a> </li>
                <li class="ulli"><img src="src/img"></li>
            </ul>
        </div>
        <div class="logo" id="logo"><img height="100%" width="100%" src="src/img/VQWHTH%7D40FXBX%7BGM_8UP_(J.png"></div>
        <div class="list" id="list"><ul>
            <li class="logoul"><a href="">北大概况</a> </li>
            <li class="logoul"><a href="">招生与资助</a> </li>
            <li class="logoul"><a href="">学院与联系</a> </li>
            <li class="logoul"><a href="">教育教学</a> </li>
            <li class="logoul"><a href="">科学研究</a> </li>
            <li class="logoul"><a href="">合作交流</a> </li>
            <li class="logoul"><a href="">校园生活</a> </li>
        </ul></div>
        <div class="photo" id="photo">
            <div class="img" id="first" style="z-index: 1"><img src="src/img/1-1.png"/></div><!-- 设置五张图片 -->
            <div class="img" id="second" style="z-index: 2"><img src="src/img/1-2.png"/></div>
            <div class="img" id="third" style="z-index: 3"><img src="src/img/1-3.png"/></div>
            <div class="img" id="fourth" style="z-index: 4"><img src="src/img/1-4.png"/></div>
            <div class="img" id="fifth" style="z-index: 5"><img src="src/img/20170830140741_777.jpg" height="264"
                                                                width="640"/></div>
        </div>
        <div id="login">
            <div id="logintitle">
                登录信息
            </div>
            <div id="name">
                <input type="text" placeholder="请输入用户名">
            </div>
            <div id="password">
                <input type="password" placeholder="请输入密码">
            </div>
            <div id="submit">
                <input type="submit" id="submitbutton" value="登录">
            </div>
        </div>
    </div>
    <div class="between" id="between">
        <div class="main" id="main"><h5>北大要闻</h5><hr class="line"/>
            <ul class="mainul">
                <li><img src="src/img/]XHL_WRCIDS3Z)WVR1H_8}0.png" height="83" width="148"/></li>
                <li><a href=""><p>asdasdasdasdasdasdasdasdsa<br>dsadasdasdas</p></a></li>
            </ul>
            <ul class="mainul">
                <li><a href=""><p>asdasdasdasdasdasdasdasdsa<br>dsadasdasdsad</p></a></li>
                <li><hr/></li>
                <li><a href=""><p>asdasdasdasdasdasdasdasds<br>adsadasdadsaasd</p></a></li>
                <li><hr/></li>
                <li><a href=""><p>asdasdasdasdasdasdasdasdsa<br>dsadasdadsadasda</p></a></li>
            </ul>
            <ul class="mainul">
                <li><a href=""><p>asdasdasdasdasdasdasdasdsad<br>sadasdadsda</p></a></li>
                <li><hr/></li>
                <li><a href=""><p>asdasdasdasdasdasdasdasds<br>adsadasdadsd</p></a></li>
                <li><hr/></li>
                <li><a href=""><p>asdasdasdasdasdasdasdasds<br>adsadasddasdas</p></a></li>
            </ul>
        </div>
    </div>
    <div class="footer" id="footer">
        <div class="firstfoot" id="firstfoot">
            <div class="foootermain">
                <ul class="footul">
                    <li class="footlist"><a href="">北大概况</a> </li>
                    <li class="footlist"><a href="">院系设置</a> </li>
                    <li class="footlist"><a href="">科学研究</a> </li>
                    <li class="footlist"><a href="">校园生活</a> </li>
                </ul>
                <ul class="footul">
                    <li class="footlist"><a href="">招生资助</a> </li>
                    <li class="footlist"><a href="">教育教学</a> </li>
                    <li class="footlist"><a href="">合作交流</a> </li>
                    <li class="footlist"><a href="">观光访问</a> </li>
                </ul>
            </div>
            <div class="footp"><img src="src/img/1A~~`~%JYSL}2K2)){DB41U.png" height="128" width="36"/></div>
            <div class="footp"><img src="src/img/]XHL_WRCIDS3Z)WVR1H_8}0.png" height="83" width="148"/></div>
            <div class="footp"><img src="src/img/1A~~`~%JYSL}2K2)){DB41U.png" height="128" width="36"/></div>
            <div class="footp"><img src="src/img/TEGEX%U_SUWKM6Z~CI_]~EF.png" height="121" width="193"/></div>
        </div>
        <div class="foot" id="foot"><p><a href="">版权所有&copy;北京大学</a>  |  
            <a href="">地址：北京海淀区颐和园路5号</a>  |  
            <a href="">邮编：100871</a>  |  
            <a href="">邮箱：12313131@123.com</a>  |  
            <a href="">京IP123123131</a>  |  
            <a href="">京公网安备1231231</a> </p></div>
    </div>
</div>
</body>
<script type="text/javascript">
    function imgAutoChange() {                  //创建方法imgAutoChange
        var imgClass = document.getElementsByClassName("img");          //获取div元素
        var imgClassLength = imgClass.length;                           //遍历div数量
        for (var i = 0; i < imgClassLength; i++) {                      //循环
            var zIndex = parseInt(imgClass[i].style.zIndex,10);         //parseInt(字符串，进制数)
            zIndex=zIndex+1;
            if (zIndex > imgClassLength) {                              //判断
                zIndex = 1;
            }
            imgClass[i].style.zIndex= zIndex;                           //把新的值返回给div的属性
        }
    }

    window.setInterval(imgAutoChange,3000);           //设置指定时间段调用方法 window.setInterval(方法名，时间单位毫秒)

</script>
</html>

网页的css

.page{
    width: 90%;
    padding-left: 5%;
}
a:link,a:visited{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
ul{
    list-style: none;
}
.firstheader{
    width: 100%;
    height: 30px;
    background:#700005 ;
    margin: 0;
    padding: 0;
}
.firstheader>ul{
    margin: 1px;
}
.ulli>a{
    color: white;
}
.ulli{
    float: left;
    margin-top: 0px;
    padding: 0px 3px;
}
.leftul{
    float: left;
}
.rightul{
    float: right;
}
.logo{
    margin: 0;
    float: right;
    clear: both;
    height: 100%;
    width: 100%;
}
.logoul{
    float: left;
    padding: 5px 30px;
}
.list{
    padding:0px 70px;
    text-align: center;
    clear: both;
}
.logoul>a{
    color: black;
}
.photo{
    height: 170px;
    width: 100%;
    clear: both;
}
.between{
    float: left;
    clear: both;
}
.main{
    padding: 0px 150px;
}
.mainul{
    width: 27%;
    float: left;
    padding-top:10px ;
    padding-bottom: 20px;
}
.mainul>li>a{
    color: black;
}
.mainul>li{
    padding-top: 20px;
}
h5{
    padding: 2px 0px;
}

.firstfoot{
    padding: 20px 100px;
    background-color: #550A0A;
    height: 150px;
    margin: 0;
    padding: 0;
}
.footul{
    padding: 20px;
    float: left;
}
.footul>li>a{
    color: white;
}
.footer{
    margin: 0;
    width: 100%;
    float: left;
    clear: both;
}
.foot{
    padding: 2px 0px;
    width: 100%;
    height: 30px;
    background-color: black;
}
.foot>p>a{
    color: white;
}
.foot>p{
    padding: 0px 40px;
    color: white;
}
.footp{
    padding-top: 20px;
    float: left;
}
.img{                       /* 设置div定位 */
    position: absolute;
    height: 300px;
    width: 70%;
}
.img>img {              /* 设置图片填充div */
    width: 100%;
    height: 100%;
}
#login{
    float: right;
    border-radius: 30px;
    width: 200px;
    border: 1px solid black;
    padding: 10px 20px;
}
#logintitle,#name,#password,#submit{
    text-align: center;
    font-size: 15px;
    color: cyan;
    padding: 5px 0 5px 0;
}
#submitbutton{
    background-color: cyan;
    border: 0px;
    border-radius: 20px;
    padding: 0px 50px;

}
*{
    margin: 0;
}