<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
</head>
<style>
div{
margin: 0px;
}
.ding{
width: 100%;
height: 300px;
background-color: bisque;
margin: auto;
}
.center{
width: 100%;
height: 1800px;
}
.di{
width: 100%;
height: 100px;
background-color: chocolate;
}
.zuo{
width: 33%;
height: 1800px;
background-color: darkcyan;
float: left;
}
.zhong{
width: 33%;
height: 1800px;
background-color: gold;
float: left;
}
.you{
width: 33%;
height: 1800px;
background-color: darkred;
float: left;
}
.ad-left{
width: 200px;
height: 200ox;
background-color: darkslategray;
position: fixed;
left: 20px;
}
.ad-right{
width: 200px;
height: 200px;
background-color: rgb(156, 118, 43);
position: fixed;
right: 20px;
}
</style>
<body>
<div>
<div class="ding"><p>头部内容</p></div>
<div class="center">
<div class="zuo"><p>左侧内容</p></div>
<div class="zhong"><p>主体内容</p></div>
<div class="you"><p>左侧内容</p></div>
</div>
<div class="di"><p>底部内容</p></div>
</div>
<div class="ad-left"><p>左侧广告</p></div>
<div class="ad-right"><p>右侧广告</p></div>
</body>
</html>
浮动与定位
最新推荐文章于 2024-10-09 07:37:41 发布