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

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