仿腾讯QQ注册页面
作者:互联网
今天想了想要写什么博文,最终打算把之前自己用CSS
和HTML
写的一个【仿腾讯QQ注册页面】小项目分享给大家!
由于个人还没有学js,所以该页面还是一个完全静态的页面!
其次,还有一些小细节没有实现。所以后期我可能会继续完善,想要最新的源码可以去我的GitHub上下载。
真实的腾讯注册页面
我做的腾讯注册页面
代码实现如下:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Lencamo</title>
<meta name="Lencamo" content="欢迎注册QQ" />
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(231, 226, 226);
}
.box {
margin: 100px auto;
width: 880px;
height: 860px;
background-color: #ffffff;
}
.nav {
height: 80px;
font-size: 17px;
/* background-color: rgb(209, 239, 248); */
}
.nav img {
float: left;
width: 630px;
height: 80px;
}
.nav form .font {
float: left;
height: 80px;
width: 100px;
border: none;
font-size: 17px;
color: #666666
/* background-color: rgb(126, 89, 89); */
}
.nav p a {
display: inline-block;
margin-left: 30px;
line-height: 80px;
text-decoration: none;
color: #666666;
}
.nav p a:hover,
.nav form .font:hover {
color: #000000;
}
.register {
margin: 0px 180.5px;
width: 515px;
height: 750px;
background-color: #fff;
}
.register h1 {
margin-left: 15px;
height: 100px;
font-size: 45px;
line-height: 100px;
font-weight: 400;
/* background-color: rgb(230, 150, 150); */
}
.register .content {
margin: 0px 15px;
height: 70px;
font-size: 30px;
/* background-color: rgb(94, 240, 196); */
}
.register .content p {
float: left;
}
.register .content a {
float: right;
text-decoration: none;
color: rgb(97, 171, 255);
}
.register div[class^="select"] {
height: 105px;
}
.register div input {
margin: 28px 15px;
height: 50px;
width: 480px;
border: 0.8px solid rgb(179, 179, 179);
border-radius: 5px;
font-size: 20px;
text-indent: 20px;
color: rgb(179, 179, 179);
}
.register div select {
float: left;
margin: 28px 15px 5px;
height: 50px;
width: 155px;
border: 0.8px solid rgb(179, 179, 179);
border-radius: 5px;
font-size: 20px;
text-indent: 20px;
/* color: rgb(179, 179, 179); */
}
.register div .phone_number {
float: left;
margin: 28px 5px 15px;
height: 50px;
width: 305px;
border: 0.8px solid rgb(179, 179, 179);
border-radius: 5px;
font-size: 20px;
text-indent: 20px;
/* color: rgb(179, 179, 179); */
}
.register div input:hover,
select:hover {
border-color: rgb(119, 119, 119);
}
.register div input:focus,
select:focus {
border: 0.8px solid #549df8;
/*由于border较细,将outline设置为none。视觉上体验更佳!标签:QQ,color,register,height,rgb,179,腾讯,font,页面
来源: https://www.cnblogs.com/Lencamo/p/14808308.html