CSS代码段

来源：互联网发布：大数据用英文怎么说编辑：程序博客网时间：2024/06/05 03:22

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,html{
width:95%;
height:95%;
font-family: "微软雅黑";
}
#root{
width:100%;
height:150%;
background:#ccc;
}
#sonDiv{
background:#1BBC9C;
width:100px;

position:relative;
left:10%;

height:100px;
line-height: 100px;

text-align: center;

opacity: 0.5
}
#sonDiv:after{
content: "";
top: 20px;
right:10px;
position:absolute;
border-top: 5px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent
}
#sonDiv1{
background:#1BBC9C;
height: 100px;
width:100px;

vertical-align: middle;
overflow: hidden;
white-space: nowrap;
overflow-x:auto;
}
#sonDiv2{
background:#1BBC9C;
height: 100px;
width:100px;
position:relative;
left:30%;
}
#sonDiv2>div{
background:#E8CF29;
height: 50px;
width:50px;
position:absolute;
left:10%;
}
.p1{
display:inline;
white-space: pre-wrap;
}
.p1:first-letter{
text-transform: uppercase;
}
.p1::-moz-selection{
color:#796EB1;
}
.p3:first-letter{
text-transform: uppercase;
}
.p2:first-letter{
font-size: 25px;
color:#174F7E;
}
.p2{
word-spacing: 20px;
letter-spacing: 10px;
cursor: pointer;
}
#sonDiv3{
width: 20px;
height:20px;
background: #3E98C5;
float: left;
margin:2px;
zoom:3;
}
#sonDiv4{
width: 20px;
height:20px;
background: #3E98C5;
float: left;
margin:6px;
clear: left;
}
#sonDiv5{
width: 20px;
height:20px;
background: #3E98C5;
float: left;
margin:6px;
}
#sonDiv6{
width: 200px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
}
.blue{
width: 60px;
margin:5px;
background: #00D8FF;

}
#span1{
background:green;
height:100px;
width:1000px;
margin:100px;
}
</style>
<script type="text/javascript">
//计时函数
/*var timer=setInterval(function(){
alert("rabbit");
},5000);*/
</script>
<title>兔子妮妮的css测试~2015-7-15</title>
<script type="text/javascript" src="../jquery-2.1.1.min.js" ></script>
</head>
<body>
<div id="root">
<div id="sonDiv">小酸奶~~</div>
<div id="sonDiv1">
<p>1234567890abcdefghijklmnop~1234567890abcdefghijklmnop~勤劳的翻动滚动条的孩纸,那我就告诉你个秘密吧~西瓜大那么西瓜皮也大~</p>
</div>
<div id="sonDiv2">
<div>456</div>
</div>
<p class="p1">hello hello hello~</p>
<p class="p1">how are you</p>

<p class="p2">洋娃娃和小熊跳舞跳吖跳吖121~她们跳的是圆圈舞吖跳吖跳吖121</p>
<p class="p3">sunny day~</p>
<div id="sonDiv3"></div>
<div id="sonDiv4"></div>
<div id="sonDiv5"></div>

<div id="sonDiv6">
<div class="blue">喵喵喵(ie不支持)</div>
<div class="blue">汪汪汪</div>
<div class="blue">哞哞哞</div>
</div>

<div id="sonDiv7">
<div style="display:inline">喵喵喵(ie不支持)</div>
<div style="display:inline">汪汪汪</div>
<div style="display:inline">哞哞哞</div>
</div>

<span id="span1">12345</span>

</div>
</body>

</html>

希望对大家有用～

0 0