码迷,mamicode.com
首页 > Web开发 > 详细

css格式化的基本运用

时间:2015-12-06 12:59:34      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

   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;
width: 100px;
height: 100px;
background-color: #000088;
color: red;
}
.eight{
border: 1px;
width: 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-width: 15px;
/*border-right-width: 5px;*/
/*border-bottom-width: 15px;*/
/*border-left-width: 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;
width: 100px;
height: 200px;
}


div.one{
border: 1px solid #008000;(沿中心旋转)
width: 100px;
height: 200px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
div.one{
border: 1px solid #008000;(移动)
width: 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{
width: 100px;(过度)
height: 200px;
background: #008000;

-webkit-transition:width 3s;
}
div.one:hover{
width: 400px;
height: 600px;
}

.one{
border: 1px solid #008000;(动画)
width: 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;width: 200px;}
10%{background: red;width: 300px}
80%{background: #ffff00;width: 500px}
100%{background: #008000;width: 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;
width: 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>

css格式化的基本运用

标签:

原文地址:http://www.cnblogs.com/luofeng316148334/p/5023214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!