实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位仿PHP中文网</title>
<style>
body,
h1,
p,
ul,
br {
/*border: 1px solid red;*/
margin: 0;
}
/*头部*/
.header {
background-color: black;
}
/*头部图片*/
.header .bz {
width: 180px;
height: 60px;
float: left;
}
/*导航*/
.header .content {
width: 90%;
margin: 0;
background-color: black;
height: 60px;
margin-left: 180px
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .itme {
list-style: none;
}
.header .content .nav .itme a {
float: left;
min-width: 100px;
min-height: 55px;
text-align: center;
line-height: 55px;
color: rgba(255, 255, 255, .7);
padding: 0 15px;
text-decoration: none;
font-size: 14px;
}
.header .content .nav .itme a:hover {
color: white;
border-bottom: 5px solid green;
}
/*最后一块底部*/
.footer {
width: 100%;
background-color: rgb(57, 61, 73);
height: 170px;
}
.footer .content {
width: 65%;
margin: 0 auto;
}
.footer .content .nav {
margin: 0;
padding: 10px 0;
width: 100%;
float: left;
}
.footer .content .nav .itme {
list-style: none;
}
.footer .content .nav .itme a {
float: left;
min-width: 20px;
min-height: 30px;
text-align: center;
line-height: 55px;
color: rgb(255, 255, 255);
padding: 0 5px;
text-decoration: none;
font-size: 12px;
}
.footer .content p {
/*水平居中*/
width: 100%;
line-height: 30px;
font-size: 12px;
color: #787d82;
}
/*第一块左边*/
.container {
width: 65%;
margin: 30px auto;
min-height: 500px;
border-radius: 5px;
box-shadow: 1px 1px 1px 1px #999999;
border: 1px solid white;
}
.container .left {
padding: 15px 0;
width: 20%;
min-height: 500px;
background-color: rgb(43, 51, 59);
border-radius: 5px 0 0 5px;
box-sizing: border-box;
float: left;
}
.container .left .nav {
margin: 0;
padding: 0;
}
.container .left .nav .itme {
list-style: none;
}
.container .left .nav .itme a {
float: left;
min-width: 200px;
min-height: 55px;
line-height: 55px;
color: rgba(255, 255, 255, .7);
text-decoration: none;
font-size: 14px;
padding: 0 15px;
}
.container .left .nav .itme a:hover {
color: white;
background-color: lightslategrey
}
/*清除*/
.container {
overflow: hidden;
}
.container .left {
overflow: hidden;
}
/*第一块右边*/
.container .right {
width: 78%;
float: right;
padding: 0 5px
}
/*第一块右边导航*/
.container .right .top {
width: 100%;
float: left;
}
.container .right .top .nav {
margin: 0;
padding: 0;
}
.container .right .top .nav .itme {
list-style: none;
}
.container .right .top .nav .itme a {
float: left;
min-width: 50px;
min-height: 55px;
line-height: 55px;
color: black;
text-decoration: none;
font-size: 14px;
padding: 0 15px;
}
.container .right .top .nav .itme a:hover {
color: red;
}
/*第一块右边中间*/
.container .centent {
height: 338px;
float: left;
}
.container .centent img {
width: 100%;
}
.container .centent {
box-sizing: border-box
}
/*第一块右边底部*/
.container .foot {
height: 70px;
width: 100%;
margin: 15px 0;
float: left;
}
.container .foot ul {
height: 90px;
width: 100%;
list-style: none;
float: left;
padding: 0;
}
.container .foot ul li {
float: left;
width: 23%;
margin: 0 7px;
}
.container .foot ul li img {
border-radius: 5px
}
/*第二块banner*/
.box {
width: 100%;
height: 80px;
margin: 20px 0
}
.pic {
width: 65%;
margin: 0 auto;
}
.pic img {
width: 100%;
border-radius: 5px
}
/*第三块框*/
.box2 {
width: 65%;
margin: 30px auto;
height: 415px;
}
.box2 .main {
width: 56%;
float: left;
min-height: 380px;
border-radius: 5px;
margin-left: 15px;
border: 1px solid lavender;
overflow: hidden;
}
.box2 .left {
width: 20%;
min-height: 380px;
float: left;
border-radius: 5px;
border: 1px solid lavender
}
.box2 .right {
width: 20%;
min-height: 380px;
float: right;
border-radius: 5px;
border: 1px solid lavender;
margin-left: 15px
}
.box2 {
overflow: hidden;
}
.box2 .main {
overflow: hidden;
}
/*第三块中间*/
.box2 .main .top {
width: 90%;
height: 30px;
border-bottom: 1px solid #787d82;
margin: 1% 5%;
box-sizing: border-box
}
.box2 .main ul {
height: auto;
width: 100%;
list-style: none;
float: left;
padding: 0;
}
.box2 .main ul li {
float: left;
width: 25%;
margin: 4% 4%;
box-sizing: border-box;
text-decoration: none;
text-align: center;
}
.box2 .main ul li img {
border-radius: 5px;
width: 100%;
height: 90px;
box-sizing: border-box;
}
.box2 .main ul li a {
text-decoration: none;
font-size: 13px;
text-align: center;
color: black
}
.box2 .main ul li a:hover {
text-decoration: none;
font-size: 13px;
text-align: center;
color: red
}
.box2 .left .top {
width: 96%;
height: 30px;
border-bottom: 1px solid #787d82;
padding: 2%;
margin: 2%;
box-sizing: border-box
}
/*第三块左边*/
.box2 .left ul {
list-style: none;
padding: 2%;
}
.box2 .left ul li {
float: left;
width: 236px;
line-height: 30px;
margin: 0 7px
}
.box2 .left ul li a {
text-decoration: none;
color: black;
font-size: 13px
}
.box2 .left ul li a:hover {
color: red;
}
/*第三块右边*/
.box2 .right .top {
width: 96%;
height: 30px;
border-bottom: 1px solid #787d82;
padding: 2%;
margin: 2%;
box-sizing: border-box
}
.box2 .right ul {
list-style: none;
padding: 2%;
}
.box2 .right ul li {
float: left;
width: 236px;
line-height: 30px;
margin: 0 7px
}
.box2 .right ul li a {
text-decoration: none;
color: black;
font-size: 13px
}
.box2 .right ul li a:hover {
color: red;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<!--头部图片-->
<div class="bz">
<img src="static/images/a2.jpg" alt="">
</div>
<!--头部导航-->
<div class="content">
<ul class="nav">
<li class="itme"><a href="">首页</a></li>
<li class="itme"><a href="">视频教材</a></li>
<li class="itme"><a href="">社区问答</a></li>
<li class="itme"><a href="">技术文章</a></li>
<li class="itme"><a href="">编程词典</a></li>
<li class="itme"><a href="">资源下载</a></li>
<li class="itme"><a href="">工具下载</a></li>
<li class="itme"><a href="">菜鸟学堂</a></li>
</ul>
</div>
</div>
<!--第一块内容-->
<div class="container">
<!--第一块左边-->
<div class="left">
<ul class="nav">
<li class="itme"><a href="">PHP开发</a></li>
<li class="itme"><a href="">前端开发</a></li>
<li class="itme"><a href="">服务端开发</a></li>
<li class="itme"><a href="">移动开发</a></li>
<li class="itme"><a href="">数据库</a></li>
<li class="itme"><a href="">服务器运维&下载</a></li>
<li class="itme"><a href="">在线工具箱</a></li>
<li class="itme"><a href="">常用类库</a></li>
</ul>
</div>
<!--第一块右边-->
<div class="right">
<!--第一块右边导航-->
<div class="top">
<ul class="nav">
<li class="itme"><a href="">PHP头条</a></li>
<li class="itme"><a href="">独孤九贱</a></li>
<li class="itme"><a href="">学习路线</a></li>
<li class="itme"><a href="">在线工具</a></li>
<li class="itme"><a href="">趣味课堂</a></li>
<li class="itme"><a href="">社区问答</a></li>
<li class="itme"><a href="">课程直播</a></li>
<li class="itme"><a href="">菜鸟学堂</a></li>
</ul>
</div>
<!--第一块右边banner-->
<div class="centent">
<img src="https://www.php.cn/static/images/index_banner7.jpg" alt="" width="100%" height="338">
</div>
<!--第一块右边四个图片-->
<div class="foot">
<ul>
<li> <img src="https://www.php.cn/static/images/index_yunv.jpg" alt="" width="100%"></li>
<li> <img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt="" width="100%"></li>
<li> <img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="" width="100%"></li>
<li> <img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt="" width="100%"></li>
</ul>
</div>
</div>
</div>
<!-- 第二块中间图片 -->
<div class="box">
<div class="pic">
<img src="https://www.php.cn/static/images/index_ad222.jpg" alt="">
</div>
</div>
<!-- 第三块 -->
<div class="box2">
<!-- 左侧边栏-->
<div class="left">
<div class="top">头条</div>
<ul>
<li><a href="">php中文网原创视频</a></li>
<li><a href="">令人期待的PHP7.4</a></li>
<li><a href="">正则表达式语法教程</a></li>
<li><a href="">php中文网《玉女心经》</a></li>
<li><a href="">四个优秀php原生开发实战视</a></li>
<li><a href="">PHPConChina 2019 参会感</a></li>
<li><a href="">第八期超大型CMS系统的开发</a></li>
<li><a href="">编程我该学前端、后端还是</a></li>
<li><a href="">从PHP官方大佬的离开，来分</a></li>
<li><a href="">用真人码农来冒充AI编程，这</a></li>
</ul>
</div>
<!-- 中间-->
<div class="main">
<div class="top">最新课程</div>
<ul>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt="">
<br>php中文网原创视频</a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d2814b3a7a92573.jpg" alt="">
<br>令人期待的PHP7.4</a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/015/5d199b00c2b82390.jpg" alt="">
<br>正则表达式语法教程</a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d1726e0d8a60770.jpg" alt="">
<br>php中文网《玉女心经》</a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d172532890c7415.jpg" alt="">
<br>四个优秀php原生开发实战视</a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d1341d280a32428.jpg" alt="">
<br>PHPConChina 2019 参会感</a>
</li>
</ul>
</div>
<!-- 右侧边栏-->
<div class="right">
<div class="top">常用手册</div>
<ul>
<li><a href="">php中文网原创视频</a></li>
<li><a href="">令人期待的PHP7.4</a></li>
<li><a href="">正则表达式语法教程</a></li>
<li><a href="">php中文网《玉女心经》</a></li>
<li><a href="">四个优秀php原生开发实战视</a></li>
<li><a href="">PHPConChina 2019 参会感</a></li>
<li><a href="">第八期超大型CMS系统的开发</a></li>
<li><a href="">编程我该学前端、后端还是</a></li>
<li><a href="">从PHP官方大佬的离开，来分</a></li>
<li><a href="">用真人码农来冒充AI编程，这</a></li>
</ul>
</div>
</div>
<!-- 最后一块底部-->
<div class="footer">
<div class="content">
<ul class="nav">
<li class="itme"><a href="">网站首页</a></li>
<li class="itme"><a href="">PHP视频</a></li>
<li class="itme"><a href="">PHP实战</a></li>
<li class="itme"><a href="">PHP代码</a></li>
<li class="itme"><a href="">PHP手册</a></li>
<li class="itme"><a href="">词条</a></li>
<li class="itme"><a href="">手记</a></li>
</ul>
<p>PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p>Copyright 2014-2019 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
使用圣杯布局或者双飞翼布局，中间的框 我想让它和左边、右边空点距离；而且给它加上边框，我试了一下，不怎么会弄，然后我就给它设置了固定值，我看群里有些同学也是这个问题，想请老师讲解一下
