第十一章，用CSS进行布局开始布局注意事项1、内容与显示分离2、布局方法：固定宽度和响应式布局固定宽度，整个页面和每一栏都有基于像素的宽度响应式布局也称为流式页面，使用百分数定义宽度3、浏览器问题注：HTML5 shiv 是少有的必须在head中加载JavaScript的情况之一 ...
第十一章，用CSS进行布局
开始布局注意事项
1、内容与显示分离
盒模型
CSS处理
网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型。
设置元素的高度和宽度
对定宽页面使用像素，对响应式Web设计使用百分数。
/** border-box规则*/* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}使元素浮动
float属性使元素浮动在文本或其他元素之上，可以使用这种技术让文本环绕在图像或其他元素周围，也可以使用这种技术创建多栏布局。
/** .clearfix 清楚浮动*/.clearfix:before,.clearfix:after{ content: " "; display: table;}.clearfix:after{ clear: both;}.clearfix{ *zoom:1;}/** 相对定位*/.example{ position: relative; top: 2px; right: 3px;....}在栈中定位元素
对于定位的元素，z-index最高的显示在最上面，不管该元素在HTML中出现的顺序。
<!DOCTYPE html><html><head> <style type="text/css"> body{ background: #5af; } div{ border: 1px solid #666; height: 125px; position: absolute; width: 200px; } .box1{ background: pink; left: 110px; top: 50px; z-index: 120; } .box2{ background: yellow; left: 0; top: 130px; z-index: 530; } .box3{ background: #ccc; position: static; /* 静态的，没有任何效果 */ z-index: 1000; } .box4{ background: orange; left: 285px; top: 65px; z-index: 3; } </style></head><body> <div class="box1"><p>Box 1</p></div> <div class="box2"><p>Box 2</p></div> <div class="box3"><p>Box 3</p></div> <div class="box4"><p>Box 4</p></div></body></html>第十二章，构建响应式网站
只有HTML中不包含width和height属性，图像才有可能变成可伸缩的图像。
.post-photo{ max-width:100%;}@media logic type and (feature: value){ /* 目标CSS样式规则写在这里 */} <!-- 条件注释 --> <!--[if lt IE 9]> <link rel="stylesheet" href="css/old-ie.css" /> <![endif]-->
第十四章，使用CSS3进行增强
为不支持某些属性的浏览器使用polyfill（通常又称垫片，shim），通常使用js实现，可以为较弱的浏览器提供一定程度的对HTML5和CSS3的API和属性的支持。
厂商前缀
-webkit-：WebKit/Safari/旧版本的Chrome
div{ -webkit-border-radius:10px; border-radius:10px;}<!DOCTYPE html><html><head> <style type="text/css"> div{ background: #fff; } .shadow{ -webkit-box-shadow:4px 4px 5px #999; box-shadow: 4px 4px 5px #999; } .shadow-negative{ -webkit-box-shadow:-4px -4px 5px #999; box-shadow: -4px -4px 5px #999; } .shadow-spread{ -webkit-box-shadow:4px 4px 5px 3px #999; box-shadow: 4px 4px 5px 3px #999; } .shadow-offsets-0{ -webkit-box-shadow:0px 0px 9px 3px #999; box-shadow: 0px 0px 9px 3px #999; } .inset-shadow{ -webkit-box-shadow:2px 2px 10px #666 inset; box-shadow: 2px 2px 10px #666 inset; } .multiple{ -webkit-box-shadow: 2px 2px 10px rgba(255,0,0,.75), 5px 5px 20px blue; box-shadow: 2px 2px 10px rgba(255,0,0,.75), 5px 5px 20px blue; } </style></head><body> <div class="shadow"><p>Shadow with Blur</p></div> <div class="shadow-negative"><p>Shadow with Negative Offsets and Blur</p></div> <div class="shadow-spread"><p>Shadow with Blur and Spread</p></div> <div class="shadow-offsets-0"><p>Shadow with Offsets Zero,Blur,and Spread</p></div> <div class="inset-shadow"><p>Inset Shadow</p></div> <div class="multiple"><p>Multiple Shadows</p></div></body></html>为元素设置不透明度
使用opacity属性可以修改元素的透明度。
第十五章，列表
有序列表：ol为父元素，li为列表项
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：HTML5与CSS3基础教程第八版学习笔记11~15章
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
