收藏
批改状态：合格
老师批语：其实许多知识点, 大家完全可以通过自学, 但为什么要付费来学习, 一个重要的原因, 是想知道其它人是不是也不这样用的, 老师是不是也这样用的, 用验证的眼光来学习, 是最牛B的
1、完成一个网站的首页的完整内容布局
<!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">
<!-- <link rel="stylesheet" href="css/style.css"> -->
<style>
body,
h1,
p {
margin: 0;
}
/* 头部信息 */
.header {
background-color: black
}
.header .content {
width: 90%;
background-color: black;
margin: 0 auto;
height: 60px;
/* 防止导航溢出 自动移动到下面*/
overflow: hidden;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
padding: 0 15px;
line-height: 60px;
text-decoration: none;
text-align: center;
color: white;
font-size: 18px;
font-family: 微软雅黑;
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 1.3rem;
}
/* 底部信息 */
.footer {
width: 100%;
background-color: #444444;
}
.footer .content {
width: 90%;
background-color: #444444;
height: 60px;
margin: 0 auto;
}
.footer .content p {
line-height: 60px;
text-align: center;
}
.footer .content p a {
color: #999999;
text-decoration: none;
}
.footer .content p a:hover {
color: white;
}
/* 内容主题区 */
.slider {
width: 90%;
height: 450px;
margin: 0 auto;
}
.slider img {
width: 100%;
height: 100%;
}
.container {
width: 90%;
margin: 5px auto;
}
.left {
min-height: 500px;
width: 200px;
background-color: seashell;
margin-left: -100%;
box-sizing: border-box;
padding: 10px;
border: 1px solid #c9c6c6;
}
.right {
min-height: 500px;
width: 200px;
background-color: seashell;
margin-left: -202px;
border: 1px solid #c9c6c6;
box-sizing: border-box;
padding: 10px;
}
.main {
width: 100%;
min-height: 500px;
box-sizing: border-box;
padding-left: 200px;
padding-right: 200px;
}
.left,
.right,
.main {
float: left;
}
.container {
overflow: hidden;
}
.left h1 {
color: #555;
font-size: 1.5rem;
border-bottom: 1px solid #555555;
}
.left ul {
margin-top: 20px;
padding: 0;
}
.left ul li {
list-style: none;
padding: 5px 20px;
}
.left ul li a {
text-decoration: none;
color: #555555;
}
.left ul li a:hover {
color: crimson;
text-decoration: underline;
cursor: pointer;
}
/**/
.right h1 {
color: #555;
font-size: 1.5rem;
border-bottom: 1px solid #555555;
}
.right ul {
margin-top: 20px;
padding: 0;
}
.right ul li {
list-style: none;
padding: 5px;
}
.right ul li a {
text-decoration: none;
color: #555555;
}
.right ul li a:hover {
color: crimson;
text-decoration: underline;
cursor: pointer;
}
.plate {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.plate .plate-title h1 {
width: 95%;
padding: 0;
margin-left: 10px;
margin-top: 10px;
font-size: 24px;
font-weight: bold;
border-bottom: 1px solid #999999;
}
.plate .plate-list {
padding: 0;
margin: 0;
border: 0;
}
.plate .plate-list .plate-box {
width: 100%;
min-width: 940px;
margin-top: 5px;
padding: 0;
}
.plate .plate-list .plate-box li {
width: 290px;
height: 200px;
margin-left: 10px;
list-style: none;
float: left;
border: 1px solid #ccc;
}
.plate .plate-list .plate-box .pic img {
width: 290px;
}
.plate .plate-list .plate-box .banner {
width: 75%;
float: left;
}
.plate .plate-list .plate-box .button {
width: 25%;
float: right;
}
.plate .plate-list .plate-box .button .btn {
border-radius: 15px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item">
<a href="">首页</a>
</li>
<li class="item">
<a href="">自驾游</a>
</li>
<li class="item">
<a href="">国内游</a>
</li>
<li class="item">
<a href="">国外游</a>
</li>
<li class="item">
<a href="">"十一"长假</a>
</li>
</ul>
</div>
</div>
<div class="slider">
<img src="http://img.zcool.cn/community/01cd0258d93766a801219c77b2642c.jpg">
</div>
<div class="container">
<div class="main">
<div class="plate">
<div class="plate-title">
<h1>热卖推荐</h1>
</div>
<div class="plate-list">
<ul class="plate-box">
<li>
<span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
<span class="banner">【爆款】沙巴.沙比岛5天游</span>
<span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
</li>
<li>
<span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
<span class="banner">【爆款】沙巴.沙比岛5天游</span>
<span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
</li>
<li>
<span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
<span class="banner">【爆款】沙巴.沙比岛5天游</span>
<span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
</li>
<li>
<span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
<span class="banner">【爆款】沙巴.沙比岛5天游</span>
<span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
</li>
<li>
<span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
<span class="banner">【爆款】沙巴.沙比岛5天游</span>
<span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
</li>
<li>
<span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
<span class="banner">【爆款】沙巴.沙比岛5天游</span>
<span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
</li>
</ul>
</div>
</div>
</div>
<div class="left">
<h1>商品列表</h1>
<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>
<li>
<a href="">自由行</a>
</li>
</ul>
</div>
<div class="right">
<h1>热卖线路排行</h1>
<ul>
<li>
<a href="">1、沙巴.沙比岛5天游</a>
</li>
<li>
<a href="">2、新加坡|巴淡岛6天</a>
</li>
<li>
<a href="">3、曼谷芭提雅6天</a>
</li>
<li>
<a href="">4、东阪5大名城6天</a>
</li>
<li>
<a href="">5、土耳其蓝色浪漫全景游12天</a>
</li>
<li>
<a href="">6、德法瑞意12天</a>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">个人网站</a> |
<a href="">400-****-1234</a> |
<a href="">皖ICP备19***666</a>
</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
注意点：
1 left、right、main(wrap)浮动后，会飘出文档流，解决方式：在父级元素增加container {overflow: hidden;}，清除浮动；
2 导航防止溢出 自动移动下面，可增加overflow:hidden属性；
3 双飞翼和圣杯布局原理基本相似，差别在main盒模型计算方式
.main{ box-sizing: border-box; }
计算标准设置到边框上，抵消到内边距对盒子的影响，这样就不会被撑开了；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
