标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{font-style: italic}/*包括斜体等样式*/
.a01{border: 5px solid #000000}
/*顺序为粗细、线条形式、颜色*/
.a01 p{
text-indent: 50px;
letter-spacing: 100px;
}
/*文本的首行缩进；单字或者字母之间的间距*/
.a01 span{
word-spacing: 20px;
text-transform: capitalize
}
/*字母语言的单词间距，拼写方式：全部小写，全部大写，首字母大写*/
.a02{
border: 5px solid #0001ff;
text-align: right;
text-decoration: line-through;
line-height: 40px
}
/*边框属性；文本对齐方式；文本划线种类；行间距*/
.a03{
width: 800px;
height: 500px;
background-image: url("../img/card1.gif");
border: 5px solid #ff0b00;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 555px 333px ;/*top center button*/
background-size: 50px auto;
}
/*宽，高；背景图片引用（必须事先定义div的宽高）；边框属性；背景循环方式；背景附着；背景图片定位坐标；背景图片大小*/
.a04{
margin: auto;
width: 300px;height: 300px;
border-bottom: 5px solid #000000;
border-top: 5px double #ff0b00;
border-left: 5px dashed #23ff09;
border-right: 5px dotted #0300ff;
border-radius: 180px;
}
/*边框与外围的距离；宽高；下边框属性；上、左、右*/
ul li{
list-style: none;
}
/*列表样式*/
.a05{
width: 154px;height: 30px;
background-image: url("../img/logo_db.png");
background-repeat: no-repeat;
overflow: hidden;
}
.a05 a{
line-height: 200px;
display: block;
height: 300px;
}
.a06{
width: 154px;height: 30px;
background-image: url("../img/logo_db.png");
background-repeat: no-repeat;
}
.a06 a{
text-indent: -100px;
display: block;
}
.a07{
position: relative;
}
.a07 span{
position: absolute;
width: 100%;height: 100%;
background-image: url("../img/logo_db.png");
background-repeat: no-repeat;
}
.a08{
text-decoration: none;
}
.spr1{
width: 180px;height: 180px;
background: url("../img/30d5bc953b7afba77514.jpg");
background-repeat: no-repeat;
border-radius: 90px;
outline: 5px solid #00ff9f;
box-shadow: 15px 15px 5px 0px #10ff82;
}
.spr1:hover{
background-position: -280px 0;
}
.spr1:active{
background-position: 0 -270px;
}
.box1{
width: 200px;height: 200px;
/*background:linear-gradient(yellow,blue);*/
/*background: linear-gradient(to top,yellow,blue);*/
/*background: linear-gradient(45deg,yellow,orange);*/
/*background: linear-gradient(yellow 20%,orange 0);*/
background: linear-gradient(yellow,orange,#000000);
/*径向渐变*/
/*background: radial-gradient(yellow,orange);*/
}
.box2{
width: 150px;height: 150px;
border: 50px solid #0c04ff;
border-radius: 70px;
text-shadow: 10px 10px 5px #ff110e;
font-size: 40px;
}
.box3{
width: 200px;height: 100px;
border: 1px solid #000000;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.box4{
width: 100px;height: 100px;
border: 1px solid #000000;
border-radius: 50px;
border-bottom: double #f4ff00 ;
/*transform: rotate(45deg);*/
/*transform: translate(-50px,0)*/
/*transform: scale(2);*/
/*transform: skew(30deg,30deg);*/
transform: translate(40px,100px);
}
.box5{
width: 100px;height: 100px;background: #55ff30;
border: 1px solid #ff2520;
animation: donghua 2s linear infinite;
}
@keyframes donghua {
/*from{*/
/*width: 100px;height: 100px;background: #55ff30;*/
/*}*/
/*to{*/
/*width: 50px;height: 50px;background: #221fff;*/
/*}*/
0%{
width: 100px;height: 100px;background: #55ff30;
}
50%{
width: 50px;height: 50px;background: #221fff;
}
100%{
width: 100px;height: 100px;background: #55ff30;
}
}
</style>
</head>
<body>
<p>我是一段文字</p><br/><br/>
<div class="a01">
<p>我也是一段文字</p>
<span>we‘re English words</span>
</div>
<div class="a02">
<b>我是另一段文字</b>
</div>
<div class="a03"></div>
<br/><br/>
<div class="a04"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<hr/>
<h1 class="a05">
<a href="http://www.bilibili.com">百度</a>
</h1>
<h1 class="a06">
<a href="http://www.douban.com">豆瓣</a>
</h1>
<a href="http://www.baidu.com" class="a08">
<h1 class="a07">
<span></span>百度
</h1>
</a>
<div class="spr1"></div>
<div class="box1"></div>
<div class="box2">嘿嘿嘿</div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/jason-yijun/p/5589354.html
