二十三、css中的定位
1、绝对定位（经常用）：
absolute：定位离开之后，释放之前的位置，基于外层父级标签
2、相对定位(最常用)：
relative：定位离开之后，之前的位置不会释放，基于之前的位置来说
3、固定定位：
fixed：始终是基于浏览器的左上角定位 适用于广告
4、默认定位：
static：初始的定位操作
<style>
.div_1{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位*/
/*position: absolute;*/
/*相对定位*/
/*position: relative;*/
/*固定定位*/
position: fixed;
top: 200px;
left: 200px;
/*置于底层*/
z-index: -1;
}
.div_2{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>
二十四、盒子中的模型
1、内边距
padding: div和border之间距离
2、外边距
margin：
/*内边距 div和border之间的距离*/
/*padding: 50px;*/
/*上下的距离，左右的距离*/
/*padding: 30px 50px;*/
/*上 右 下 左（顺时针）*/
/*padding: 10px 20px 30px 40px;*/
/*单独一个方向*/
/*padding-top: 40px;*/
/*外边距 给盒子进行定位*/
/*margin: 50px;/*（四个方向全为50）*/
/*margin-left: 50px;
margin-top: 70px;*/
/*外边距 垂直的方向会取较大的值*/
/*margin-bottom: 40px;*/
/*外边距 水平方向距离会合并*/
margin-right: 40px;
二十五、css3中常用选择器
1、 <style>
/*获得class名称是div1下面的第一个子元素*/
/*.div1>p:first-child{
color: red;
}*/
/*获得class名称是div1下面的最后一个子元素*/
/*.div1>p:last-child{
color: green;
}*/
/*获得具体的某一个子元素*/
/*.div1>p:nth-child(2){
background-color: palegreen;
} */
/*实现交叉换色*/
/*.div1>p:nth-child(even){
background-color: red;
}
.div1>p:nth-child(odd){
background-color: green;
}*/
/*获得空的元素对象*/
/*.div1>p:empty{
height: 60px;
background-color: darkmagenta;
} */
/*获得焦点执行的样式*/
/*input:focus{
width: 300px;
height: 100px;
} */
input:checked{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="div1">
<p>1</p>
<p>2</p>
<p>3</p>
<p></p>
<p>4</p>
<p>5</p>
</div>
<hr />
<input type="text" name="" id="" value=""/>
<hr />
男：<input type="radio" name="sex"/>
女：<input type="radio" name="sex" />
</body>
2、 <style>
/*
伪对象选择器是在指定的对象之前（或者之后）插入内容
* */
.div1:before{
/*content:"我们祖国是花园";*/
content: url(img/1.jpg);
}
/*在对象后插入内容*/
.div1:after{
content: "he";
}
</style>
</head>
<body>
<div class="div1">你好</div>
</body>
二十六、网页上制作一个心形图案
1、制作静态心形图案
先分出三个div
<div class="cen lef"></div>
<div class="cen c"></div>
<div class="cen rig"></div>
2、将三个div中两个通过倒圆角指令调成圆形，一个旋转45°
3、通过测试网页F12调整三个div的位置，拼凑出心形
.cen{
width: 200px;
height: 200px;
background-color: #d5093c;
/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的
颜色*/
box-shadow: 0px 0px 70px #D5093C;
/*执行动画的调用*/
animation: 0.5s（完成动画的时间） aj(动画名)
infinite(不停播放动画);
}
.lef{
/*倒圆角指令*/
border-radius: 100px;
/*左上右下 右下左上*/
/*border-radius: 10px 60px;*/
/*左上 右上 右下 坐下（顺时针）*/
/*border-radius: 10px 20px 30px 40px;*/
position: absolute;
top: 200px;
left: 200px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 342px;
}
.c{
/*旋转角度*/
transform: rotate(45deg);
position: absolute;
top: 270px;
left: 272px;
}
div:hover{
/*放大的倍数*/
/*transform: scale(1.3);*/
/*X：水平的位移 Y:垂直的位移 负数：上*/
/*transform: translate(0px,-5px);*/
/*2d角度的旋转 X Y*/
/*transform: skew(40deg,45deg);*/
}
/*css3中的动画，心形跳动设置*/
@keyframes aj{
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
4、css3动画不同浏览器支持
一般情况下作为开发，我们需要把下面这几种情况都写入
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
效果图
二十七、制作京东购物车页面
html：
css：
结果图：
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
