本文详细介绍了HTML和CSS中的页面布局元素，包括header、banner、nav、listcon和footer等部分的样式设计，以及绝对定位、固定定位、粘性定位和元素层级控制的原理和应用。特别关注了元素之间的父子关系、兄弟关系以及如何实现元素的水平垂直居中。
目录
0072 安利首页-header
0073 安利首页-banner
0074 安利首页-body
0075 安利首页-footer
示例代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="header.css" />
<!-- 版心 -->
<!-- 通栏 -->
</head>
<body>
<div class="header con">
<div class="logo"></div>
<div class="headerright">
<ul>
<li><a class="active">安利海外购</a></li>
<li><a>掌上安利</a></li>
<li><a class="active">安利悦享荟</a></li>
<li><a>安利植物研发中心</a></li>
<li><a>各地店铺</a></li>
<li><a class="last active">安利易联网</a></li>
</ul>
<div class="search">
<input type="text" placeholder="搜索" class="left"/>
<input type="submit" value="" class="right"/>
</div>
</div>
</div>
<div class="nav">
<ul class="con">
<li>走进安利</li>
<li>产品展馆</li>
<li>公司咨询</li>
<li>企业责任</li>
<li>安利云购</li>
<li>其他</li>
</ul>
</div>
<div class="banner"></div>
<div class="list con">
<div class="item">
<img src="图片相对路径" alt="" />
<p>《总裁零距离》微站</p>
</div>
<div class="item">
<img src="图片相对路径" alt="" />
<p>《总裁零距离》微站</p>
</div>
<div class="item itemlast">
<img src="图片相对路径" alt="" />
<p>《总裁零距离》微站</p>
</div>
</div>
<div class="footer">
<div class="con">
<ul>
<li>公益基金会</li>
<li>培训中心</li>
<li>云购</li>
<li>轻创业平台</li>
<li>公益基金会</li>
<li>培训中心</li>
<li>云购</li>
<li>轻创业平台</li>
<li>公益基金会</li>
<li>培训中心</li>
<li>云购</li>
<li>轻创业平台</li>
</ul>
<p>版收为安利《中国)日用显有限公司折有来经济司不深桃数或栖理，事CP警<span>05013154</span>号</p>
</div>
</div>
</body>
</html>示例代码2：
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.con{
width: 966px;
margin: 0 auto;
}
.header{
height: 110px;
/* background: yellow; */
}
.logo{
width: 256px;
height: 110px;
background: url(图片的相对路径);
float: left;
}
.headerright{
float: right;
}
.headerright ul{
height: 44px;
margin-top: 10px;
line-height: 44px;
}
.headerright li{
float: left;
}
.headerright li a{
border-right: 1px solid lightblue;
paddding: 0 13px;
font-size: 13px;
color: grey;
padding: 0 10px;
}
.headerright .last{
padding-right: 0;
border: 0;
}
.headerright li .active{
color: pink;
}
.search{
float: right;
width: 234px;
height: 28px;
border: 1px solid #d1d1d1;
}
.search input{
border: 0;
outline: none;
}
.search .left{
width: 196px;
float: left;
height: 28px;
padding-left: 14px;;
}
.search .right{
float: right;
width: 24px;
height: 28px;
background: url(图片路径) no-repeat left center;
}
.nav{
height: 53px;
line-height: 53px;
border-top: 1px solid grey;
background: deepskyblue;
color: white;
}
.nav li{
float: left;
font-size: 16px;
margin-right: 76px;
}
.banner{
height: 379px;
background: url(图片路径) no-repeat center;
}
.list{
height: 213px;
background: yellow;
margin-top: 51px;
margin-bottom: 35px;
}
.item{
margin-right: 19px;
float: left;
height: 211px;
width: 305px;
border: 1px solid grey;
}
.item p{
height: 47px;
line-height: 47px;
padding-left: 28px;
font-size: 16px;
color: black;
}
.item img{
display: block;
}
.itemlast{
margin-right: 0;
}
.footer{
height: 206px;
border: 1px solid lightgrey;
background: url(渐变图片路径);
}
.footer ul{
height: 84px;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid white;
line-height: 28px;
}
.footer ul li{
width: 210px;
padding-left: 30px;
font-size: 12px;
color: blue;
float: left;
}
.footer p{
height: 61px;
line-height: 61px;
padding: 30px;
font-size: 12px;
}
.footer p span{
color: blue;
}0076 定位的属性与属性值
0077 静态定位与相对定位
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
}
.box2{
background: blue;
position: relative;
top: -100px;
left: -100px;
}
.box3{
background: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>0078 绝对定位
示例代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ea tenetur, ducimus odit odio, nesciunt aspernatur ratione
quas quos id officia adipisci maiores labore maxime modi
ab dolor hic voluptatum provident!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deleniti error nulla perferendis adipisci dolore aut
perspiciatis illo fugiat eum dignissimos quisquam mollitia
ut, tenetur similique ex cupiditate repellat minima maxime!
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Optio, molestiae? Pariatur sed veniam voluptatibus nam
molestias reprehenderit doloribus, ratione inventore ipsa
est labore assumenda quo architecto non tenetur recusandae
facere.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ea tenetur, ducimus odit odio, nesciunt aspernatur ratione
quas quos id officia adipisci maiores labore maxime modi
ab dolor hic voluptatum provident!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deleniti error nulla perferendis adipisci dolore aut
perspiciatis illo fugiat eum dignissimos quisquam mollitia
ut, tenetur similique ex cupiditate repellat minima maxime!
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Optio, molestiae? Pariatur sed veniam voluptatibus nam
molestias reprehenderit doloribus, ratione inventore ipsa
est labore assumenda quo architecto non tenetur recusandae
facere.
</div>
<div class="box"></div>
</body>
</html>代码示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background: yellow;
margin: 0 auto;
position: relative;
/* top: 100px; */
/* left: 100px; */
}
.child{
width: 200px;
height: 200px;
background: red;
top: 100px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>0079 固定定位
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box{
width: 100%;
height: 500px;
background: yellow;
}
.ad{
width: 100px;
height: 200px;
background: red;
position: fixed;
bottom: 0px;
right: 0;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="ad">
</div>
</body>
</html>0080 粘性定位
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
background: yellow;
width: 100%;
height: 100px;
}
.nav{
background: red;
width: 500px;
height: 50px;
margin: 0 auto;
position: sticky;
top: 0px;
}
.body{
height: 1000px;
background: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="body"></div>
</body>
</html>0081 定位案例
0082 三角形案例
透明色：1.rgba( 0,0,0,0). 2.transparent
0083 定位里的层级
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background: yellow;
position: relative;
top: 100px;
left: 100px;
z-index: 100;
/* 层级 */
}
.box2{
background: red;
position: relative;
z-index: 200;
}
/* z-index值越大,层级越大,越靠上显示 */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>0084 绝对定位的深入探索
-
父子关系
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: yellow;
position: relative;
/* z-index: 100; */
}
.child{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 10px;
left: 10px;
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>兄弟关系
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 100;
}
.box2{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
span{
width: 100px;
height: 100px;
background: yellow;
/* position: absolute; */
float: left;
}
/*
如何让行内元素变成块元素？
1.display:block;
2.position:absolute;
3.float:left;
*/
</style>
</head>
<body>
<span>hello</span>
</body>
</html>0085 定位控制元素水平垂直居中
示例代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: yellow;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>示例代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background: yellow;
margin: 0 auto;
position: relative;
}
.child{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>0086 定位与浮动区别
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
/* float: left; */
position: absolute;
}
.box2{
width: 300px;
height: 300px;
background: yellow;
}
/*
float:半脱离，文字环绕效果
absolute:全脱离，不会出现文字环绕效果
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur deserunt consequuntur,
reprehenderit esse aut dolorum odio amet optio eveniet.
Perspiciatis perferendis ratione eos! Eum facere quas ea!
Perspiciatis, facere non!
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
