寒假作业7

最新推荐文章于 2021-06-24 20:06:42 发布

原创最新推荐文章于 2021-06-24 20:06:42 发布 · 576 阅读

CC 4.0 BY-SA版权

本文介绍了一个具体的登录和注册页面设计案例，详细展示了HTML和CSS代码，用于创建一个用户友好的网页界面，包括样式化的输入框、按钮及布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入页面</title>
    <style>
        a {
            text-decoration: none;
        }
        header{
            overflow: hidden;
        }
        header .one img{
            width: 145px;
            height: 55px;
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }
        header .two{
            float: right;
            margin-right: 20px;
            margin-top: 20px;
        }
        header p{
            display: inline-block;
            margin-right: 40px;
            color: grey;
            font-size: 13px;
            font-weight: lighter;
        }
        header a{
            border: 1px grey solid;
            padding: 5px;
            color: dodgerblue;
        }
        header p a{
            border: none;
        }
        header p a:hover{
 
            color: orangered;
        }
        header .two a:nth-child(2){
            color: black;
        }
        header a span img{
            position: relative;
            top: 3px;
            margin: 0px 3px;
        }
        section .one{
            float: left;
            margin-left: 100px;
            margin-top: 50px;
        }
        section .two {
            float: right;
            margin-right: 230px;
            margin-top: 30px;
 
        }
        section .two p:nth-child(1){
            font-weight: bolder;
            font-size: 14px;
            color: grey;
        }
        section .two .num1{
            font-weight: lighter;
            font-size: 12px;
            margin-left: 190px;
            color: dodgerblue;
        }
        section .two ul li{
            display: inline-block;
            position: relative;
            left: -40px;
            margin-right: 13px;
        }
        section .two ul li:nth-child(1){
            width: 35px;
            height: 35px;
            background: url("images/qqf.png") no-repeat;
            background-size: 35px;
        }
        section .two ul li:nth-child(1):hover{
            background: url("images/qqt.png") no-repeat;
            width: 35px;
            height: 35px;
            background-size: 35px;
        }
        section .two ul li:nth-child(2){
            width: 35px;
            height: 35px;
            background: url("images/wbf.png") no-repeat;
            background-size: 35px;
        }
        section .two ul li:nth-child(2):hover{
            width: 35px;
            height: 35px;
            background: url("images/wbt.png") no-repeat;
            background-size: 35px;
        }
        section .two ul li:nth-child(3){
            width: 35px;
            height: 35px;
            background: url("images/zhif.png") no-repeat;
            background-size: 35px;
        }
        section .two ul li:nth-child(3):hover{
            width: 35px;
            height: 35px;
            background: url("images/zhit.png") no-repeat;
            background-size: 35px;
        }
        section .two ul li:nth-child(4){
            width: 35px;
            height: 35px;
            background: url("images/wxf.png") no-repeat ;
            background-size: 35px;
        }
        section .two ul li:nth-child(4):hover{
            width: 35px;
            height: 35px;
            background: url("images/wxt.png") no-repeat ;
            background-size: 35px;
        }
        section .two .num2{
            border: 1px solid grey;
            width: 330px;
            height: 54px;
            text-indent: 4em;
            background: url("images/userHead.png")no-repeat 20px 15px;
        }
        section .two .num3{
            border: 1px solid grey;
            width: 330px;
            height: 54px;
            text-indent: 4em;
            background: url("images/lock.png")no-repeat 20px 12px;
        }
        section .two form p:nth-child(3){
            color: grey;
            font-weight: lighter;
            font-size: 12px;
        }
        section .two .num4{
            color: grey;
            font-weight: lighter;
            padding-left: 198px;
        }
        section .two .num5{
            font-size: 20px;
            color: white;
            background-color: red;
            border: none;
            padding: 14px 148px;
        }
        section .two .num6{
            color: grey;
            font-size: 12px;
        }
        section .two ul li:nth-child(5){
            padding-right: 30px;
            color: grey;
            font-size: 12px;
            background: url("images/loadMore.png") no-repeat 75px 0px;
            background-size: 20px;
            position: relative;
            left: -2px;
            top: -15px;
        }
        section{
            overflow: hidden;
        }
        footer p{
            text-align: center;
            font-size: 15px;
        }
        footer p a{
            color: black;
        }
        footer p a:hover{
            color: red;
        }
 
    </style>
