12、商城首页制作实战训练--登录模块基本实现
效果图：1、页面结构分为标题、登录表单、底部链接三个部分组成；
2、标题在前面已经实现，但这里有所不同，所以CSS单独写一个login的类；
3、总体效果与全局的section_title类似，不同的是加渐变背景，加边框，高度根据实际做调整；
4、表单部分与底部放到一个div里面，表单部分用ul实现，底部链接使用两个a标签；
5、相同的部分抽象一个css类来定义样式；
6、页面布局：<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样式.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、源代码下载：**** Hidden Message *****
页:
[1]