HTML+CSS实现前端注册页
效果图:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>手机号注册</title>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/register.css"/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!--头部-->
<div class="register_top">
<a href="#">
<i class="iconfont font22"></i>
<i>手机号注册</i>
</a>
</div>
<!--内容-->
<div class="content">
<form action="" method="post">
<p class="iconfont font22"><span>+86</span><input type="text" placeholder="输入手机号"/></p>
<p class="iconfont font22"><input type="text" value="" placeholder="设置登录密码,不少于6位"/></p>
<input type="submit" value="下一步"/>
</form>
</div>
<!--脚部-->
<div class="register_footer">
<div class="register_footer_top">
<div class="register_footer_top_left"></div>
<p>其他注册方式</p>
<div class="register_footer_top_right"></div>
</div>
<div class="register_footer_content">
<a href="#">
<p class="iconfont font22"></p>
<p>微信</p>
</a>
<a href="#">
<p class="iconfont font22"></p>
<p>微信</p>
</a>
<a href="#">
<p class="iconfont font22"></p>
<p>微信</p>
</a>
<a href="#">
<p class="iconfont font22"></p>
<p>微信</p>
</a>
</div>
</div>
</body>
</html>
公共样式style.css代码:
/*全局样式*/
*{margin:0;padding: 0;box-sizing: border-box;}
li{list-style:none;}
a{text-decoration: none;}
i{font-style: normal;}
img{display:block;border:none;}
html,body{height:100%;}
html{font-size:26.66667vw;}
body{font-size:14px;}
.left{float: left;}
.right{float: right;}
/*头部*/
.top_big{
width:100%;
height:0.44rem;
color: #cbcbcb;
font-size: 26px;
position: absolute;
top:0;
left:0;
background:#d43b33;
z-index: 999;
}
.top{
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
padding:0 0.125rem 0 0.14rem;
}
.top>i:first-child>img{
width: 0.19rem;
height: 0.25rem;
}
.top>i:last-child>img{
width: 0.23rem;
height: 0.23rem;
}
.top>input{
width: 2.67rem;
height: 0.3rem;
color: #dbdbdb;
font-size: 14px;
text-align: center;
border: none;
outline: none;
border-radius: 0.05rem;
}
/*主体内容*/
/*导航*/
.main{
width: 100%;
height: 100%;
overflow: auto;
padding: 0.44rem 0 0 0;
padding-bottom: 0.7rem;
}
.main_nav{
width: 100%;
height: 0.4rem;
display: flex;
line-height: 0.4rem;
font-size: 14px;
justify-content: space-between;
padding: 0 0.25rem 0 0.13rem;
border-bottom: 0.005rem solid #cdc2c8;
}
.main_nav a{
color: #393939;
text-align: center;
}
.main_nav a:first-child{
width: 0.7rem;
height: 100%;
color: #bb4537;
border-bottom: 0.02rem solid #ca403d;
box-sizing: border-box;
}
/*焦点图*/
.banner,.banner>img{
width: 100%;
height: 1.38rem;
}
/*内容二*/
.main_two{
width: 100%;
height: 1.04rem;
display: flex;
justify-content: space-between;
padding: 0.15rem 0.345rem 0.15rem 0.43rem;
border-bottom: 0.005rem solid #e0e1e3;
margin-bottom: 0.2rem;
}
.main_two>span{
width: 0.72rem;
height: 100%;
font-size: 12px;
text-align: center;
position: relative;
}
.main_two>span>img{
width: 0.55rem;
height: 0.55rem;
display: inline-block;
vertical-align: middle;
}
.main_two>span>p{
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
/*推荐歌单*/
.recommend{
width: 100%;
padding: 0 0.1rem 0 0.1rem;
}
.recommend_top{
height: 0.16rem;
color: #323335;
display:flex;
justify-content: space-between;
}
.recommend_top>span>img{
width: 0.16rem;
height: 0.16rem;
display: inline-block;
margin-right: 0.06rem;
}
.recommend_top>span>span{font-size: 14px;}
.recommend_top>a{font-size: 12px;color: #696b6a;}
.recommend_content{
width: 100%;
padding-top: 0.2rem;
}
.recommend_content span{
display:flex;
justify-content: space-between;
}
.recommend_content i{
width: 1.13rem;
height: 1.52rem;
font-size: 12px;
position: relative;
}
.recommend_content i>a>img{
width: 100%;
height: 1.13rem;
}
.recommend_content i>a{color: #424345;}
.recommend_content i>a>p{
height: 0.34rem;
position: absolute;
bottom: 0;
left: 0;
}
.recommend_content span:first-child{margin-bottom: 0.18rem;}
/*脚部*/
.footer{
width: 100%;
height: 0.49rem;
position: absolute;
bottom:0;
left:0;
background-color: rgba(0,0,0,0.75);
display:flex;
justify-content: space-between;
padding: 0.07rem 0.28rem 0 0.28rem;
}
.footer>i{
width: 0.5rem;
height: 0.42rem;
color: #a6a8a7;
text-align: center;
font-size: 10px;
}
.footer>i>span{font-size: 25px;}
.footer>i:first-child{color: #fff;}
register.css代码:
.register_top{
width: 100%;
height: 0.43rem;
background-color: #d43b33;
padding: 0.1rem 0 0.11rem 0.18rem;
position: absolute;
top:0;
left:0;
}
.register_top a{
width: 2.15rem;
height: 0.23rem;
color: #fff;
font-size: 16px;
display: flex;
justify-content: space-between;
}
.register_top a>i:first-child{font-size: 20px;}
/*内容*/
.content{
width: 100%;
padding: 0.59rem 0.1rem 0 0.1rem;
}
.content form,.content form p{width: 100%;color: #8f8f8f;font-size: 16px;}
.content form{height: 3.55rem;}
.content form p:nth-child(1){
border: 0.005rem solid #c9c9c9;
border-radius: 0.05rem 0.05rem 0 0;
}
.content form p:nth-child(2){
border-left: 0.005rem solid #c9c9c9;
border-right: 0.005rem solid #c9c9c9;
border-bottom: 0.005rem solid #c9c9c9;
border-radius: 0 0 0.05rem 0.05rem;
margin-bottom: 0.16rem;
}
.content form p:nth-child(1),.content form p:nth-child(2){padding: 0.13rem 0 0.13rem 0.13rem;}
.content form p:nth-child(1) span{color: #2e2e2e;padding-left: 0.11rem;margin-right: 0.1rem;}
.content form p:nth-child(2)>input{padding-left: 0.11rem;}
.content form input{
border: none;
outline: none;
color: #cdcdcd;
}
.content form input:nth-child(3){
width: 100%;
height: 0.4rem;
color: #e0736c;
background-color: #d33a32;
border-radius: 0.05rem;
}
/*脚部*/
.register_footer{
width: 100%;
height: 1.23rem;
position: absolute;
bottom: 0;
left: 0;
padding: 0 0.36rem 0.29rem 0.39rem;
}
.register_footer_top{
width: 100%;
height: 0.12rem;
color: #a3a3a3;
display: flex;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.register_footer_top_left,.register_footer_top_right{
width: 1.03rem;
height: 0.10rem;
border-bottom: 0.005rem solid #e7e8ea;
}
.register_footer_content{
width: 100%;
height: 0.63rem;
display: flex;
justify-content: space-between;
}
.register_footer_content>a{
width: 0.42rem;
height: 0.63rem;
text-align: center;
position: relative;
}
.register_footer_content a p:first-child{
width: 100%;
height: 0.42rem;
color: #666;
font-size: 23px;
line-height: 0.42rem;
border-radius: 50%;
border: 0.005rem solid #bebfc1;
}
.register_footer_content a p:last-child{
font-size: 13px;
color: #a8a9ab;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
下面给大家附上源文件地址链接:https://pan.baidu.com/s/1j9_zvovted9zeNSOPoCxUQ
提取码:y1yw