1.小米最上部导航栏设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
/*取消前面的点*/
ul{
list-style: none;
}
.nav{
width: 960px;
overflow: hidden;
margin: 50px auto;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
width: 160px;
height: 40px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
}
.nav ul li a:hover{
background: yellow;
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div>
</body>
</html>
2.导航栏定位问题（position）
有3种方式：
相对定位
固定定位
绝对定位
2.1相对定位（relative）
相对自己原来的位置进行定位，自己原来的位置作为参考点
使用relative下的top,left进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
border: 1px solid green;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用相对定位可以来进行后续表单位置设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.t{
font-size: 30px;
}
.xiaoming{
position: relative;
top: 4px;
}
</style>
</head>
<body>
<div>
<input type="text" class="t">
<input type="text" class="xiaoming">
</div>
</body>
</html>
2.2绝对定位（absolute）
一般情况下：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
以父辈盒子作为参考点：
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
2.如果父亲设置了定位，那么以父亲为参考点。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 400px;
height: 400px;
padding: 100px;
background-color: yellow;
position: relative;
}
.container{
width: 500px;
height: 500px;
background-color: green;
position: relative;
padding: 20px;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 50px;
}
</style>
</head>
<body style=‘height: 2000px;‘>
<div class="wrap">
<div class="container">
<div class="box1">
</div>
</div>
</div>
</body>
</html>
绝对定位下盒子居中问题：
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中
设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.nav{
width: 960px;
height: 49px;
background-color: purple;
position: absolute;
left: 50%;
margin-left: -480px;
}
</style>
</head>
<body>
<div class="nav">
</div>
</body>
</html>
2.3固定定位（fixed）
设置固定定位，用top描述，那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
固定定位，点击后返回顶部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
right: 50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="wrap">
<p>
<a href="#">回到顶部</a>
</p>
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
</div>
<script>
$(function(){
$(‘p‘).click(function(){
$(‘html‘).animate({
"scrollTop":0
},1000)
})
})
</script>
</body>
</html>
3.z-index（用于涂层之间的遮盖）
z-index 值表示谁压着谁，数值大的压盖住数值小的
只有定位了的元素，才能有z-index（浮动元素无法使用）
index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素
也具有从父现象
例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 50px;
z-index: 10;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 8;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html>
z-index的应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/*设置图片与固定栏间的距离*/
body{
padding-top: 40px;
}
.nav{
width: 100%;
height: 40px;
background-color: black;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*数值最大，谁也无法压盖住固定栏*/
}
.wrap{
width: 960px;
overflow: hidden;
margin: 0px auto;
background-color: purple;
border-radius: 5px;
}
.wrap ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.wrap ul li a{
width: 160px;
height: 40px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
}
.wrap ul li a:hover{
background: yellow;
color: green;
text-decoration: underline;
}
p{
position: relative;
}
</style>
</head>
<body style="height: 3000px">
<div class="nav">
<div class="wrap">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div>
</div>
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<p>哈哈哈哈哈哈哈哈</p>
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
</body>
</html>
原文地址：https://www.cnblogs.com/LearningOnline/p/9090761.html
时间： 2024-12-10 16:21:08