实现登录与注册界面（1号店）

已于 2023-01-29 17:08:45 修改
阅读量6.4k 收藏 88
点赞数 15
分类专栏： 前端 css 文章标签： html5 css
于 2021-08-16 11:10:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dai556688/article/details/119728448
版权

 

 登陆界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .all {
                height: 600px;
                width: 1100px;
                margin: auto;
                border: 1px #DCDCDC solid;
            }

            .s {
                width: 300px;
                height: 20px;
                float: right;
                margin-top: 6px;
            }

            .header {
                width: 1100px;
                height: 100px;
                background-color: rgb(255, 255, 255);
                font-size: 12px;
                margin: auto;
                border: 1px #DCDCDC solid;
            }

            .a {
                display: inline-block;
                width: 130px;
                height: 20px;

            }

            .nei {
                display: inline-block;
                width: 85px;
                height: 20px;
                border: 1px #DCDCDC solid;
            }

            .header>img {

                margin-left: 30px;
                margin-top: 10px;
                vertical-align: middle;
            }

            .nei>img {
                vertical-align: middle;
            }

            .header a {

                text-decoration: none;
            }

            .right {

                width: 396px;
                height: 400px;
                float: right;
            }

            .righter {
                width: 350px;
                height: 300px;
                margin-top: 50px;
            }

            .left {
                width: 700px;
                height: 400px;
                float: left;
            }

            .left img {
                margin-left: 120px;
                margin-top: 20px;
            }

            .middle {
                width: 1100px;
                height: 400px;
                background-color: rgb(252, 252, 252);
            }

            .right span {
                margin-left: 40px;
                font-weight: bold;
                color: rgb(102, 102, 102);
            }

            .right a {
                text-decoration: none;
                margin-left: 145px;
                font-size: 12px;
            }

            .one input {

                margin-left: 40px;
                background-color: #FFFFFF;
                background: url(Image/icon_02.gif) no-repeat 20px 20px;
                background-position: 20px;
                height: 50px;
                width: 300px;
                border: #DCDCDC solid 1px;
            }

            .two input {
                margin-top: 15px;
                margin-left: 40px;
                background-color: #FFFFFF;
                background: url(Image/lock.png) no-repeat 20px 20px;
                background-position: 23px;
                height: 50px;
                width: 300px;
                border: #DCDCDC solid 1px;
            }

            .three input {
                margin-top: 20px;
                margin-left: 40px;

            }

            .three span {
                color: rgb(118, 118, 122);
            }

            .three {
                font-size: 13px;
                color: rgb(118, 118, 122);
            }

            .four input {
                margin-top: 15px;
                margin-left: 40px;
                height: 50px;
                width: 300px;
                border-radius: 3px;
                background-color: rgb(255, 60, 60);
                font-size: 16px;
                color: white;
                border: 0px;
            }

            .five p {
                margin-top: 15px;
                margin-left: 40px;
                font-size: 12px;
                color: rgb(118, 118, 122);
            }

            .right input::-webkit-input-placeholder {

                font-size: 16px;
                color: rgb(118, 118, 122);
            }

            .six img {
                margin-top: 15px;
                margin-left: 20px;
                width: 30px;
                height: 30px;
                vertical-align: middle;
            }

            .six span img {
                margin-left: 15px;
            }

            .six span {
                margin-left: 25px;
                font-size: 12px;
                color: rgb(118, 118, 122);
            }

            .eight img {
                width: 12px;
                height: 12px;
                vertical-align: middle;
                margin-left: 0;
            }

            .footer {
                width: 1100px;
                height: 100px;
                background-color: #FCFCFC;
                font-size: 12px;
                color: #000000;
                text-align: center;
                line-height: 15px;
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="header"><img src="Image/loginlogo.jpg">
                <div class="s">
                    <div class="a"><span>您好，欢迎光临1号店！</span></div><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;请登录</a>
                    <div class="nei">
                        <img src="./Image/runbun.png">帮助中心<img src="./Image/turnb.png">
                    </div>
                </div>
            </div>
            <div class="middle">
                <div class="left"><img src="Image/loadimg.jpg"></div>
                <div class="right">
                    <div class="righter">
                        <form action="#" method="get">
                            <span>1号店用户登录</span><a href="注册页面.html" target="_blank">注册账号</a><br />
                            <div class="one"><input type="text" name="username"
                                    placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱/手机/用户名"><br />
                            </div>
                            <div class="two"><input type="password" name="password"
                                    placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码">
                            </div>
                            <div class="three"><input type="checkbox"
                                    value="自动登录">自动登录<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;忘记密码？</span>
                            </div>
                            <div class="four"><input type="submit" value="登录"></div>
                            <div class="five">
                                <p>更多合作网站账号登陆</p>
                            </div>
                            <div class="six"><span><img src="Image/l_1.png"></span><img src="Image/l_2.png"><img
                                    src="Image/l_3.png"><img src="Image/l_4.png"><span>更多合作网站</span>
                                    <div class="eight"><img src="./Image/turnb.png"></span></div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="footer"><br />沪ICP备13044728号 | 合字B1.B2-20130004 | 营业执照<br /><br />
                Copyright&copy;1号店网上超市2007-2016， All Rights Reserved
            </div>
        </div>
    </body>
</html>

注册界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .all {
                height: 680px;
                width: 1300px;
                margin: auto;
            }

            .s {
                width: 300px;
                height: 20px;
                float: right;
                margin-top: 5px;
            }

            .header {
                width: 1300px;
                height: 100px;
                background-color: rgb(255, 255, 255);
                font-size: 12px;
                margin: auto;
                border: 1px #DCDCDC solid;
            }

            .a {
                display: inline-block;
                width: 130px;
                height: 20px;
            }

            .nei {
                display: inline-block;
                width: 85px;
                height: 20px;
                border: 1px #DCDCDC solid;
            }

            .header>img {

                margin-left: 30px;
                margin-top: 10px;
                vertical-align: middle;
            }

            .nei>img {
                vertical-align: middle;
            }

            .header a,
            .c a {
                text-decoration: none;
            }

            .footer {
                height: 580px;
                width: 1300px;
                background-color: rgb(252, 252, 252);
            }

            .main {
                width: 400px;
                height: 550px;
                margin-left: 450px;
                background-color: rgb(252, 252, 252);
            }

            .main input {
                width: 360px;
                height: 60px;
                margin-top: 10px;
            }

            .a2 input {
                width: 200px;
                height: 60px;
                float: left;
            }

            .a3 input {
                width: 150px;
                height: 66px;
                float: left;
                margin-left: 10px;
                font-size: 16px;
                color: white;
                background-color: rgb(87, 86, 95);
                border: 0;
                font-weight: bold;
            }

            .b input {
                width: 360px;
                height: 60px;
                margin-top: 10px;
            }

            .c {
                margin-top: 15px;
                padding-left: 30px;
            }

            .d input {
                color: white;
                background-color: rgb(255, 60, 60);
                border: 0;
                font-size: 18px;
            }

            .e {
                font-size: 14px;
                text-align: center;
            }

            .z {
                padding-top: 20px;
                margin-bottom: 10px;
                font-size: 25px;
                text-align: center;
            }

            .main input::-webkit-input-placeholder {
                padding-left: 20px;
                font-size: 16px;
                font-weight: bold;
                color: rgb(118, 118, 122);
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="header">
                <img src="Image/loginlogo.jpg">
                <div class="s">
                    <div class="a"><span>您好，欢迎光临1号店！</span></div><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;请登录</a>
                    <div class="nei">
                        <img src="./Image/runbun.png">帮助中心<img src="./Image/turnb.png">
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="main">
                    <form action="#" method="get">
                        <div class="z">1号店注册</div>
                        <input type="text" placeholder="手机号">
                        <div class="a1">
                            <div class="a2"><input type="text" placeholder="手机号"></div>
                            <div class="a3"><input type="button" value="获取验证码"></div>
                        </div>
                        <div class="b"><input type="text" placeholder="密码"></div>
                        <input type="text" placeholder="确认密码">
                        <div class="c">点击注册，表示您同意一号店<a href="#">《服务协议》</a></div>
                        <div class="d"><input type="submit" value="同意协议并注册"></div>
                        <div class="e"><br />沪ICP备13044728号 | 合字B1.B2-20130004 | 营业执照<br /><br />
                            Copyright&copy;1号店网上超市2007-2016， All Rights Reserved</div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

god‘s hand
关注
  • 15
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1号店html页面,1号店网页制作(HTML+CSS)
weixin_42515364的博客
06-03 5883
【实例简介】初学网页制作 运用html和css完成 的1号店网页主页、登录和注册页面 纯属个人学习制作 在此分享 特此声明 感谢原网站资源1号店版权 此资源纯属个人学习制作【实例截图】【核心代码】1号店网页制作(HTMLCSS)└── 1号店├── css│ ├── denglu.css│ ├── index.css│ ├── reset.css│ └── zhuce.cs...
html一号店项目代码,项目一号店素材(html模板)
weixin_35390150的博客
06-11 4319
【实例简介】【实例截图】【核心代码】oneShop├── css│ ├── ShopShow.css│ ├── base.css│ ├── load.css│ ├── logo.css│ ├── register.css│ └── style.css├── detail.html├── images│ ├── Thumbs.db│ ├── a_close.png│...
1号店html+css
04-21
首页、登录、注册、商品详情、搜索列表、公共页面html+css 完整项目
1号店网页制作(HTML+CSS)
01-21
初学网页制作 运用html和css完成 的1号店网页主页、登录和注册页面 纯属个人学习制作 在此分享 特此声明 感谢原网站资源1号店版权 此资源纯属个人学习制作
HTML静态网页成品作业(HTML+CSS)——1号店商城首页网页(1个页面)
最新发布
weixin_42283461的博客
05-27 429
HTML静态网页成品作业(HTML+CSS)——1号店商城首页网页(1个页面)
一号店项目,jquery
03-31
一号店项目,实现了注册和登录的表单验证,排序,购物车,获取验证码
2024基于javascript/jquery的“1号店”网站页面特效实现html大作业
03-09
在静态页面的基础上添加各种javascript、jquery代码及部分css样式，通过javascript和css的交互功能，实现1号店网页上的各种特效 1、首页特效 网站导航部分的树形菜单 购物车的增减 焦点轮播图 信息列表自动滚动 商品分类显示 2、列表页特效 按照“价格”对商品进行升序和降序排列 3、详情页特效 选择商品尺码、颜色时样式的变化，商品数量的增减，不能少于1件 在推荐搭配中，点击对应商品下复选框，“套餐价”自动计算变化 4、注册、登录页验证效果
1号店登录页（共5页）
weixin_47949485的博客
06-28 4786
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1号店登录页面</title> <link rel="stylesheet" type="text/css" href="css/login.css" /> <!--favicon图片引入--> <link rel="shortcut icon" href=" fa
【每日前端】京东1号店注册——登录页面CSS实现
qq_41891566的博客
01-07 3162
登录界面： 源码： html文件 css文件 注册页面： 源码： html文件 css文件
HTML 制作1号店网页
05-14
HTML 制作1号店网页
一号店html5首页静态代码
01-10
一号店html5首页静态代码，通过m.yhd.com下载下来，含编译后的css和js。
1号店html代码
07-01
制作网购网页的HTML部分代码，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习。
一号店html模板
03-18
一号店html模板，界面精美，代码简练，值得学习与参考
一号店静态网页代码
05-03
大家一起学习
1号店完整代码_js代码_一号店代码_京东1号店_
09-29
【标题】"1号店完整代码_js代码_一号店代码_京东1号店"涉及到的是一个电子商务网站的前端实现，特别关注的是JavaScript（JS）在其中的应用，这是一门广泛用于网页动态效果和交互功能的编程语言。1号店是中国知名的...
1号店完整项目(包括前后台)
09-19
"1号店完整项目(包括前后台)"是一个涵盖了前端和后端开发的综合项目，旨在为学习者提供一个全面的电商网站开发实例。这个项目基于2019年的最新技术，确保了代码的时效性和实用性。以下是这个项目中涉及的主要知识点...
1号店静态页面.zip
04-29
【标题】"1号店静态页面.zip"是一个包含...总的来说，"1号店静态页面.zip"是一个全面的Web前端学习实践项目，涵盖了网页制作的基本要素，对于初学者来说，这是一个很好的锻炼机会，可以将理论知识转化为实际操作技能。
制作1号店网站首页css与html
05-27
下面是制作1号店网站首页的HTML和CSS代码示例，供参考： HTML代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>1号店首页</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 头部导航栏 --> <header> <nav> <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> </ul> </nav> </header> <!-- 搜索框 --> <div class="search"> <input type="text" placeholder="搜索商品"> <button>搜索</button> </div> <!-- 广告轮播 --> <div class="banner"> <img src="images/banner1.jpg" alt="banner1"> <img src="images/banner2.jpg" alt="banner2"> <img src="images/banner3.jpg" alt="banner3"> </div> <!-- 商品分类 --> <div class="category"> <ul> <li> <a href="#"> <img src="images/category1.jpg" alt="category1"> <span>服装鞋包</span> </a> </li> <li> <a href="#"> <img src="images/category2.jpg" alt="category2"> <span>美妆个护</span> </a> </li> <li> <a href="#"> <img src="images/category3.jpg" alt="category3"> <span>家居生活</span> </a> </li> <li> <a href="#"> <img src="images/category4.jpg" alt="category4"> <span>数码家电</span> </a> </li> <li> <a href="#"> <img src="images/category5.jpg" alt="category5"> <span>食品饮料</span> </a> </li> <li> <a href="#"> <img src="images/category6.jpg" alt="category6"> <span>母婴童装</span> </a> </li> </ul> </div> <!-- 新品推荐 --> <div class="new-products"> <h2>新品推荐</h2> <ul> <li> <a href="#"> <img src="images/product1.jpg" alt="product1"> <span>商品名称</span> <span class="price">￥99.00</span> </a> </li> <li> <a href="#"> <img src="images/product2.jpg" alt="product2"> <span>商品名称</span> <span class="price">￥99.00</span> </a> </li> <li> <a href="#"> <img src="images/product3.jpg" alt="product3"> <span>商品名称</span> <span class="price">￥99.00</span> </a> </li> <li> <a href="#"> <img src="images/product4.jpg" alt="product4"> <span>商品名称</span> <span class="price">￥99.00</span> </a> </li> </ul> </div> <!-- 优惠活动 --> <div class="promotion"> <h2>优惠活动</h2> <ul> <li> <a href="#"> <img src="images/promotion1.jpg" alt="promotion1"> </a> </li> <li> <a href="#"> <img src="images/promotion2.jpg" alt="promotion2"> </a> </li> <li> <a href="#"> <img src="images/promotion3.jpg" alt="promotion3"> </a> </li> </ul> </div> <!-- 底部 --> <footer> <p>版权所有 © 1号店</p> </footer> </body> </html> ``` CSS代码： ```css /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 14px; color: #333; } /* 头部导航栏样式 */ header { background-color: #333; height: 40px; line-height: 40px; } nav ul { list-style: none; text-align: center; } nav li { display: inline-block; margin: 0 10px; } nav a { color: #fff; text-decoration: none; } nav a:hover { color: #ff6600; } /* 搜索框样式 */ .search { text-align: center; padding: 20px 0; } .search input { width: 400px; height: 36px; border: 1px solid #ccc; border-radius: 18px; padding: 0 20px; font-size: 14px; outline: none; } .search button { width: 80px; height: 36px; border: none; border-radius: 18px; background-color: #ff6600; color: #fff; font-size: 14px; outline: none; cursor: pointer; margin-left: -5px; } /* 广告轮播样式 */ .banner { width: 100%; height: 400px; overflow: hidden; position: relative; } .banner img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* 商品分类样式 */ .category ul { list-style: none; text-align: center; } .category li { display: inline-block; margin: 20px 10px; } .category a { display: block; width: 200px; height: 200px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; position: relative; } .category img { width: 100%; height: 100%; } .category span { display: block; text-align: center; margin-top: 10px; } /* 新品推荐样式 */ .new-products { padding: 40px 0; text-align: center; } .new-products h2 { font-size: 24px; margin-bottom: 20px; } .new-products ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .new-products li { margin: 0 20px 40px; text-align: center; } .new-products a { display: block; width: 200px; height: 300px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; position: relative; } .new-products img { width: 100%; height: 200px; } .new-products span { display: block; text-align: center; margin-top: 10px; } .new-products .price { color: #ff6600; font-size: 18px; } /* 优惠活动样式 */ .promotion { padding: 40px 0; text-align: center; } .promotion h2 { font-size: 24px; margin-bottom: 20px; } .promotion ul { list-style: none; display: flex; justify-content: center; } .promotion li { margin: 0 20px; } .promotion a { display: block; width: 300px; height: 200px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; position: relative; } .promotion img { width: 100%; height: 100%; } /* 底部样式 */ footer { background-color: #ccc; height: 50px; line-height: 50px; text-align: center; } footer p { font-size: 14px; color: #666; } ``` 以上示例代码仅供参考，实际制作中需要根据具体情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值