页面布局知识-2019年9月5日20时 - 学习作业

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整首页实例</title>
<style>

body {
     margin:0;
	 padding:0;
}
.header{
     width:100%;
     height:60px;
	 background:gray;
	 margin-bottom:5px;
	 overflow:hidden;
}

.logo {
     width:200px;
	 height:50px;
	 background:#fff;
	 margin:5px 0 0 5px;
	 text-align:center;
	 font-size:20px;
	 line-height:50px;
}

.nav{
     width:100%;
     height:30px;
	 background:pink;
	 margin-bottom:5px;
}

.navs {
     margin:0px;
	 padding:0px;
}

.item {
	 list-style:none;
}

.nav .navs .item a {
     float: left;
     min-width: 60px;
     min-height: 30px;
     text-align: center;
     line-height: 30px;
     color: white;
     padding: 0 15px;
     text-decoration: none;
}

.nav .navs .item a:hover {
     background-color: red;
     font-size: 1.1rem;
}

.main{
     width: 100%;
     background-color: lightgray;
     margin: 5px auto;
     overflow: hidden;
}

.content {
     width:100%;
	 background:pink;
	 min-height:388px;
	 float:left;
	 box-sizing: border-box;
     padding-left: 200px;
     padding-right: 200px;
}

.content .pic {
     width:98%;
	 margin:5px auto;	 
}

.content .pic ul {
     list-style:none; 
}

.content .pic ul li {
     float:left; 
	 padding:3px;
	 border:1px dashed #888;
	 margin-left:5px;
	 margin-bottom:5px;
	 background:#fff;
}

.content .pic ul li p{
     width:100%;
	 line-height:24px;
	 font-size:12px;
	 text-align:center;
}

.left {
     width:200px;
	 background:lightblue;
	 min-height:388px;
	 float:left;
     margin-left: -100%;
}

.left h1 {
     font-size:16px;
	 margin-left:20px;
}

.left ul{
     width:70%;
	 margin:5px auto;
	 list-style:none;
}

.left ul li {
     margin-bottom:3px;
}

.left ul li a{
     text-decoration:none;
	 color:#333;
}

.right {
     width:200px;
	 background:lightgreen;
	 min-height:388px;
	 float:left;
     margin-left: -200px;
}

.right h1 {
     font-size:16px;
	 margin-left:20px;
}

.right ol{
     width:70%;
	 margin:5px auto;
}

.right ol li {
     margin-bottom:3px;
}

.right ol li a{
     text-decoration:none;
	 color:#333;
}

.footer{
     width:100%;
     height:60px;
	 text-align:center;
	 line-height:60px;
	 font-size:12px;
	 background:gray;
}

.links {
     width: 90%;
     height: 60px;
     margin: 0 auto;
}

.links p {
     text-align: center;
     line-height: 60px;
	 color:#fff;
}

.links p a {
     color: #ffffff;
     text-decoration: none;
	 font-size:14px;
}

.links p a:hover {
     color: white;
	 font-size:15px;
}

</style>
</head>
<body>
<div class="header">
     <div class="logo">LOGO</div>
     
</div>
<div class="nav">
     <ul class="navs">
	 <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>
	 <li class="item"><a href="">其它</a></li>
	 </ul>
</div>
<div class="main">
    <div class="content">
	     <div class="pic">
		     <ul>
			     <li><a href=""><img src="https://img.php.cn/upload/jscode/000/120/096/5d72013de8cc1516.jpg" width="188"></a><p>推荐美图</p></li>
			     <li><a href=""><img src="https://img.php.cn/upload/jscode/000/120/096/5d72013de8cc1516.jpg" width="188"></a><p>推荐美图</p></li>
			     <li><a href=""><img src="https://img.php.cn/upload/jscode/000/120/096/5d72013de8cc1516.jpg" width="188"></a><p>推荐美图</p></li>
			     <li><a href=""><img src="https://img.php.cn/upload/jscode/000/120/096/5d72013de8cc1516.jpg" width="188"></a><p>推荐美图</p></li>
			     <li><a href=""><img src="https://img.php.cn/upload/jscode/000/120/096/5d72013de8cc1516.jpg" width="188"></a><p>推荐美图</p></li>
			 </ul>
		 </div>
	</div>
    <div class="left">
	<h1>最新上架</h1>
	<ul>
	<li><a href="">新上架商品1</a></li>
	<li><a href="">新上架商品2</a></li>
	<li><a href="">新上架商品3</a></li>
	<li><a href="">新上架商品4</a></li>
	<li><a href="">新上架商品5</a></li>
	<li><a href="">新上架商品6</a></li>
	<li><a href="">新上架商品7</a></li>
	<li><a href="">新上架商品8</a></li>
	<li><a href="">新上架商品9</a></li>
	<li><a href="">新上架商品10</a></li>
	</ul>
	</div>
    <div class="right">
	<h1>热门排行</h1>
	<ol>
	<li><a href="">热销商品1</a></li>
	<li><a href="">热销商品2</a></li>
	<li><a href="">热销商品3</a></li>
	<li><a href="">热销商品4</a></li>
	<li><a href="">热销商品5</a></li>
	<li><a href="">热销商品6</a></li>
	<li><a href="">热销商品7</a></li>
	<li><a href="">热销商品8</a></li>
	<li><a href="">热销商品9</a></li>
	<li><a href="">热销商品10</a></li>
	</ol>
	</div>
</div>
</div>
<div class="footer">
     <div class="links">
	     <p>
		 <a href="">关于我们</a>  | 
		 <a href="">广告服务</a>  | 
		 <a href="">联系我们</a>
		 </p>
	 </div>
</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：这个页面比较丑, 但基本功能都有, UI这块有空了解一下

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

问题：选用今晚学的任一种布局模式,完成一个网站的首页的完整内容布局, 具体思路参考demo4.html

实例