作业要求1

京东首页轮播图，效果如下

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JD轮播图</title>

    <style>
        .img_border {
            width: 790px;
            height: 340px;
            border: 1px solid blue;
            margin: 0 auto;
            position: relative;
        }

        ul.img{
            list-style: none;
            padding: 0;
        }

        ul li{
            position: absolute;
            left: 0;
            top:0;
        }

        .img_cont {
            display: none;
        }

        .right_button,.left_button{
            width: 30px;
            height: 100px;
            /*background-color: #f4bf42;*/
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            color:white;

        }

        .right_button {
            position: absolute;
            right: 0;
            top:120px;
            text-decoration: none;
        }

        .left_button {
            position: absolute;
            left:0;
            top:120px;
            text-decoration: none;
        }
        .tag{
            position: absolute;
            width: 120px;
            height: 15px;
            background-color: rgba(0,0,0,0.3);
            border-color: black;
            border-radius: 60px;
            bottom: 20px;
            left: 320px;
            display: inline-block;

        }


        .circle{
            list-style: disc;
            font-size: 25px;
            position: absolute;
            bottom: 0px;
            left: 40px;
            color: red;
        }

        .circle1{
            list-style: disc;
            font-size: 25px;
            position: absolute;
            bottom: 0px;
            left: 60px;
            color: white;
        }

        .circle2{
            list-style: disc;
            font-size: 25px;
            position: absolute;
            bottom: 0px;
            left: 80px;
            color: white;
        }

        .circle3{
            list-style: disc;
            font-size: 25px;
            position: absolute;
            bottom: 0px;
            left: 100px;
            color: white;
        }

        .circle4{
            list-style: disc;
            font-size: 25px;
            position: absolute;
            bottom: 0px;
            left: 120px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="img_border">
        <ul class="img">
            <li >
                <img src="jd.jpg" alt="">
            </li>
            <li class="img_cont">
                <img src="jd1.jpg" alt="">
            </li>
            <li class="img_cont">
                <img src="jd3.jpg" alt="">
            </li>
            <li class="img_cont">
                <img src="jd4.jpg" alt="">
            </li>
            <li class="img_cont">
                <img src="jd6.jpg" alt="">
            </li>
        </ul>
        <div class="button">
            <a href="" class="right_button">
                >
            </a>

            <a href="" class="left_button">
            <
            </a>
        </div>

        <div class="tag">
            <ul class="circle">
                <li></li>
            </ul>
            <ul class="circle1">
                <li></li>
            </ul>
            <ul class="circle2">
                <li></li>
            </ul>
            <ul class="circle3">
                <li></li>
            </ul>
            <ul class="circle4">
                <li></li>
            </ul>
        </div>
    </div>


</body>
</html>

jd轮播图

 

作业要求2

电商网站注册界面，效果如下

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
        }


        .index_header {
            background-color: #F5F5F5;
            width: 100%;
            height: 50px;
        }

        .header_content {
            width: 70%;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
        }

        .header_content a{
            text-decoration: none;
            color: black;
        }

        .header_content a:hover {
            text-decoration: underline;
            color: red;
        }

        .collect {
            margin-right: 600px;
        }

        .action a{
            margin-left: 15px ;
        }


        .index_content {
            width: 70%;
            margin:0 auto;
        }
        .box {
            border: 2px solid #F5F5F5;
            overflow: hidden;
        }

        .register {
            width: 60%;
            margin-left: 100px;
            margin-top: 40px;

        }

        .register p{
            margin-top: 30px;
        }

        .submit_position {
            margin-left: 60px;
        }

        .submit {
            width: 220px;
            height: 30px;
            background-color: #C71585;
            text-align: center;
            margin-bottom: 50px;
        }

        .submit a{
            text-decoration: none;
            color: white;
            height: 30px;
            font-size: 10px;
        }

        .register,.advertising{
            float: left;
        }

        .advertising{
            width: 20%;
            margin-top: 40px;
            margin-right: 60px;
        }

        .ad_text {
            margin-bottom: 20px;
        }
        .ad_text a{
            text-decoration: none;
        }

        .ad_text a:hover{
            text-decoration: underline;
            color: red;
        }

        .text_bottom {
            width: 100%;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="index_header">
        <div class="header_content">
            <span class="collect">
                <a href="">*收藏本站</a>
            </span >
            
            <span class="action">
                <a href="">登录</a>
                <a href="">免费注册</a>
                <a href="">我的订单</a>
                <a href="">VIP会员俱乐部</a>
                <a href="">客户服务</a>
            </span>
        </div>
    </div>

    <div class="index_content">
        <div class="content_img">
            <img src="1.jpg" alt="" width="280" height="180">
        </div>
        <div class="box">
            <div class="register">
                <h2>注册新用户</h2>
                <form action="">
                    <p>
                        <span style="color: red;">*</span>
                        用户名
                        <input type="text">
                    </p>
                    <p>
                        <span style="color: red;">*</span>
                        手机号
                        <input type="text">
                    </p>
                    <p>
                        <span style="color: red;">*</span>
                        登录密码
                        <input type="text">
                    </p>
                    <p>
                        <span style="color: red;">*</span>
                        确认密码
                        <input type="text">
                    </p>
                    <p>
                        <span style="color: red;">*</span>
                        验证码
                        <input type="text">
                    </p>

                    <div class="submit_position">
                        <p style="font-size: 6px">
                            我已阅读并同意
                            <span style="color: blue;">《用户注册协议》</span>
                        </p>

                        <p class="submit">
                            <a href="">同意以上协议并注册</a>
                        </p>
                    </div>
                </form>
            </div>


            <div class="advertising">
                <p class="ad_text">
                    我已注册，现在就<a href="">登录</a>
                </p>
                <img style="margin-top: 10px" src="2.jpg" alt="" width="300" height="200">
            </div>

        </div>

        <div class="text_bottom">
            ©2017 www.hirsi.com 小火星 版权所有
        </div>

    </div>

</body>
</html>

电商界面

 

 

作业要求3

抽屉主页头部界面，效果如下

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽屉</title>
    <link rel="icon" href="chouti.jpg">
    <style>
        *{
            margin: 0;
        }

        .box{
            width:100%;
            height: 50px;
            background-color: dodgerblue;
        }

        .box_content{
            width:70%;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;

        }

        .a1 a{
            margin-right: 2px;
        }

        .a2 a{
            text-decoration: none;
            color: gold;
            font-size: 30px;
            vertical-align: text-bottom;
        }

        .action a{
            text-decoration: none;
            color:white;
            font-size: 15px;
            vertical-align: text-bottom;
            /*margin-left: 1px;*/
            padding:15px;
        }

        .action a:hover{
            background-color: rgba(0,0,0,0.3);
        }

        .action a:visited{
            background-color: blue;
        }

        .register a{
            text-decoration: none;
            color: white;
            font-size: 15px;
            vertical-align: text-bottom;
            margin-left: 200px;

        }

        .enter a{
            text-decoration: none;
            color: white;
            font-size: 15px;
            vertical-align: text-bottom;
            margin-left: 40px;
        }

        .form {
            vertical-align: text-bottom;
            margin-left:10px;
            position: relative;
        }


        .icon{
            width: 11px;
            height: 12px;
            position: absolute;
            right: 1px;
            top:7px;
            display: inline-block;
            background-image: url(fadajing.png);
            background-repeat: no-repeat;
            background-position: 0 -197px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box_content">
            <span class="a1">
                <a href="">
                    <img style="margin-top: 5px" src="chouti.jpg" alt="" width="40px" height="40px" >
                </a>
            </span>

            <span class="a2">
                <a href="">
                    抽屉新热榜
                </a>
            </span>

            <span class="action">
                <a href="">全部</a>
                <a href="">42区</a>
                <a href="">段子</a>
                <a href="">图片</a>
                <a href="">挨踢1024</a>
                <a href="">你问我答</a>
            </span>

            <span class="register">
                <a href="">注册</a>
            </span>

            <span class="enter">
                <a href="">登录</a>
            </span>


            <span class="form">
                <input type="text" name="sousuo">
                    <a href="" class="icon"></a>
            </span>

        </form>
        </div>



    </div>

</body>
</html>

抽屉

 

版权声明：本文为smallmars原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：http://www.cnblogs.com/smallmars/p/8053408.html