Python 第四十九章 css 补充
原型头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border-radius: 50%;
border:1px solid red;
overflow: hidden;
}
div img{
width: 100%;
/*height: 100%;*/
}
</style>
</head>
<body>
<div class="c1">
<img src="2.jpg" alt="">
</div>
</body>
</html>
定位
static定位(无定位)
相对定位
/*position: relative; !* 相对于自己自己原来的位置进行移动,原来的空间还占着 *!*/
绝对定位
position: absolute; /* 不占用自己原来的位置,移动的时候如果父级标签以及祖先辈标签如果设置了相对定位,父级标签或者祖先标签进行移动 ,如果父级标签都没有设置相对定位,那么就按照整个文档进行移动 */
固定定位
position: fixed;
按照浏览器窗口的位置进行移动
所有定位的元素移动,都是通过top,left,right,bottom两个方向的值来移动.
回到顶部示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c3{
background-color: red;
height: 500px;
width: 600px;
}
.c2{
background-color: green;
height: 500px;
width: 600px;
}
#back_top{
height: 40px;
width: 80px;
position: fixed;
right: 40px;
bottom: 40px;
background-color: black;
text-align: center;
line-height: 40px;
}
#back_top a{
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<a name="xxx">这是顶部位置</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<span id="back_top">
<a href="#xxx">回到顶部</a>
</span>
</body>
</html>
z-index 设置层级
模态对话框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
background-color: rgba(0,0,0,0.7); /* rgba可以设置透明度,0-1之间的数字 */
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
}
.mode{
width: 440px;
height: 480px;
background-color: white;
position:fixed;
top:50%;
left: 50%;
z-index: 100;
margin-left: -220px;
margin-top: -240px;
}
.mode h2,.mode h3{
text-align: center;
}
.xxx{
text-align: right;
}
.xxx span{
}
.xxx span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>24期皇家spa会所</h1>
<div>金牌技师李业和陈硕,30年捏脚经验,技师一流,服务到位,倒贴200</div>
<div>
30年捏脚经验,技师一流,服务到位
<img src="cs.png" alt="" width="400" height="400">
</div>
<div class="mode">
<div class="xxx">
<span>x</span>
</div>
<h2>不正经的24期会所入口</h2>
<h3>会员登录</h3>
<div class="iii">
<div>
<label>
用户名:<input type="text">
</label>
</div>
<div>
<label>
密码:<input type="text">
</label>
</div>
</div>
</div> <!-- 对话框白框 -->
<div class="shadow"></div> <!-- 黑色阴影遮罩层 -->
</body>
</html>
z-index注意点
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
opacity透明度和rgba透明度的区别
opactiy是整个标签的透明度
rgba是单独给某个属性设置透明度
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
background-color: rgba(255,0,0,0.3);
}
.c2{
width: 100px;
height: 100px;
/*background-color: rgba(255,0,0,0.3);*/
background-color: rgb(255,0,0);
opacity: 0.3; /* 0-1之间的数字,这是设置整个标签的透明底 */
}
</style>
</head>
<body>
<div class="c1">
div1
</div>
<hr>
<div class="c2">
div2
</div>
</body>
</html>
