寒假作业17

最新推荐文章于 2023-03-22 20:33:15 发布

转载最新推荐文章于 2023-03-22 20:33:15 发布 · 183 阅读

本文档展示了两个网页的设计代码：QQ会员页面导航和京东登录页。QQ会员页面包括了功能特权、游戏特权等链接，并设有登录和开通超级会员按钮。京东登录页则提供了会员登录表单，包括邮箱/用户名/手机号输入、密码输入、自动登录选项及忘记密码链接。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ会员页面导航</title>
    <style>
        #father{
            background: gray;
            width:1120px;
            height:72px ;
        }
        #logo{
            display: inline-block;
            width:112px;
            height:72px;
            margin-left: 50px;
        }
        img {
            vertical-align: middle;
        }
        #list{
            display: inline-block;
            width:660px;
        }
        nav{
            padding-left: 60px;
        }
        a{
            font-size: 14px;
            color:white;
            text-decoration: none;
            margin-right: 25px;
        }
        a:hover{
            color:blue;
        }
        #login{
            display: inline-block;
            width:220px ;
            margin-left: 23px;
        }
        .a1{
            width:80px;
            height:30px;
            border:1px #f1ff66 solid;
            border-radius: 20px;
            background: gray;
            display: inline-block;
            line-height:30px ;
            text-align: center;
            padding-top: 2px;
            font-size: 14px;
            color:#f1ff66;
            text-decoration: none;
            margin: 0;
        }
        .a1:hover{
            color:orange;
        }
        .a2{
            width:120px;
            height:30px;
            border:1px #f1ff66 solid;
            border-radius: 20px;
            background: #f1ff66;
            display: inline-block;
            line-height:30px ;
            text-align: center;
            padding-top: 2px;
            font-size: 14px;
            font-weight: bold;
            color: #c6802b;
            text-decoration: none;
            margin-right: 0;
        }
        .a2:hover{
            color:#A50713;
        }
    </style>
</head>
<body>
<header>
    <div id="father">
        <div id="logo"><img src="image/logo.png" width="116px" height="72px"/></div>
        <div id="list">
            <nav>
                <a href="">功能特权</a>
                <a href="">游戏特权</a>
                <a href="">生活特权</a>
                <a href="">会员活动</a>
                <a href="">成长体系</a>
                <a href="">年费专区</a>
                <a href="">超级会员</a>
            </nav>
        </div>
        <div id="login">
            <a class="a1" href="">登录</a>
            <a class="a2" href="">开通超级会员</a>
        </div>
    </div>
</header>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ会员页面导航</title>
    <style>
        #father{
            background: gray;
            width:1120px;
            height:72px ;
        }
        #logo{
            display: inline-block;
            width:112px;
            height:72px;
            margin-left: 50px;
        }
        img {
            vertical-align: middle;
        }
        #list{
            display: inline-block;
            width:660px;
        }
        nav{
            padding-left: 60px;
        }
        a{
            font-size: 14px;
            color:white;
            text-decoration: none;
            margin-right: 25px;
        }
        a:hover{
            color:blue;
        }
        #login{
            display: inline-block;
            width:220px ;
            margin-left: 23px;
        }
        .a1{
            width:80px;
            height:30px;
            border:1px #f1ff66 solid;
            border-radius: 20px;
            background: gray;
            display: inline-block;
            line-height:30px ;
            text-align: center;
            padding-top: 2px;
            font-size: 14px;
            color:#f1ff66;
            text-decoration: none;
            margin: 0;
        }
        .a1:hover{
            color:orange;
        }
        .a2{
            width:120px;
            height:30px;
            border:1px #f1ff66 solid;
            border-radius: 20px;
            background: #f1ff66;
            display: inline-block;
            line-height:30px ;
            text-align: center;
            padding-top: 2px;
            font-size: 14px;
            font-weight: bold;
            color: #c6802b;
            text-decoration: none;
            margin-right: 0;
        }
        .a2:hover{
            color:#A50713;
        }
    </style>
</head>
<body>
<header>
    <div id="father">
        <div id="logo"><img src="image/logo.png" width="116px" height="72px"/></div>
        <div id="list">
            <nav>
                <a href="">功能特权</a>
                <a href="">游戏特权</a>
                <a href="">生活特权</a>
                <a href="">会员活动</a>
                <a href="">成长体系</a>
                <a href="">年费专区</a>
                <a href="">超级会员</a>
            </nav>
        </div>
        <div id="login">
            <a class="a1" href="">登录</a>
           
        </div>
    </div>
