先来个完成图
然后对这几天的认知学习做一个小笔记
1. 一个盒子的实际高度(宽度)是由content+padding+border+margin组成。
可以通过设定width和height来控制content的大小,并且对于同一个盒子,都可以分别设定4条边的border,padding和margin。
2. 行内元素margin设置 非行内元素块之间margin设置 父子块之间的margin设置
其中子块的margin设置将会以父块的content为参考。
这个一定要理解好,否则会造成明明写好了css样式,效果却不如人意。
项目实战
使用HTML+CSS打造QQ邮箱登录界面
HTML片段
<head>
<title>QQ邮箱登录界面</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo1.jpg"/>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="header">
<div class="header_top">
<ul>
<li><a href="https://mail.qq/">首页</a></li>
<li><a href="#">业务</a></li>
<li><a href="#">下载</a></li>
<li><a href="http://kf.qq/product/email.html">服务</a></l>
<li><a href="https://en.mail.qq/cgi-bin/loginpage">English</a></li>
</ul>
</div>
<div class="imga">
<a href="https://mail.qq/"><img src="images/ph.jpg" height="100" width="230" /></a>
</div>
<!-- 登录界面-->
<div class="main">
<!-- 左侧信息栏 -->
<div class="main_left">
<h1>QQ邮箱 常联系!</h1>
<h4>没有什么能够阻挡</h4>
</br>
<p>你对自由的向往</p>
<p>天马行空的生涯</p>
<p>你的心了无牵挂</p>
<span>选自《蓝莲花》</span>
</div>
<!-- 右侧登录界面 -->
<div class="main_right">
<div class="index">
<form>
<p class="headline">用户登录</p>
<p class="username">用户名:</p>
<input type="text" placeholder="请输入您的账号">
<p class="password" >密码:</p>
<input type="password" placeholder="请输入密码">
<input type="submit" value="登录" name="login" >
</br>
<p class="password"><input type="checkbox" name="rempas" /> 记住密码</p>
<p class="wanjipwd"> <a href="https://aq.qq/v2/uv_aq/html/reset_pwd/pc_reset_pwd_input_account.html?v=3.0&old_ver_account=">
找回密码</a></p>
</br>
<p class="noaccount">没有账号?<a href="#">立即注册</a></p>
</form>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<ul>
<li><a href="https://www.tencent/zh-cn/index.html">关于腾讯</a></li>
<li><a href="#">诚聘人才</a></li>
<li><a href="http://mail.qq/contact_us.html">联系我们</a></li>
<li><a href="#">商务合作</a></li>
<li><a href="https://privacy.qq/">隐私政策</a></li>
<li class="ty"><a href="#">深圳南山区科技园腾讯滨海大厦</a> copyright© 1998-2019</li>
</ul>
</div>
</body>
</html>
/* CSS Document */
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background:url(images/bkgrd.jpg);
background-size: 100%;
}
.header{
width: 1200px;
height: 870px;
margin: 0 auto;
}
.header_top{
margin-top: 10px;
height: 50px;
line-height: 50px;
}
.header_top>ul>li{
float: right;
font-size: 15px;
}
.header_top>ul>li>a{
text-decoration: none;
color: #152b3c;
padding:15px 30px;
}
.header_top>ul>li a:hover{
border: 1px solid white;
border-radius:5%;
color: white;
}
.imga{
position:relative;
display:inline-block;
margin-top:-60px;
margin-left:10px;
}
.main{
width:1200px;
height: 450px;
}
.main_left{
width:460px;
height: 250px;
float: left;
padding:85px 110px
}
.main_left>p{
padding: 8px 0;
font-size: 30px;
}
.main_left>span{
padding: 8px 0;
font-size: 16px;
color:#999;}
.main_right{
width: 480px;
height: 450px;
float: right;
}
.main_right .index{
width: 330px;
height: 350px;
background-color:rgba(255,255,255,0.75);
margin: 50px 90px;
}
.headline{
font-size: 22px;
text-align: center;
padding: 20px;
}
input[type="text"],
input[type="password"],
input[type="submit"]{
-web-kit-appearance:none;
-moz-appearance: none;
display: block;
margin: 0 auto;
font-size:15px;
width: 240px;
}
input[type="text"],
input[type="password"]{
height:35px;
border-radius:3px;
border:1px solid #c8cccf;
color:#6a6f77;
outline:0;
}
input[type="submit"]{
margin-top: 25px;
height: 35px;
background: #357eb8;
color: #bcedff;
font-weight: bold;
font-size: 16px;
}
input[type="submit"]:hover{
background: #0e62a3;
cursor: pointer;
}
.username{
display: block;
margin: 5px 0 5px 42px;
font-size:17px;
/*color: #6a6f77;*/
}
.password{
/*color: #6a6f77;*/
display: block ;
float: left;
margin-left: 46px;
font-size: 17px;
}
.wanjipwd{
display: block;
float: right;
margin-right: 46px;
font-size: 15px;
}
.noaccount{
display: block;
float: right;
margin-right: 46px;
font-size: 15px;
}
.noaccount>a{
text-decoration: none;
}
.footer{
width: 1000px;
margin:30px auto;
}
.footer>ul{
margin-left: 15px;
}
.footer>ul>li{
float: left;
}
.footer>ul>li>a{
text-decoration: none;
border-left: 2px solid ;
padding:0 10px;
}
更多推荐
使用HTML+CSS打造经典登录界面 QQ邮箱 链接官网登录
发布评论