年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1271|回复: 0

[电子商务] 12、商城首页制作实战训练--登录模块基本实现

[复制链接]
  • TA的每日心情
    倒霉
    2021-4-22 22:52
  • 签到天数: 369 天

    [LV.9]以坛为家II

    发表于 2016-2-24 17:38:28 | 显示全部楼层 |阅读模式
    效果图:
    屏幕快照 2016-02-24 下午5.29.25.png
    1、页面结构分为标题、登录表单、底部链接三个部分组成;
    2、标题在前面已经实现,但这里有所不同,所以CSS单独写一个login的类;
    3、总体效果与全局的section_title类似,不同的是加渐变背景,加边框,高度根据实际做调整;
    4、表单部分与底部放到一个div里面,表单部分用ul实现,底部链接使用两个a标签;
    5、相同的部分抽象一个css类来定义样式;
    6、页面布局:
    [HTML] 纯文本查看 复制代码
    <div class="side_section">
            <h2 class="login gradient">
                    <strong>LOAD<span>登录</span></strong>
                    <a href="#"><img src="img/more.gif" alt="更多" title="更多"/></a>
            </h2>
            <div class="login_form">
                    <ul>
                            <li>
                                    <span>用户名:</span>
                                    <input class="text" type="text" name="username"/>
                                    <label>
                                            <input type="checkbox" name="remeberUsername" />
                                            <strong>记住我</strong>
                                    </label>
                            </li>
                            <li>
                                    <span>密 码:</span>
                                    <input class="text" type="password" name="password" />
                                    <input class="button" type="submit" value="登录"/>
                            </li>
                    </ul>
                    <p>
                            <a href="#">新用户注册</a>
                            <a href="#">忘记密码了</a>
                    </p>
            </div>
    </div>
    
    7、CSS样式
    [CSS] 纯文本查看 复制代码
    .login{height: 34px; line-height: 36px; margin: 0 -12px; padding: 0 12px; border-bottom: 1px solid #eee; overflow: hidden; border-radius:6px 6px 0 0;}
    .login a{position: absolute; right: 12px;top: 12px;}
    .login_form, .login, .login_form .text{position: relative;}
    .login_form ul{width: 214px; height: 63px; padding-top: 6px; border-bottom: 1px solid #EEE;}
    .login_form li{height: 26px; line-height: 26px;}
    .login_form .text{float: left; width: 84px; height: 16px; top:4px; margin-right: 7px; background: #f7f7f7;border: 1px solid #eee;}
    .login_form .button{float: left; background: #e80000; height: 24px; border-radius: 11px;width: 55px;height: 22px; border: none; box-shadow: 1px 1px 1px gray;color: #fff; line-height: 24px; }
    .login_form label{line-height: 26px; word-spacing: 4px;}
    .login_form span{display: block; float: left; line-height: 26px; width: 58px; text-align: right;word-spacing: 7px;}
    .login_form p{ display: block; height: 34px;line-height: 34px;}
    .login_form p a{ text-indent: 20px; width: 100px;display: inline-block;color: #666666; background: url('../img/dot.gif') no-repeat 10px center;}
    .login_form p a:hover{text-decoration: underline;}
    8、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2021-6-18 19:28 , Processed in 1.093652 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表