先来个完成图
然后对这几天的认知学习做一个小笔记
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="/">首页</a></li><li><a href="#">业务</a></li><li><a href="#">下载</a></li><li><a href="/product/email.html">服务</a></l><li><a href="https://en./cgi-bin/loginpage">English</a></li></ul></div><div class="imga"><a href="/"><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="/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="/zh-cn/index.html">关于腾讯</a></li><li><a href="#">诚聘人才</a></li><li><a href="/contact_us.html">联系我们</a></li><li><a href="#">商务合作</a></li><li><a href="/">隐私政策</a></li><li class="ty"><a href="#">深圳南山区科技园腾讯滨海大厦</a> copyright© 1998-</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;}
