滑不到最底部

来源：3-2 作业题

慕言_7946275

2019-11-20 17:18:43

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui">
<title>3-2项目</title>
<link rel="stylesheet" href="css/3-2项目.css">
</head>
<body>
<!-- 第一区域 -->
<div class="part1">
<ul class="nav">
<li class="nav-item nav-item-active">前端</li>
<li class="nav-item">java</li>
<li class="nav-item">ios</li>
<li class="nav-item">Android</li>
<li class="nav-item">php</li>
</ul>
<div class="part1-banner">
<img src="image/1.png" alt="1.png">
</div>

<span class="part1-text">IMOOC</span>
<button class="btn">start</button>
</div>


<!-- 第二区域 -->
<div class="part2">
<ul class="menu">
<li class="menu-item menu-item-active">关于慕课网</li>
<li class="menu-item">关于课程</li>
<li class="menu-item">核心团队</li>
<li class="menu-item">新增专题</li>
</ul>
</div>


<!-- 第三区域 -->
<div class="part3">
<h2 class="title">响应式</h2>
<p class="showContent">当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。</p>
</div>

<!-- 第四区域 -->
<div class="part4">
<span class="part4-text">IMOOC</span>
<div class="url">
<span>welcome to</span>&nbsp;<a href="###">www.imooc.com</a>
</div>
</div>


<!-- 第五区域 -->
<div class="part5">
<p class="main-course">主打课程</p>
<div class="main-course-item">
<div class="col">
<img src="image/1.jpg" />
</div>
<div class="col">
<img src="image/2.jpg" />
</div>
<div class="col">
<img src="image/3.jpg" />
</div>
<div class="col">
<img src="image/4.jpg" />
</div>
<div class="col">
<img src="image/5.jpg" />
</div>
<div class="col">
<img src="image/6.jpg" />
</div>
</div>
</div>

<!-- 第六区域 -->
<div class="part6">
<p>Copyright &copy; 2017 immoc.com All Rights Reserved</p>
</div>

</body>
</html>

@charset "utf-8";

*{	
	box-sizing: border-box;
	margin:0; 
	padding: 0;
}
html,body{
	width: 100%;
	height: 100%;
	font-size:0.8rem;
}
img{
    vertical-align: top;
    width: 100%;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}

/*part1*/
.part1{
	height: 100%;
	background: #B2C5CC;
	padding:3rem;

}

.nav{
	width: 50%;
	margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
}
.nav-item{
	color:#757575;
	
}
.nav-item-active{
	color:#afafaf;
}


.part1-banner{
	width: 20%;
	margin:5.0rem auto;
}

.part1-text{
	font-size:1.0rem;
	color:#fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}	
.btn{
	width: 10rem;
	height: 3.5rem;
	outline: none;
	cursor: pointer;
	background-color: rgb(255, 255, 255);
	position: absolute;
	left:50%;
	margin-left: -5rem;
	margin-top: 10.5rem;

}

/*第二区域*/
.part2{
	width: 100%;
	padding:0.25rem;

}
.menu{
	display: flex;
    justify-content: space-around;
    align-items: center;
    padding:1.5rem;
    border-bottom:0.025rem solid lightgray;
}
.menu-item{
	width: 25%;
	color: #bababa;
	display: flex;
    justify-content: space-around;
    align-items: center;
}
.menu-item-active{
	color:#545454;
}

/*第三区域*/
.part3{
	width: 100%;
	padding-bottom:2.5rem;
	
}
.title{
	padding-top: 7rem;
	text-align: center;
    color: #545454;
    font-size:1.5rem;
}
.showContent{
	color: #bababa;
	width: 60%;
	margin:3.5rem auto;
	font-size:1rem;
	line-height: 3rem;
}


/*第四区域*/
.part4{
	width: 100%;
	background: #f4f4f4;

   
}
.part4-text{
	display: inline-block;
	width: 100%;
	font-size:1.5rem;
	color:#bababa;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding:1rem;
	
}
.url{
	width: 100%;
	color: #bababa;
	display: flex;
	justify-content:center;
	align-items: center;
	padding-bottom:1rem;
}
.url a{
	color:#000;
}

/*第五区域*/
.part5{
	width: 100%;
	padding: 1.5rem;
	background: url(../image/bg.jpg) no-repeat;
}
.main-course{
	padding: 2%;
	font-size: 1rem;
}

.main-course-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.main-course-item .col{
    width: 33%;
    height: 200px;
    padding: 1%;
    background-size:cover;

}
.main-course-item .col img{
    width: 100%;
    height: 100%;
}


/*第六区域*/
.part6{
	width: 100%;
    background: #f4f4f4;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:1rem;
}

写回答

2回答