4月27
1.列表操作:
列表的常用形式有图片形式和信息形式,常用的操作
:显示列表,选择列表,新增列表,删除列表,更新列表项
示例代码:
二.页面架构
1.布局方案:
CSS Reset:所有的HTML标签在没有设置样式的时候都被浏览器默认的样式渲染,
CSS样式重置就是删除浏览器的默认样式,可以理解为对于全局的样式定义.对于开发者来说,
若不重置样式,可能会造成不方便.
2.布局解决方案:
了解CSS中属性及其特性,分析问题和需求才能选择和设计合适的布局方案.
2.1水平居中
inline-block + text-align:兼容性好
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
2.2 table + margin:兼容ie8以上,无需设置父元素样式
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
2.3 absolute + transform:绝对定位脱离文档流,不会影响后续元素的布局,
CSS3兼容
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
2.4 flex+justify-content:只需设置父元素的属性,但是有兼容性问题
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
/* 或者下面的方法，可以达到一样的效果 */
.parent {
display: flex;
}
.child {
margin: 0 auto;
}
</style>
2.5 垂直居中
2.5.1 table-cell+ vertical-align:ie8以上
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
2.5.2 absolute + transform
绝对定位脱离文档流，不会对后续元素的布局造成影响。
但如果绝对定位元素是唯一的元素则父元素也会失去高度。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
2.5.3 flex+align-items:
只需设置父节点属性，无需设置子元素,有兼容性问题
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
2.6 水平与垂直居中
2.6.1 inline-block + text-align + table-cell + vertical-align
兼容性好
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
2.6.2 absolute + transform
绝对定位脱离文档流，不会对后续元素的布局造成影响。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
2.6.3 flex + justify-content + align-items
只需设置父节点属性，无需设置子元素
有兼容性问题
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
</style>
5.3 多列布局
1.一列定宽,一列自适应
1.1 float + margin
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="rigth">
<p>right</p>
</div>
</div>
<style>
.left{
float: left;
width: 100px;
}
.rigth{
margin-left: 100px;
}
</style>
要兼容ie6,.left加入margin-left:-3px;
1.2 float+margin+(fix)
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right!</p>
</div>
</div>
</div>
<style>
.left{
float: left;
width: 100px;
}
.right-fix{
float: right;
width: 100%;
margin-left: -100px;
}
.right{
margin-left: 100px;
}
</style>
兼容性比较好
1.3 float + overflow
<style>
.left{
float: left;
width: 100%;
}
.right{
overflow: hidden;
}
</style>
1.4 table
<style>
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left{
display: table-cell;
width: 100px;
}
.right{
display: table-cell;
}
</style>
2 2列定宽,一列自适应
<div class="parent">
<div class="left">
<p>left!!!</p>
</div>
<div class="center">
<p>Center!!</p>
</div>
<div>
<p>Center!</p>
</div>
<div class="right">
<p>right!!</p>
</div>
</div>
<style>
.left,.center{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
</style>
响应式布局
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<!--媒体查询-->
@media screen and (max-width: 320px) {
/* 视窗宽度小于等于 320px */
}
@media screen and (min-width: 320px) {
/* 视窗宽度大于等于 320px */
}
@media screen and (min-width: 320px) and (max-width: 1000px){
/* 视窗宽度大于等于 320px 且小于等于 1000px */
}
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
</head>
<body>
<!--页面优化技巧-->
<p>
页面优化可以提升页面的访问速度从而提高用户体验，优化的页面可以更好的提升 SEO 的效果同时也可以提高代码的可读性和维护性。
从下面的几个方面可以进行页面的优化：
减少请求数
图片合并
CSS 文件合并
减少内联样式
避免在 CSS 中使用 import
减少文件大小
选择适合的图片格式
图片压缩
CSS 值缩写（Shorthand Property)
文件压缩
页面性能
调整文件加载顺序
减少标签数量
调整选择器长度
尽量使用 CSS 制作显示表现
增强代码可读性与可维护性
规范化
语义化
模块化
1.减少请求
请求数与网页加载时长有直接的关系。所以对于图标可以使用 Sprite 来减少小图标的请求数，
对于文本则可以通过合并缩小。（避免使用 import 引入 CSS 文件，并且请求是同步请求）
2.减少文件大小
页面上最大的流量产生与多媒体（视频或图片）所以为了减少文件大小，开发者需要使用合适的媒体格式并对文件进行压缩。
3.页面性能
页面文件的加载顺序自上而下，样式则需要放置于最顶部，脚本则放置于底部（因为 JavaScript 的加载会阻塞页面的绘制）。
减少标签的数量也可以起到提升性能的作用，缩短 CSS 选择器的层级来提高性能。
减少使用消耗性能的样式属性例如下面的这些：
expression .class{width: expression(this.width > 100?'100px':'auto')}
filter .class{filter:alpha(opacity=50)}
border-radius
box-shadow
gradients
页面中所使用的图片尺子应该与现实尺寸相符否则在图标下载后需要重绘导致性能下降。
能使用样式（使用 CSS 的类名）实现的交互就不使用脚本（需要重绘导致多次页面渲染）来实现。
可读性与可维护性
开发之前需要明确规范，尤其是对人协作时。使用 HTML5 语义化的标签来制作页面，同样也适用于样式选择器的 ID 与类名。
在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式，提高可复用性并减少文件大小。
注释注释注释，在代码中添加注释，利人利己。
</p>
</body>
