1.css格式化
<style type="text/css">
.one{
text-indent: 3em;
}
.two{
text-align: center;
}
.three{
text-transform: lowercase;
text-transform: capitalize;
}
.four{
text-shadow:10px 10px 10px red ;
}
.five{
word-spacing: 2em;
letter-spacing: 1em;
}
.six{
text-decoration: line-through;
text-decoration: underline;
text-decoration: overline;
}
.seven{
border: 1px;
100px;
height: 100px;
background-color: #000088;
color: red;
}
.eight{
border: 1px;
1300px;
height: 200px;
background-image: url("腾讯注册_01.png");
background-position: center;
background-repeat: no-repeat;
background-size: 1300px 200px;
}
.nine{
font-family: 'Microsoft Yahei', '微软雅黑', 'simsun', Arial;
font-style: italic;
}
.ten{
font-size: x-large;
}
.eleven{
list-style-type: circle;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
.twelve{
border:red solid thin;
outline:#00ff00 dotted thick;
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
}
.thirteen
{
border-style: solid;
border-top- 15px;
/*border-right- 5px;*/
/*border-bottom- 15px;*/
/*border-left- 5px;*/
}
.fourteen{
padding-top: 10px;
/*padding-right: 0.25em;*/
/*padding-bottom: 2ex;*/
/*padding-left: 20%;*/
}
</style>
</head>
<body>
<div class="one">
设置文本首行缩进
</div>
<div class="two">
设置文本对齐方式
</div>
<div class="three">
we are family
</div>
<div class="four">
设置文本阴影
</div>
<div class="five">
we are family
</div>
<div class="six">
设置文本效果
</div>
<div class="seven">
设置元素内容的字体颜色和背景
</div>
<br/>
<div class="eight">
用图片做背景
</div>
<div class="nine">
设置元素内容的字体
</div>
<div class="ten">
设置字体大小
</div>
<div class="eleven">
<ul>
<li>列</li>
<li>表</li>
<li>格</li>
<li>式</li>
</ul>
</div>
<div>
<table>
<tr>
<td>表</td>
<td>格</td>
</tr>
<tr>
<td>格</td>
<td>式</td>
</tr>
</table>
</div>
<div>
<p class="twelve">设置轮廓</p>
</div>
<div class="thirteen">
设置边框
</div>
<table class="fourteen" border="1">
<tr>
<td>
这个表格单元拥有内边距。
</td>
</tr>
</table>
</body>
</html>
2.css中的2D，3D
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #008000;
100px;
height: 200px;
}
div.one{
border: 1px solid #008000;(沿中心旋转)
100px;
height: 200px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
div.one{
border: 1px solid #008000;(移动)
100px;
height: 200px;
transform: translate(30px,50px);
-o-transform: translate(30px,50px);
-moz-transform: translate(30px,50px);
-webkit-transform: translate(30px,50px);
}
div.one{
border: 1px solid #008000;(增加长度)
transform: scale(2,2);
-webkit-transform: scale(2,2);
-moz-transform: scale(2,2);
-o-transform: scale(2,2);
}
div.one{
border: 1px solid #008000;(沿xy旋转)
transform: skew(40deg,60deg);
-o-transform: skew(40deg,60deg);
-moz-transform: skew(40deg,60deg);
-webkit-transform: skew(40deg,60deg);
}
div.one{
100px;(过度)
height: 200px;
background: #008000;
-webkit-transition:width 3s;
}
div.one:hover{
400px;
height: 600px;
}
.one{
border: 1px solid #008000;(动画)
100px;
height: 200px;
background-color: #0000cc;
animation:center 5s ;
-moz-animation:center 5s;
-webkit-animation: center 5s;
-o-animation: center 5s;
}
@-webkit-keyframes center {
0%{background: #000066; 200px;}
10%{background: red; 300px}
80%{background: #ffff00; 500px}
100%{background: #008000; 800px}
}
div.one{
position: relative;(相对定位)
left: 20px;
top: 30px;
position: absolute;（绝对定位）
left: 40px;
top: 50px;
position: fixed;（固定位置）
left: 20px;
top: 30px;
overflow: auto（自动出现滚动条）
visible（设置滚动条）
hidden（隐藏）超出框的文本部分;
}
div {（盒子模块）
border: 1px solid #008000;
100px;
height: 200px;
background-color: #008000;
padding: 100px(上) ，50px;（右），30px（下），50（左）
margin: 100px;
}
</style>
</head>
<body>
<div>
0%--100%
</div>
<div class="one">
0%--100%
</div>
</body>
</html>