</head>
<body>
<header>
    <div class="one">
    <img src="img/loginlogo.jpg">
    </div>
    <div class="two">
    <p>您好，欢迎光临1号店！<a href="#">请登录</a></p>
    <a href="#"><span><img src="img/runbun.png"></span>帮助中心<span><img src="img/turnb.png"></span></a>
    </div>
 
</header>
<hr>
<section>
    <div class="one">
        <img src="img/loadimg.jpg">
    </div>
    <div class="two">
        <p>1号店用户登录<a href= "注册页面.html" class="num1" target="_blank">注册账号</a></p>
        <form method="get" action="#">
            <p><input type= text required="" placeholder="邮箱/手机/用户名" class="num2"></p>
            <p><input type="password" required="" placeholder="密码" class="num3"></p>
            <p><input type= checkbox >   自动登入<a href="#" class="num4">忘记密码？</a></p>
            <p><input type="submit" value="登入" class="num5"></p>
        </form>
        <p class="num6">更多合作网站账号登录</p>
        <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>
        </ul>
    </div>
</section>
<footer>
    <p><a href="#">沪ICP备13044278号</a>|  合字B1.B2-20130004  |<a href="#">营业执照</a></p>
    <p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        a {
            text-decoration: none;
        }
        header{
            overflow: hidden;
        }
        header .one img{
            width: 145px;
            height: 55px;
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }
        header .two{
            float: right;
            margin-right: 20px;
            margin-top: 20px;
        }
        header p{
            display: inline-block;
            margin-right: 40px;
            color: grey;
            font-size: 13px;
            font-weight: lighter;
        }
        header a{
            border: 1px grey solid;
            padding: 5px;
            color: dodgerblue;
        }
        header p a{
            border: none;
        }
        header p a:hover{
 
            color: orangered;
        }
        header .two a:nth-child(2){
            color: black;
        }
        header a span img{
            position: relative;
            top: 3px;
            margin: 0px 3px;
        }
        input{
            width: 330px;
            height: 54px;
            margin: 10px;
            text-indent: 2em;
            margin-top: -5px;
        }
        .num1{
            width: 194px;
        }
        .num2{
            width: 126px;
            height: 56px;
            margin-left: -5px;
            text-indent: 0em;
            background-color: #57565f;
            border: 1px solid grey;
            border-radius: 3px;
        }
        section p{
            font-size: 12px;
            text-indent: 1em;
            color: grey;
        }
        section a{
            color: dodgerblue;
        }
        section .num3{
            background-color: #ff3c3c;
            border: 1px solid #ff3c3c;
            border-radius: 5px;
            text-indent: 0em;
            font-size: 17px;
            color: white;
        }
        h1{
            text-indent: 5em;
        }
        section{
            width: 360px;
            margin: 0px auto;
        }
        footer p{
            text-align: center;
            font-size: 15px;
        }
        footer p a{
            color: black;
        }
        footer p a:hover{
            color: red;
        }
    </style>
</head>
<body>
<header>
    <div class="one">
        <img src="img/loginlogo.jpg">
    </div>
    <div class="two">
        <p>您好，欢迎光临1号店！<a href="#">请登录</a></p>
        <a href="#"><span><img src="img/runbun.png"></span>帮助中心<span><img src="img/turnb.png"></span></a>
    </div>
 
</header>
<hr>
<section>
    <div>
        <h1>1号店注册</h1>
        <form method="get" action="#">
            <input type=text placeholder="手机号"><br>
            <input type="text" placeholder="手机号" class="num1">
            <input type=submit value="获取验证码" class="num2"><br>
            <input type="password" placeholder="密码"><br>
            <input type="password" placeholder="确认密码"><br>
            <p>点击注册，表示您同意1号店 <a href="#">《服务协议》</a></p>
            <input type="submit" value="同意协议并注册" class="num3">
        </form>
    </div>
</section>
<footer>
    <p><a href="#">沪ICP备13044278号</a>|  合字B1.B2-20130004  |<a href="#">营业执照</a></p>
    <p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>