主页
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Css制作练习</title>
<link rel="stylesheet" href="Css1.css" type="text/css">
<style type="text/css">
/*div{*/
/*width: 800px*/
/*margin-top:0px; width:510px; height:200px; margin-right:auto; margin-left:auto;*/
/*}*/
[title=te]{
/*属性和值选择器*/
color: aliceblue;
}
[title~=ss]{
/*只要title属性名中含有ss就执行该语句*/
color: antiquewhite;
}
</style>
</head>
<body>
<p class="pclass">Css轮廓测试</p>
<a href="http://baidu.com" >Css链接测试</a>
<ul class="ul1">
<li>Css图标测试</li>
<li>Css图标测试</li>
</ul>
<ul class="ul2">
<li>Css图标测试</li>
<li>Css图标测试</li>
</ul>
<table border="1">
<tr>
<td>内边距测试</td>
<td>内边距测试</td>
<td>内边距测试</td>
<td>内边距测试</td>
</tr>
</table>
<div class="container">
<div class="content1">
<div class="content2">
<div class="content3">外边距测试</div>
</div>
</div>
</div>
<div class="ccontainer">
<div class="ccontent1">
<div class="ccontent2">
<div class="ccontent3">外边距叠加测试</div>
</div>
</div>
</div>
<div class="position1">定位测试</div> <div class="position2">定位重合测试</div>
<p class="p1">行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试
行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行
间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行试</p>
<p class="p2">行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试<
行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行
间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行试</p>
<p class="p3">行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试
行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行
间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行间距测试行试</p>
<ul>
<li><a href="http://baidu.com">导航测试1</a></li>
<li><a href="http://baidu.com">导航测试2</a></li>
<li><a href="http://baidu.com">导航测试3</a></li>
</ul>
<div class="selector">
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
<div class="image">
<a class="imgg" href="#" target="_self">
<img src="民国.jpg" alt="民国" width="200px" height="200px">
</a>
<div class="text">大家的儿子—宋民国</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="transform">旋转测试</div>
<div class="animation">动画测试</div>
<div class="transition">过渡测试</div>
<div class="fenlie">分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测试分列测
</div>
<br><br><br><br><br><br><br><br><br><br>
<p align="center"><em><strong>瀑布流测试</strong></em></p>
<div class="piccontainer">
<div><img src="飞哥1.jpg"></div>
<div><img src="飞哥2.jpg"></div>
<div><img src="飞哥3.jpg"></div>
<div><img src="飞哥4.jpg"></div>
<div><img src="飞哥5.jpg"></div>
<div><img src="飞哥6.jpg"></div>
<div><img src="飞哥7.jpg"></div>
<div><img src="飞哥8.jpg"></div>
<div><img src="飞哥9.jpg"></div>
<div><img src="飞哥1.jpg"></div>
<div><img src="飞哥2.jpg"></div>
<div><img src="飞哥3.jpg"></div>
<div><img src="飞哥4.jpg"></div>
<div><img src="飞哥5.jpg"></div>
<div><img src="飞哥6.jpg"></div>
<div><img src="飞哥7.jpg"></div>
<div><img src="飞哥8.jpg"></div>
<div><img src="飞哥9.jpg"></div>
<div><img src="飞哥1.jpg"></div>
<div><img src="飞哥2.jpg"></div>
<div><img src="飞哥3.jpg"></div>
<div><img src="飞哥4.jpg"></div>
<div><img src="飞哥5.jpg"></div>
<div><img src="飞哥6.jpg"></div>
<div><img src="飞哥7.jpg"></div>
<div><img src="飞哥8.jpg"></div>
<div><img src="飞哥9.jpg"></div>
<div><img src="飞哥1.jpg"></div>
<div><img src="飞哥2.jpg"></div>
<div><img src="飞哥3.jpg"></div>
<div><img src="飞哥4.jpg"></div>
<div><img src="飞哥5.jpg"></div>
<div><img src="飞哥6.jpg"></div>
<div><img src="飞哥7.jpg"></div>
<div><img src="飞哥8.jpg"></div>
<div><img src="飞哥9.jpg"></div>
</div>
</body>
</html>Css样式表
body{
background-image: url("雪花.jpg");
margin: 10px;
}
/*派生选择器*/
table tr{
color: #FF0000;
}
/* id选择器 带有# */
#p a{
color: lightgreen;
background-image: url("民国.jpg");
background-repeat: no-repeat;
/*背景是否平铺填满*/
background-position: 0px 0px;
/*设置背景位置*/
background-attachment: fixed;
/*设置背景是否随着页面滚动*/
text-align : right;
/*左右对齐方式*/
text-indent: -2em;
/*首行缩进设置*/
padding-left:2em ;
/*内边框距左距离设置*/
text-transform: uppercase;
/*字母大小写设置*/
text-shadow: 5px 5px 1px #FF0000;
/*距左距离、距上距离、清晰度设置、背景颜色*/
width: 100px;
text-wrap: normal;
/*自动换行设置（英文不会拆开）*/
font-size: 40px;
/*字体大小*/
font-family:fantasy ;
/*字体种类*/
}
/* 类选择器 带有. （用的最多）*/
.pclass{
color: royalblue;
}
@font-face {
font-family: myfont;
src: url("");
}
/*元素选择器 无.或# */
a:link{
/*普通的未被访问的连接*/
color: black;
text-decoration: none;
display: block;
text-align: center;
}
a:visited{
/*已经访问过的连接*/
color: darkblue;
}
a:hover{
/*鼠标位于连接上方*/
color: chartreuse;
}
a:active{
/*连接被点击时*/
color: chartreuse;
}
ul li{
list-style-image: url("鞭炮.png");
}
/*class可以重复 id不能重复*/
ul.ul1{
list-style-position: inside;
}
/*表格*/
#tb,tr,th,td{
border: 1px solid blue;
text-align: center;
}
#tb{
width: 100px;
height: 100px;
border-collapse: collapse;
}
p{
/*轮廓*/
outline-style:groove;
outline-color: gold;
outline-width: 1px;
cursor: cell;
/*设置当鼠标停留在该模块时的样式*/
}
/*盒子模型*/
td{
padding-left: 100px;
padding-right: 100px;
padding-top: 100px;
padding-bottom: 100px;
}
.container{
background-color: firebrick;
width: 250px;
height: 200px;
margin-top: 100px;
margin-left: 400px;
}
/*子元件的margin设置的距离是相对于其父元件而言的*/
.content1{
background-color: antiquewhite;
width: 200px;
height: 150px;
margin-top: 100px;
margin-left: 20px;
}
.content2{
background-color: burlywood;
width: 150px;
height: 100px;
margin-top: 100px;
margin-left:20px;
}
.content3{
background-color: goldenrod;
width: 100px;
height: 50px;
margin-top: 100px;
margin-left:25px;
}
.ccontainer{
background-color: firebrick;
width: 250px;
height: 200px;
margin-top: 100px;
margin-left: 400px;
}
.ccontent1{
background-color: antiquewhite;
width: 200px;
height: 150px;
margin-top: 100px;
margin-left: 20px;
}
.ccontent2{
background-color: burlywood;
width: 150px;
height: 100px;
margin-top: 100px;
margin-left:20px;
}
.ccontent3{
background-color: goldenrod;
width: 125px;
height: 50px;
margin-top: 100px;
margin-left:px;
}
/*定位设置*/
.position1{
width: 100px;
height: 100px;
position: absolute;
/* static对偏移量不起效果*/
background-color: beige;
left: 800px;
top: 600px;
z-index: 2;
}
.position2{
width: 100px;
height: 100px;
position: absolute;;
/* static对偏移量不起效果*/
background-color: slategrey;
left: 820px;
top: 580px;
z-index: 1;
/*z-index的数字越大 越在上层*/
}
.p1{
width: 800px;
line-height: normal;
max-width: 400px;
}
.p2{
width: 800px;
line-height: 200%;
min-width: 1000px;
display: inline;
/*导航栏排列顺序设置*/
visibility: visible;
/*是否可见设置*/
}
.p3{
width: 800px;
line-height: 50%;
}
/*图片*/
.selector{
margin: 1px auto;
width: 70%;
height: auto;
}
.image{
border: 1px solid grey;
text-align: center;
float: left;
height: auto;
width: auto;
margin: 5px;
}
img{
margin: 5px;
opacity: 0.8;
}
.text{
margin-bottom: 5px;
font-size: 8px;
}
/*2D->3D转换*/
.transform{
width: 300px;height: 300px;color: #FF0000;
/*translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。*/
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
/*rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。*/
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
/*scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：*/
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
/*skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：*/
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
/*matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。*/
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
/*3D转换方法： rotateX(); rotateY();*/
}
/*过渡*/
.transition{
width: 100px;height: 100px;background-color: yellowgreen;
border-radius:10%;//边框圆角;
margin: 20px auto;
text-align: center;
line-height: 100px;//使文字上下居中;
-webkit-transition: width 1s,height 1s,-webkit-transform 1s;
transition: width 1s,height 1s,transform 1s;
transition-delay: 0s;
/*transition 简写属性，用于在一个属性中设置四个过渡属性 */
/*transition-property 规定应用过渡的 CSS 属性的名称*/
/*transition-duration 定义过渡效果花费的时间。默认是 0*/
/*transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"*/
/*transition-delay 规定过渡效果何时开始。默认是 0*/
/*transition-property: width;*/
/*transition-duration: 1s;*/
/*transition-timing-function: linear;*/
/*transition-delay: 2s;*/
/* Firefox 4 */
/*-moz-transition-property:width;*/
/*-moz-transition-duration:1s;*/
/*-moz-transition-timing-function:linear;*/
/*-moz-transition-delay:2s;*/
/* Safari 和 Chrome */
/*-webkit-transition-property:width;*/
/*-webkit-transition-duration:1s;*/
/*-webkit-transition-timing-function:linear;*/
/*-webkit-transition-delay:2s;*/
/* Opera */
/*-o-transition-property:width;*/
/*-o-transition-duration:1s;*/
/*-o-transition-timing-function:linear;*/
/*-o-transition-delay:2s;*/
}
.transition:hover
{
width:200px;
height: 200px;
line-height: 200px;
background-color: lightskyblue;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
/*动画*/
.animation{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;
border-radius:3px 4px 5px 6px;
/*代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。*/
}
@keyframes anim {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: blue;
left: 200px;
top: 0px;
}
50%{
background-color: greenyellow;
left: 200px;
top: 200px;
}
75%{
background-color: lightskyblue;
left: 0px;
top: 200px;
}
100%{
background-color: red;
left: 0px;
top: 0px;
}
}
/*分列*/
.fenlie{
column-count: 4;
-webkit-column-count: 4;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
column-rule: 5px outset black;
-webkit-column-rule: 5px outset black;
}
/*瀑布流*/
.piccontainer{
text-align: center;
column-width: 250px;
-webkit-column-width: 250px;
-webkit-column-gap: 5px;
column-gap: 5px;
}
.piccontainer div{
width: 250px;
margin: 5px 0;
}
京公网安备 11010502036488号