网易注册界面.png
-
1.如何实现圆角？
- 方式一：切左右两张圆角图片，背景水平平铺在在外层，内层嵌套左边再嵌套右边
- 方式二：border-radius: 3px 3px 0 0;---CSS3新增
-
2.首行缩进
- 文字的text-indent: 20px;
-
3.内容的垂直居中
- 行高===父元素高度
-
4.如何让图片在div中水平垂直居中
- 方式一：在div中设置img测量padding并设置paddingtopleft注意要记得设置box sizing为boderbox
- 该方式可以设置背景颜色
- 方式二：div中background: url("") no-repeat center;
- 该方式无法设置背景颜色
- 方式一：在div中设置img测量padding并设置paddingtopleft注意要记得设置box sizing为boderbox
-
5.如何实现选项卡效果
- 用ul和li
-
6.如何实现盒子顶部对齐
- 利用浮动
-
7.优化细节
- 1️⃣最好要写一定的注释
- 2️⃣清空一些默认样式 a ul li 等
- 3️⃣利用body设置文字信息
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高仿:网易注册界面</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
.header{
width: 960px;
height: 81px;
/*background-color: darkorange;*/
margin: 0 auto;
padding-top: 30px;
}
.header .logo{
background-image: url(glb_v2.png);
width: 644px;
height: 27px;
float: left;
}
.header .logo a{
width: 128px;
height: 27px;
display: block;
float: left;
/*background-color: antiquewhite;*/
}
.header .links{
width: 200px;
height: 27px;
/*background-color: brown;*/
float: right;
text-align: right;
}
.header .links a{
text-decoration: none;
font-size: 12px;
color: #0e267e;
line-height:27px;
}
/*.header .links span{*/
/*color: #808285;*/
/*line-height:27px;*/
/*!*background-color: blueviolet;*!*/
/*}*/
.content{
width: 960px;
height: 600px;
/*background-color: aquamarine;*/
margin: 0 auto;
}
.content .top{
width: 960px;
height: 38px;
background-color: #6495C6;
border: #5B88B8 1px solid;
border-radius: 3px 3px 0 0;
box-sizing: border-box;
/*background-color: crimson;*/
/*background: url("content-top.png") repeat-x;*/
}
.content .bottom{
width: 960px;
height: 562px;
/*background-color: deeppink;*/
}
.content .bottom .body{
width: 642px;
height: 562px;
/*background-color: pink;*/
float: left;
padding: 50px 80px;
box-sizing: border-box;
}
.content .bottom .body .bodyTags{
width: 582px;
height: 58px;
/*background-color: aqua;*/
}
.content .bottom .body .bodyForm{
width: 582px;
height: 373px;
/*background-color: mediumaquamarine;*/
}
.content .bottom .body .bodyForm .bodyForm-item{
width: 573px;
height: 69px;
/*background-color: darkorange;*/
}
.content .bottom .body .bodyForm .bodyForm-item dt {
float: left;
font-size: 12px;
text-align: right;
width: 70px;
height: 30px;
line-height: 30px;
padding-top: 10px;
}
.content .bottom .body .bodyForm .bodyForm-item dt .star{
color: red;
float: left;
}
.content .bottom .body .bodyForm .bodyForm-item dd{
padding-left: 20px;
padding-top: 10px;
float: left;
}
.content .bottom .body .bodyForm .bodyForm-item dd input{
width: 200px;
height: 28px;
border: #ABABAB 1px solid;
border-radius: 3px;
}
.content .bottom .body .bodyForm .bodyForm-item dd select{
width: 100px;
height: 28px;
padding-left: 3px;
font-size: 14px;
font-weight:bold;
}
.content .bottom .body .bodyForm .bodyForm-item dd .tips{
font-size:12px;
color: #b8b9ba;
padding-top: 5px;
}
.content .bottom .body .bodyTags ul{
width: 412px;
height: 34px;
list-style: none;
background: url("tab.jpg") left 0 no-repeat;
}
.content .bottom .body .bodyTags ul li{
float: left;
width: 137px;
height: 34px;
/*垂直居中*/
line-height: 34px;
/*水平居中*/
text-align: center;
}
.content .bottom .aside{
width: 318px;
height: 562px;
background-color: #e7e7e7;
float: right;
padding: 105px 50px;
box-sizing: border-box;
border: 1px solid #cecece;
border-top: none;
/*background: url("reg_master.gif") no-repeat center;*/
}
.content h1{
font-size:12px;
color: white;
line-height: 38px;
font-weight:normal;
text-indent: 20px;
}
.footer{
width: 960px;
height: 48px;
line-height: 48px;
/*background-color: yellow;*/
margin: 0 auto;
text-align: center;
font-size:12px;
color: #b8b9ba;
}
.footer a {
text-decoration: none;
padding-right: 15px;
}
.footer a:link{
color: #b8b9ba;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#" title="网易163免费邮"></a>
<a href="#" title="网易126免费邮"></a>
<a href="#" title="网易Yeah.net免费邮"></a>
</div>
<div class="links">
<a href="#">了解更多</a>
<span>|</span>
<a href="#">反馈意见</a>
</div>
</div>
<div class="content">
<div class="top">
<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
</div>
<div class="bottom">
<div class="body">
<div class="bodyTags">
<ul>
<li>注册字母邮箱</li>
<li>注册手机号码邮箱</li>
<li>注册VIP邮箱</li>
</ul>
</div>
<div class="bodyForm">
<div class="bodyForm-item">
<dt><p><span class="star">*</span> 邮箱地址</p></dt>
<dd>
<div class="bodyForm-item-info">
<input type="text" value="建议使用手机号注册">
@
<select name="" id="">
<option value="163.com">163.com</option>
<option value="126.com">126.com</option>
<option value="yeah.net">yeah.net<option>
</select>
<p class="tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
</div>
</dd>
</div>
<div class="bodyForm-item">
<dt><p><span class="star">*</span> 密码</p></dt>
<dd>
<div class="bodyForm-item-info">
<input type="password">
<p class="tips">6~16个字符，区分大小写</p>
</div>
</dd>
</div>
<div class="bodyForm-item">
<dt><p><span class="star">*</span> 确认密码</p></dt>
<dd>
<div class="bodyForm-item-info">
<input type="password">
<p class="tips">请再次填写密码
</p>
</div>
</dd>
</div>
</div>
</div>
<div class="aside">
<!--<div class="regExt">-->
<!--</div>-->
</div>
</div>
</div>
<div class="footer">
<a href="#">关于网易</a>
<a href="#">关于网易免费邮</a>
<a href="#">邮箱官方博客</a>
<a href="#">客户服务</a>
<a href="#">隐私政策</a>
<span>| 网易公司版权所有 © 1997-2017</span>
</div>
</body>
</html>
网友评论