</header>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东登录页</title>
    <style>
        header div{
            background: url("image/logo2.png") 180px   no-repeat;
            padding-left:370px;
            font-size: 24px;
            height:80px;
            line-height:80px;
            color: #55565F;
        }
        .content{
            background-color: #e93650;
        }
        .wrap{
            width: 990px;
            margin: 0 auto;
        }
        .login-box{
            background: url("image/banner.png")    no-repeat;
            height:475px;
        }
        h2{
            color:gray;
            font-size: 21px;
            padding-left:20px;
            line-height: 20px;
            height:20px;
            margin-top: 24px;
            margin-bottom: 0;
            font-weight: 400;
        }
        h2 a{
            background: url("image/icon5.jpg") 10px   no-repeat;
            float: right;
            width:80px;
            padding-left:30px;
            color: #e9063c;
            font-size: 14px;
            height:18px;
            line-height: 18px;
        }
        .login-form{
            width:340px;
            height:273px;
            border:1px #A4FFF3 solid;
            float:right;
            margin-top: 40px;
            background: white;
        }
        #loginForm{
            padding:30px 0;
        }
        .f1{
            height: 38px;
            border:1px rgba(163, 163, 163, 0.56) solid;
            float: left;
            padding:  0 ;
            margin-bottom: 0;
            margin-left: 20px;
        }
        .f2{
            height: 38px;
            border:1px rgba(163, 163, 163, 0.56) solid;
            float: left;
            padding:  0 ;
            margin-top: 0;
            margin-left: 20px;
        }
        .kong{
            height: 25px;
        }
        #name,#pwd {
            border-left: none;
            height:32px;
            padding:3px  0 ;
            float: left;
            border-bottom:1px rgba(163, 163, 163, 0.56) solid;
            border-top:1px rgba(163, 163, 163, 0.56) solid;
            border-right:1px rgba(163, 163, 163, 0.56) solid;
            width:260px;
            color: gray;
            font-size:14px ;
        }
        .kong2{
            margin-top: 60px;
            width: 300px;
            margin-left: 20px;
            padding-top: 10px;
            height: 20px;
        }
        #auto-login{
            float:left;
            height: 20px;
        }
        p span:nth-of-type(1){
            font-size: 12px;
            color:gray;
            height: 20px;
            line-height: 20px;
        }
        p span:nth-of-type(2){
            display:inline-block;
            float:right;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
        }
        #submit{
            background-color: #f03c3d;
            color:white;
            width: 300px;
            text-align: center;
            height: 35px;
            line-height: 30px;
            font-size: 17px;
            margin-left: 20px;
            border:1px white solid;
        }
        footer{
            text-align: center;
            color:gray;
            font-size: 12px;
        }
        a{
            color:gray;
            text-decoration: none;
        }
        a:hover{
            text-decoration:underline;
            color:red;
        }
    </style>
</head>
<body>
<header>
    <div>欢迎登录</div>
</header>
<article class="content">
    <div class="wrap">
        <div class="login-box">
            <div class="login-form">
                <h2>京东会员<a href="">立即注册</a></h2>
                <form action="" method="post" id="loginForm">
                    <div class="f1"><input type="image" src="image/icon1.jpg"></div>
                    <input name="name" placeholder="  邮箱/用户名/已验证手机" type="text" id="name">
                    <p class="kong"></p>
                    <div class="f2"><input type="image" src="image/icon2.jpg"></div>
                    <input name="pwd" type="password" id="pwd">
                    <p class="kong2">
                        <input type="checkbox" name="auto-login" id="auto-login"><span>自动登录</span>
                        <span><a href="">忘记密码?</a></span>
                    </p>
                    <input type="submit" id="submit" name="submit" value="登 录">
                </form>
            </div>
        </div>
    </div>
</article>
<footer>
    <div>
        <p><a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">人才招聘</a> | <a href="">商家入驻</a> | <a href="">广告服务</a> | <a href="">手机京东</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <a href="">京东社区</a> | <a href="">京东公益</a> | <a href="">English Site</a></p>
       
    </div>
</footer>
</body>
</html>