CSS模型，常用操作，动画
CSS盒子模型
边距
css
td{
padding-left:100px;
padding-right: 100px;
padding-top: 100px;
}html
边距
内边距
边框
css文件
/*p{
border-style: double;
border-top-style: dotted;
border-width: 5px;
border-bottom-width: 10px;
border-color:aquamarine;
}*/
p{
border-radius: 10px;
width:100px;
height:50px;
background-color: aquamarine;
}
.cssid{
background-color: aqua;
width:100px;
height:100px;
text-align: center;
box-shadow: 10px 10px 5px red;
}html5文件
边距
css边框样式
css阴影效果
外边距
css文件
body{
margin:0;
}
.mg{
background-color: blue;
width:100px;
height:100px;
margin-top:100px;
}html
边距
外边距
盒子模型的应用
css模型
*{
margin:0px;
padding:0px;
}
.top{
width:100%;
height:50px;
background-color: black;
}
.top_content{
width:75%;
height:50px;
margin: 0px auto;
background-color: blue;
}
.body{
margin:0px auto;
width:75%;
height:1500px;
background-color: aqua;
}
.body_img{
width:100%;
height:400px;
background-color: darkgoldenrod;
}
.body_content{
width:100%;
height:1100px;
background-color: bisque;
}
.body_no{
width:100%;
height:50px;
background-color: pink;
}
.footing{
width:75%;
height:330px;
background-color: indigo;
margin:0px auto;
}
.footing_content{
width: 100%;
height:350px;
background-color: aquamarine;
}
.footing_subnav{
width:100%;
height:50px;
background-color: black;
}html文件
盒子模型的应用
对齐
css文件
*{
margin:0px;
}
.div{
width:70%;
height:1000px;
background-color: red;
/*position:absolute;
right:0px*/
/*float:right;*/
margin:0px auto;
}html
对齐
分类
css文件
/*.p1{
width:400px;
line-height:normal;
max-width: 250px;
}
.p2{
width:400px;
line-height:200%;
}
.p3{
width:400px;
line-height:50%;
}*/
p{
cursor:normal;
}
li{
display: inline;
visibility: hidden;
}html文件
- hello
- hello
- hello
- hello