[关闭]
@mdjsjdq 2015-11-17T21:22:18.000000Z 字数 1851 阅读 1562

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

学习


常识

切片

项目列表

有序列表

  1. <ol>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. </ol>

无序列表

  1. <ul>
  2. <li>...</li>
  3. <li>...</li>
  4. <li>...</li>
  5. </ul>

表格

  1. <table> <!--表格标签,属性有width border cellpadding(间距) cellspacing(边距) -->
  2. <tr> <!--行标签-->
  3. <td></td> <!--列标签-->
  4. <td></td>
  5. <td></td>
  6. </tr>
  7. </table>

推荐使用Div+ CSS来做表格

CSS样式

类的定义

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

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

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

占用空间: =+2+2+2

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

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

计算尺寸

列宽=[总宽-(列数-1)*间隙宽]/列数

在框里插入内容

字体简写

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

hover鼠标响应效果

  1. <style type="text/css">
  2. .mycon {
  3. width: 229px;
  4. height: 350px;
  5. background: red; //no-repeat
  6. }
  7. .mycon:hover { //--hover的版式
  8. background: yellow;
  9. }
  10. </style>

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

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

更加平滑的过度效果

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

更多的动画效果

  1. transform:translate(40px,50px); //偏移 水平偏移 垂直偏移
  2. transform:rotate(30deg); //旋转
  3. transform:scale(1.5); //缩放 放大150%
  4. transform:skew(40deg,0deg);
  5. //扭曲 水平偏移40度 垂直偏移0度
  6. //transform这个样式,要想要在IE9工作加上-ms-前缀,chrome中-webkit-前缀,Firefox中加上-moz-前缀
  7. -ms-transform:skew(40deg,0deg);
  8. -webkit-transform:skew(40deg,0deg);
  9. -moz-transform:skew(40deg,0deg);
  10. transform:skew(40deg,0deg);
  11. //变形的中心
  12. tarsform-origin:水平位置 垂直位置
  13. tarsform-origin:left top //也可以是tarsform-origin:0% 0% 表示是左上角 为了保证兼容性也要加上各种前缀
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注