前端---HTML5简单页面布局（img添加图片）




<html>
<head ><meta charset="ansi"/>
	<title>MyZone</title>
	
	
	<style>
		.div_top{
			width:100%;
			height:56px;
			background-color:#777;
		}
		
		.div_title{
			width:100%;
			height:100px;
			background-color:#555;
			margin-top:10px;
		}
		
		.div_body{
			width:100%;
			height:1000px;
			background-color:#bbb;
			margin-top:10px;
		}
		
		.div_menu{
			width:5%;
			height:56px;
			float:left;
			font-size:14px;
			color:#fff;
			text-align:center;
			line-height:56px;

		}
		.color-menu1{
			background-color:#999;
		}
		.color-menu2{
			background-color:#666;
		}
		.color-menu3{
			background-color:#999;
		}
		.color-menu4{
			background-color:#666;
		}
		
		.div_headimage{
			height:100px;
			width:100px;
			margin-left:5%;
			float:left;
		}
                .div_titledata{
                        height:24px;
			width:166px;
                        float:left;
                        font-size:22px;
                        margin-left:2%;
                        color:#f0ffff;
                }
                .div_titledata2{
                        height:24px;
			width:600px;
                        float:left;
                        font-size:22px;
                        margin-left:2%;
                        color:#f0ffff;
                }
               .div_photo{
                       height:300px;
                       width:20%;
                       float:left;
                       margin-left:30px;
                       margin-top:10px;
                }
               .div_phototime{
                       height:25px;
                       width:250px;
                       text-align:center;
                       line-height:25px;   
                       background-color:#A9A9A9;                 
                }
               .div_end{
                       text-align:center;
                       width:100%;
		       height:100px;
                       float:left;
                       background-color:#555;

	</style> 
</head>

<body style="background-color:#969696">
	<div class="div_top" >
		<div class="div_menu color-menu1" style="margin-left:5%">相册</div>
		<div class="div_menu color-menu2" >照片</div>
		<div class="div_menu color-menu3" >面孔墙</div>
		<div class="div_menu color-menu2" style=" float:right" >反馈</div>
                <div class="div_menu color-menu3" style="float:right" >回收站</div>
                <div class="div_menu color-menu2" style="float:right" >应用</div>
	</div>	
	     <div class="div_title" >
                   <div class="div_headimage" ><img height=100 width=100 src="images/logo.jpg"  /></div>
                   <div class="div_titledata" ><b>说说和日志相册</b></div>
                   <div class="div_titledata2" ><b>上传照片/视频  批量管理</b></div>
                   <div class="div_titledata2" style="margin-right:1%;" ><b>评论    赞<br/></b><pre> 0   0</pre></div>
             </div>	
	         <div class="div_body" >
                      <div class="div_photo"><img height=250 width=250 src="images/logo1.jpg" /><div  class="div_phototime" >2018-10-05</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo2.jpg" /><div  class="div_phototime">2018-09-03</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo3.jpg" /><div  class="div_phototime">2018-09-05</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo4.jpg" /><div  class="div_phototime">2018-08-07</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo5.jpg" /><div  class="div_phototime">2017-05-25</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo6.jpg" /><div  class="div_phototime">2017-05-21</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo7.jpg" /><div  class="div_phototime">2017-05-18</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo8.jpg" /><div  class="div_phototime">2017-02-15</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo9.jpg" /><div  class="div_phototime">2018-08-07</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo10.jpg" /><div  class="div_phototime">2017-05-25</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo11.jpg" /><div  class="div_phototime">2017-05-21</div></div>
                      <div class="div_photo"><img height=250 width=250 src="images/logo12.jpg" /><div  class="div_phototime">2017-05-18</div></div>               
                  </div>
     <div class="div_end">
        <span>空间手机版 | 黄钻贵族 | 官方Qzone | QQ互联 | 腾讯课堂 | 腾讯文档 | 腾讯客服 | QQ空间服务协议 | Complaint Guidelines | 粤网文[2017]6138-1456号</span><br />
        <span>Copyright *2005 - 2018 Tencent.All Rights Reserved.</span><br />
        <span>腾讯公司 版权所有</span><br />
     </div>
</body>
</html>

在该代码中我们利用前端技术html和css简单制作一个qq空间相册页面，在该代码中主要使用有三种主要元素：

<div...>***********<div.../>:利用div进行页面布局分割，在该项目中我们将一个页面分为四个大的div板块进行操作，首先是div_top设置了页面最上面一栏的菜单选项，其次是div_title设置了接下来空间相册的一个页面操作部分，在div_body中添加图片，最后的div_end中放入相册页面最底部的文字信息。
<style...>**********<style.../>:style属性利用css层叠样式表设置各个div所需的属性，只需在其中各个div中添加class="div_****"即可使div使用其中的各属性，不过需注意的是如果在<div>中里面用标签方式定义style属性，最后div展现出的样式以后者为准。
<span...>***********<span.../>span元素在之前的博客中有介绍过，主要是用于添加一段文字，所以在最后文字信息中使用span元素来进行编写。

在下面，我们可以看下该代码最后呈现的效果图：

前端---HTML5简单页面布局（img添加图片）

猜你喜欢