Blogger Information
Blog 19
fans 0
comment 0
visits 16752
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
完成一个网站的首页的完整内容布局 2019.09.05 8:00
努力拼搏----赵桂福的博客
Original
649 people have browsed it

处理这个完整点的内容布局,在综合运用知识上并没有很好的掌握,本想拷贝别网站的页面样式,最后没有那么做,我想既然深入学习,那么就应该去写,哪怕错了对自己来说也是一个进步吧。总体来说,实际去做还是收获很多,知道了自己哪里不足。

实例

<!DOCTYPE html>
<html>
<head>
	<title>页面布局</title>
	<style>
	body{
		padding:0px;
		margin:0px;
	}
		.header{
			width:90%;
			min-height:50px;
			background:#666666;
			margin:0 auto;
		}
		.header h2{
			margin:0;
			padding:0;
			text-align: center;
			line-height: 50px;
		}
		.container{

			width:90%;
			background:green;
			margin:5px auto;

		}
		.left{
			width:200px;
			min-height: 600px;
			background:black;
		}
		.right{
			width:200px;
			min-height: 600px;
			background:#555555;
		}
		.wrap{
			width:100%;
			background:#777777;
		}
		.main{
			
			min-height:600px;
		  
		}
		
		.wrap,.left, .right{
			float:left;
		}

		.container{
			overflow:hidden;
		}
		.main{
			padding: 0 200px;
		}
		.left{

			margin-left: -100%;
		}
		.right{
			margin-left:-200px;
		}
		
		.footer {
		
		background:#444444;
		width:90%;
		margin:5px auto;}
		.footer .content{
		hight:110px;
		line-height:50px;
		text-align:center;}
		.container .left h2{
		
		font-size:14px;
		color:white;
		text-align:center;
		border-bottom:1px solid white;}
		ul li{
		color:white;
		font-size:14px;
		}
		/*以下header引入老师的样式*/
		.header .content {
    width: 100%;
    background-color: black;
    margin: 0 auto;
    height: 60px;
}
/*以下header引入老师的样式*/
.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;
    /*水平居中*/
    text-align: center;
    /*垂直居中*/
    line-height: 60px;
    /*导航前景色*/
    color: white;
    padding: 0 15px;
    /*去掉a标签的默认下划线*/
    text-decoration: none;
}
.header .content .nav .item a:hover {
    background-color: red;
    font-size: 1.1rem;
}
	
.main ul {
height:600px;
padding:0;
margin:0;
list-style:none;
}	

.main ul li{
text-align:center;
width:200px;
color:white;
float:left;
margin-left:32px;
}
.mian ul li p{
text-align:center;
}

.right  ul{
padding:0;
margin:0;
list-style:none;
}

.right ul li {
margin-left:42px;
}
.right ul li img{
width:100px;
}
	</style>
</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="container">
	<div class="wrap">
		<div class="main">
		<ul>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
			<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		</ul>
		</div>
	</div>
	
	<div class="left">
	<h2>产品分类</h2>
	<div class='content'>
	<ul>
	<li><a>产品一</li>
	<li>产品二</li>
	<li>产品三</li>
	</ul>
	</div>
	</div>
	<div class="right">
	
	<ul>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		<li>
		<img src='1.jpg' width='200'>
		<p>产品名称:黄金</p>
		</li>
		
		</ul>
	</div>
</div>
<div class="footer">
<div class='content'><p>版权归属:php中文网</p></div></div>
</body>
</html>

运行实例 »

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

 【总结】 自己去写还是生了很多,不知道怎么全面去思考,还需要加强练习,打好基本功。感谢老师的辛勤付出!
老师,教师节快乐!

Correction status:qualified

Teacher's comments:咱们这期学员的基本功还是有的, 要相信自己
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post