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

Sian

效果图：

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、源代码下载：

游客，如果您要查看本帖隐藏内容请回复