新手小白代码重复的地方有点多请高人指点指点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录QQ邮箱</title>
<link rel="short icon" href="img/icon.png">
</head>
<style>
*{
margin: 0px;
padding: 0px;
border: 0px;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.nav{
width: 100%;
height: 40px;
background-color: #EFF4FA;
}
.nav img{
height: 30px;
width: 120px;
margin-left: 12px;
margin-top: 5px;
}
.nav ul {
float: right;
}
.nav ul li {
float: right;
margin-top: 10px;
margin-right: 10px;
font-size: 12px;
}
.main{
width: 1000px;
margin: 50px auto;
}
.main-left{
float: left;
}
.main-right{
margin-top: 40px;
float: left;
width: 310px;
height: 40px;
border: 1px solid #A0B1C4;
border-radius: 8px 8px 0 0;
background-color:#F9FBFE ;
}
.main-right a{
line-height: 40px;
margin-left: 60px;
color: #B2C3C3;
}
.main-right>a:active{
color: black;
}
.main--{
display: inline-block;
width: 310px;
border:1px solid #A0B1C4;
border-top: 0px;
border-radius: 0 0 8px 8px;
height: 350px;
}
.input1{
width: 250px;
height: 35px;
margin: 50px 10px 20px 20px;
border: 1px solid #A0B1C4;
border-radius: 5px;
font-size: 20px;
padding-left: 20px;
}
.input1::-webkit-input-placeholder{
font-size: 12px;
}
.input2::-webkit-input-placeholder{
font-size: 12px;
}
.input2{
width: 250px;
height: 35px;
margin: -20px 20px;
border: 1px solid #A0B1C4;
border-radius: 5px;
font-size: 20px;
padding-left: 20px;
}
.input3{
width: 270px;
height: 35px;
margin: 40px 20px;
border: 1px solid #5A97DD;
border-radius: 5px;
font-size: 16px;
color: white;
background-color: #5A97DD;
}
.main-->ul li:nth-last-child(1){
margin: 30px 80px;
}
.main-->ul li img{
width: 20px;
height: 20px;
vertical-align: -5px;
}
.ul1>li{
color: dodgerblue;
font-size: 12px;
float: left;
}
.main-foot{
float: left;
}
.main-foot ul li{
float: left;
margin-left: 35px;
font-size: 12px;
}
.foot1{
position: fixed;
width: 100%;
height: 80px;
background-color: #EFF4FA;
bottom: 0px;
}
.foot{
width: 700px;
margin: 10px auto;
}
.foot ul{
overflow: hidden;
}
.foot ul li{
float:left;
font-size: 12px;
}
.foot ul li a{
color: #1D77BF;
}
.foot-3{
width: 650px;
margin: 10px auto;
}
.foot-3 ul{
overflow: hidden;
}
.foot-3 ul li{
float:left;
font-size: 12px;
}
.foot-3 a{
color: #B2C3C3;
}
</style>
<body>
<header class="nav">
<a href="#">
<img src="img/qq.png" alt="暂无法加载">
</a>
<ul>
<li><a href="#">企业邮箱</a></li>
<li><a href="#">English</a> | </li>
<li><a href="#">手机版</a> | </li>
<li><a href="#">基本版</a> | </li>
</ul>
</header>
<div class="main">
<div class="main-left">
<img src="img/nei.png" alt="">
</div>
<div class="main-right">
<a >微信登录</a>
<a style="color: black;">QQ登录</a>
</div>
<div class="main--">
<ul>
<li>
<input type="text" placeholder="QQ号/手机号/QQ邮箱" class="input1" >
</li>
<li>
<input type="password" placeholder="密码" class="input2">
</li>
<li>
<input type="button" value="登录" class="input3">
</li>
<li>
<input type="checkbox">
<span>下次自动登录</span>
<img src="img/感叹号中.png" alt="">
</li>
</ul>
<div class="main-foot">
<ul>
<li>
<a href="">找回密码</a>
</li>
<li>
<a href="">扫码快速登录</a>
</li>
<li>
<a href="">注册账号</a>
</li>
</ul>
</div>
</div>
</div>
<footer class="foot1">
<div class="foot">
<ul>
<li><a href="#">关于腾讯 | </a></li>
<li><a href="#">服务条款 | </a></li>
<li><a href="#">隐私政策 | </a></li>
<li><a href="#">客服中心 | </a></li>
<li><a href="#">联系我们 | </a></li>
<li><a href="#">帮助中心 | </a></li>
<li>
<a href="#"> © 1998 - 2022 Tencent Inc. All Rights Reserved.</a>
</li>
</ul>
</div>
<div class="foot-3">
<ul>
<li><a href="#">粤公网安备 44030002000001号 </a></li>
<li><a href="#">ICP备案号 粤B2-20090059 </a></li>
<li><a href="#">增值电信业务经营许可证 粤B2-20090059</a></li>
</ul>
</div>
</footer>
</body>
</html>更多推荐
【QQ邮箱首页仿写】刚学完布局仿写的QQ邮箱首页float用太多了求修改
发布评论