html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ注册--香江小海涛</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="left">
<div class="im">
<!-- <img src="img/1.PNG"> -->
</div>
<div class="logo">
<a href="#">QQ</a>
</div>
</div>
<div id="right">
<div class="line1">
<div class="qqlh">
<img src="img/a.PNG" alt="靓号">
<div class="qqlh_bj">QQ靓号</div>
</div>
<div class="tnav">
<!-- <img src="img/mail.PNG" > -->
<a href="">邮箱地址</a>
<a href="">简体中文</a>
<a href="">意见反馈</a>
</div>
</div>
<div class="mline1">
<div class="line2">
欢迎注册QQ
</div>
<div class="line3">
每一天乐在沟通
<a href="#">免费靓号</a>
</div>
<div class="line4">
<input type="text" name="" id="" value="" placeholder="昵称" />
</div>
<div class="line5">
<input type="password" name="" placeholder="密码" />
</div>
<div class="line6">
<select name="phonenum">
<option value="+49">+49</option>
<option value="+86">+86</option>
<option value="+55">+55</option>
<option value="+21">+21</option>
</select>
<input class="shouji" type="text" name="" id="" value="" placeholder="手机号码" />
<br>
可通过手机号找到密码
</div>
<div class="line7">
<input type="button" name="register" id="register" value="立 即 注 册" />
<!-- <button type="button">注册</button> -->
</div>
<div class="line8">
<input type="checkbox" name="know" id="know" value="know1" />同时开通QQ空间
<br>
<input type="checkbox" name="know" id="know" value="know2" />我已阅读并同意相关服务条款个隐私条款
</div>
<div id="footer">
©2021 香江小海涛
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#wrapper #main #left .im {
background-image: url(../img/1.PNG);
width: 480px;
position: fixed;
height: 100%;
background-size: cover;
}
#wrapper #main #left {
float: left;
}
#wrapper #main #right {
float: right;
/* border: 2px solid green; */
width: 1000px;
}
#wrapper #main #left .logo a {
font-size: 50px;
text-decoration: none;
position: fixed;
left: 30px;
top: 5px;
}
@media (max-width:1250px) {
#wrapper #main #left .im {
/* display: none; */
width: 240px;
background-size: cover;
}
}
@media (max-width:1010px) {
#wrapper #main #left .im {
display: none;
/* width:240px ;
background-size: cover; */
}
}
@media (max-width:800px) {
#wrapper #main #right .line1 .qqlh {
display: none;
/* width:240px ;
background-size: cover; */
}
}
@media (max-width:800px) {
#wrapper #main #right {
/* display: none; */
width: 500px;
/* background-size: cover; */
}
}
#wrapper #right .line1 .qqlh .qqlh_bj {
width: 70px;
height: 30px;
background-color: #fc4f52;
position: absolute;
left: 0;
top: 0;
z-index: 99;
color: white;
padding-left: 34px;
border-radius: 5px;
}
#wrapper #right .line1 .qqlh {
position: relative;
margin-left: 350px;
}
#wrapper #right .line1 .qqlh img {
position: absolute;
left: 0;
top: -11.5px;
z-index: 100;
}
/* 句对定位会使其位置脱离文档流 */
/* #ff744d */
#wrapper #right {}
/* 浮动无法居中? */
#wrapper #right .line2 {
margin-top: 60px;
font-size: 40px;
/* margin: auto; */
}
#wrapper #right .line1 {
/* border: 1px solid lightblue; */
}
#wrapper #right .line1 .tnav {
text-align: right;
margin-top: 20px
}
#wrapper #right .line1 .tnav a {
margin-right: 40px;
font-size: 15px;
text-decoration: none;
color: #AAAAAA;
;
}
#wrapper #right .line3 a {
text-decoration: none;
color: limegreen;
/* margin-left: 20px; */
}
#wrapper #right .line3 {
color: lightblue;
font-size: 25px;
margin-top: 10px;
}
#wrapper #right .mline1 .line5 input {
height: 35px;
margin-top: 30px;
width: calc(80% - 20px);
/* border: 1px solid lightblue; */
font-size: ;
border-radius: 5px;
}
#wrapper #right .mline1 .line4 input {
height: 35px;
margin-top: 60px;
width: calc(80% - 20px);
/* border: 1px solid lightblue; */
font-size: ;
border-radius: 5px;
}
#wrapper #right .mline1 {
/* border: 1px solid greenyellow; */
width: 500px;
margin: auto;
/* font-size: 10px; */
color: ;
}
#wrapper #right .mline1 select {
height: 37px;
margin-top: 30px;
width: 120px;
/* border: 2px solid darkturquoise; */
padding-left: 10px;
font-size: ;
border-radius: 5px;
}
#wrapper #right .mline1 select+input {
height: 30px;
margin-top: 30px;
width: 195px;
/* border: 2px solid fuchsia; */
font-size: ;
border-radius: 5px;
margin-left: 20px;
}
#wrapper #right .mline1 .line6 {
font-size: 10px;
color: #aaa;
}
#wrapper #right .mline1 .line7 input[type='button']
/* ,#wrapper #right .mline1 .line7 button[type='button'] */
{
background-color: dodgerblue;
width: calc(80% - 10px);
color: white;
height: 50px;
margin-top: 27px;
cursor: pointer;
/* 手势 */
}
#wrapper #right .mline1 .line7 input[type='button']:hover {
background-color: royalblue;
}
#wrapper #right .mline1 .line8 input[type='checkbox'] {
/* font-size: 5px; */
/* width: 50px; */
height: auto;
margin: ;
padding: ;
}
#wrapper #right .mline1 .line8 {
font-size: 10px;
margin-top: 20px;
/* width: 50px; */
/* border: 1px solid red */
}
#wrapper #right .mline1 #footer {
margin-top: 150px;
font-size: 6px;
}