《立体感+ 网店店铺动态页面快速实现》读书笔记

学习

常识

• 分辨率和尺寸
• DPI （每英寸数，简称DPI dots per inch） 长度单位和像素单位
• 颜色的表示方法 十六进制 RGB RGBa

切片

• 建立和合并切片
• PS CC 独特的功能 单独保存图层为图片。（命名图层加图片文档后缀【.jpg .png .gif】加上品质80% 或者8）-文件-生成

项目列表

有序列表

<ol>
<li>...</li> 
<li>...</li> 
<li>...</li> 
</ol>

无序列表

<ul>
<li>...</li> 
<li>...</li> 
<li>...</li> 
</ul>

表格

<table>    <!--表格标签，属性有width border cellpadding（间距） cellspacing（边距） -->
<tr>    <!--行标签-->
<td></td>    <!--列标签-->
<td></td>
<td></td>
</tr>
</table>

推荐使用Div+ CSS来做表格

CSS样式

类的定义

类的定义格式:
.类名 {
样式名1 : 样式值1;
样式名2 : 样式值2;
样式名3 : 样式值3;
...
}

一切从框开始，介绍盒模型

推荐使用FireBug来在线实时编辑你的网页

占用空间: $占用空间=内容框+内补间*2+边框*2+外补间*2$

在复杂的布局也没问题：定位的技术

<div style="width:300px;height:300px;background:#B42527;position:relative;">
<div style="width:100px;height:100px;background;#B4A225;position:absolute;left:300px;top:300px;">
</div>
</div>

计算尺寸

列宽=[总宽-（列数-1）*间隙宽]/列数

在框里插入内容

字体简写

<!--font:风格 粗细 大小/行间距 字体名列表-->
font:iatlic 400 14px/30px 微软雅黑

hover鼠标响应效果

<style type="text/css">
.mycon {
width: 229px;
height: 350px;
background: red;   //no-repeat
}
.mycon:hover {   //--hover的版式
background: yellow;
}
</style>

如果我们需要为A框下的B框设置样式，可直接写成A B{样式设置}，如果我们需要为A框和B框都设置成同一样式，可直接写成A ,B{样式设置}

display:none;   //比较特殊的hover效果
display:block;

更加平滑的过度效果

<style type="text/css">
.mycon {
width: 229px;
height: 350px;
background: red;   //no-repeat
-webkit-transition: all 0.3s linear 0s   /*属性 时长 速度曲线 效果延迟 其中过渡曲线有：ease[逐渐变慢] linear[匀速] ease-in[加速] ease-out[减速] ease-in-out[加速然后减速] */
-o-transition: all 0.3s linear 0s
transition: all 0.3s linear 0s
}
.mycon:hover {   //--hover的版式
background: yellow;
}
</style>

更多的动画效果

transform:translate(40px,50px);   //偏移 水平偏移 垂直偏移
transform:rotate(30deg);   //旋转
transform:scale(1.5);   //缩放 放大150%
transform:skew(40deg,0deg);
//扭曲 水平偏移40度 垂直偏移0度
//transform这个样式，要想要在IE9工作加上-ms-前缀，chrome中-webkit-前缀，Firefox中加上-moz-前缀
-ms-transform:skew(40deg,0deg);
-webkit-transform:skew(40deg,0deg);
-moz-transform:skew(40deg,0deg);
transform:skew(40deg,0deg);
//变形的中心
tarsform-origin:水平位置 垂直位置
tarsform-origin:left top //也可以是tarsform-origin:0% 0% 表示是左上角 为了保证兼容性也要加上各种前缀