css--轮播图 yk弹框--固定定位和层级的应用
轮播图静态页面实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 轮播图 实现思路：
大盒子div为父亲 包含一个图片，并且其点击可进行跳转
next，prev翻页标志 右下角的页数标志均为儿子 采用子绝父相 进行定位
实现：div父亲包含 1 链接标签和图片
2 2个span 翻页标签采用背景图实现
3 ul li实现 页数标志
*/
*{
padding: 0;
margin: 0;
}
.banner{
width: 1010px;
height: 532px;
position: relative;
}
.prev,
.next{
position: absolute;
width: 75px;
height: 100px;
top: 50%; /*垂直居中 50%参考的是父亲的 即父亲高度的一半*/
margin-top:-50px; /* 垂直居中 负的自己高度的一半*
/*水平居中则为 width:50%; margin-left:-38px; 负的自己宽度的一半*/
/*margin-top: 216px;*/ /*垂直居中 通过计算 父亲高度/2-自己高度/2 不灵活 */
}
.prev{
background: url(./img/btn1.png) no-repeat;
left: 0;
}
.next{
background: url(./img/btn2.png) no-repeat;
right: 0;
}
ul,ol{
list-style: none;
}
.page{
position: absolute;
bottom: 50px;
right: 260px;
}
.page li{
width: 30px;
height: 30px;
background-color:#ccc;
border-radius: 50%;
float: left;
margin-left: 30px;
text-align: center;
color: #fff;
}
.page li.current{
background-color: red;
}
</style>
</head>
<body>
<div class="banner">
<a href=""><img src="./img/banner.png" alt=""></a>
<span class="prev"></span>
<span class="next"></span>
<ul class="page">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
效果
yk弹窗布局
固定定位 应用
优酷首页登录弹框
思路：三个盒子 1 一个大盒子 使用页面可以滚动 放置背景图
2 一个盒子 实现遮罩层
3 一个盒子 实现 登录弹窗
主要实现层级展示，不做细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 固定定位 应用
优酷首页登录弹框
思路：三个盒子 1 一个大盒子 使用页面可以滚动 放置背景图
2 一个盒子 实现遮罩层
3 一个盒子 实现 登录弹窗
主要实现层级展示，不做细节
*/
body{
margin: 0;
}
.page{
height: 2000px;
background: url(../img/yk.png) no-repeat center top;
}
.mask{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .3; /*透明度*/
filter: alpha(opacity=30);
}
.loginbox{
position: fixed;
width: 760px;
height: 350px;
left: 50%;
margin-left: -380px;
top: 50%;
margin-top: -175px;
background-color: red;
}
</style>
</head>
<body>
<div class="loginbox"></div>
<div class="mask"></div>
<div class="page"></div>
</body>
</html>
