@mdjsjdq
2015-11-17T21:22:18.000000Z
字数 1851
阅读 1562
学习
有序列表
<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来做表格
类的定义
类的定义格式:
.类名 {
样式名1 : 样式值1;
样式名2 : 样式值2;
样式名3 : 样式值3;
...
}
推荐使用FireBug来在线实时编辑你的网页
占用空间:
<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 微软雅黑
<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% 表示是左上角 为了保证兼容性也要加上各种前缀