第一个： postion
网页有一类就是返回顶部，一直在右下角，还有打开一个网页顶部有个菜单，滚动滑轮，顶部永远在上面。
position：
fiexd ==>固定在页面的某个位置，他可以结合上下左右来控制他的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style=" 50px;height: 50px;color: white;
position: fixed;
bottom: 20px;
right:20px;
" >返回顶部</div>
<div style="height: 5000px;" >dfsdfsd</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>
效果如下：
实现顶部固定在上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
color: #dddddd;
position: fixed;
top:0;
right:0;
left:0;
}
.pg-body{
height:5000px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="pg-header" >头部</div>
<div class="pg-body" >内容</div>
</body>
</html>
position: relative+ absolution
放在父类标签的某个位置。
<body>
<div style="position: relative; 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;left: 0;bottom: 0; 50px;height: 50px;"></div>
</div>
<div style="position: relative; 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;right: 0;bottom: 0; 50px;height: 50px;"></div>
</div>
<div style="position: relative; 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;right: 0;top: 0; 50px;height: 50px;"></div>
</div>
</body>
样式格式：
记住2点即可：
1、fixed 定位位置
2、relative + absolute 相对父类定义位置。
写一个三层
透明度：opcity:0.5
层级顺序，越大就在上面
<body>
<div style="z-index: 10; position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-200px;height: 400px; 500px;"></div>
<div style="z-index: 9; position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
"></div>
<div style="height: 5000px;
asdfsdf
</div>
</body>
我定义一个边框，超过我就隐藏或者出现滚动条 overflow : hidden或者auto
隐藏
<div style="height: 200px; 300px;overflow: hidden;">
<img src="images/01.jpg" alt="">
</div>
滚动条
<div style="height: 200px; 300px;overflow: auto;">
<img src="images/01.jpg" alt="">
</div>
放在鼠标上出现hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right:0;
left:0;
top:0;
height: 48px;
line-height:48px;
}
.pg-boder{
margin-top: 50px;
}
.w{
980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px;
}
.pg-header .menu:hover{
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-boder">
<div class="w">a</div>
</div>
</body>
</html>
View Code
显示效果：
写一个登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px; 400px;position: relative;">
<input type="text" style="height: 35px; 370px;padding-right: 30px;">
<span style="position: absolute;right: 6px;top:10px;background-image: url(1.jpg);height: 16px; 16px;display: inline-block;"></span>
</div>
</body>
</html>
View Code
写了一个首页top
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pg-header{
height:38px;
line-height:38px;
}
.main{
float: right;
color: black;
font-size:15px;
display: inline-block;
padding:0 20px;
}
.main span:hover{
}
.p1{
float: left;
border: 1px solid #dddddd;
margin: 10px;
padding:10px;
position: relative;
}
.hot{
position: absolute;
right:0;
top:0;
}
.pc{
border:1px solid red;
margin: 60px;
}
.menu{
display: inline-block;
padding: 0 10px;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<div style=" 980px;margin: 0 auto;">
<div style="float: left; font-size: 15px;">*收藏本站</div>
<div class="main">
<span class="menu">登录</span>
<span class="menu">注册</span>
<span class="menu">我的订单</span>
<span class="menu">我的收藏</span>
<span class="menu">VIP会员俱乐部</span>
<span class="menu">客户服务</span>
<span class="menu">关注</span>
<span class="menu">手机版</span>
</div>
</div>
</div>
</body>
</html>
View Code
