QQ相册(html)实例详述----Div布局

最新推荐文章于 2024-06-19 11:06:21 发布

对明天的期待丶

最新推荐文章于 2024-06-19 11:06:21 发布

阅读量1.7k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/qq_39429962/article/details/82763266

版权

今天重新整理了一下前端div布局的知识，发现有了一些比较深的认识，特在此详述一下。

div定义：可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

在考虑很多页面的布局时，我们首先会想到div，因为这是一个块级元素，分好块后，无论怎么修改该div里边的标签，都不会影响该div以外的标签属性，因此，提高了页面布局的效率，不会因为某一个标签影响到整个页面的布局。

下边是我模仿QQ空间写的一个例子：

<html>
	<head >
		<meta charset="UTF-8"/>
		<title>我的相册</title>
		<style>
			body{
				background-color:#312752;
				margin:0px;
				padding:0px;	
			}
			.div_top{
				height:50px;
				width:100%;
			}
			.div_menu{
				height:50px;
				width:4%;
				margin-left:1%;
				float:left;
				text-align:center;
				line-height:50px;
				font-size:14px;
				color:#ccc7d9;
			}
			.div_tittle{
				height:90px;
				width:100%;
			}
			
			.userlogo{
				height:78px;
				width:78px;
				margin-left:6%;
				margin-top:0.5%;
				float:left;
				background-color:#fff;
			}
			.user_text{
				height:28px;
				width:82%;
				float:left;
				margin-left:1%;
			}
			.div_display{
				width:94%;
				height:600px;
				margin-left:5%;
				position:relative;
			}
			.div_photo{
				width:179px;
				height:160px;
				float:left;
				margin-top:2%;
				margin-left:1%;
				text-align:center;
				background-color:#353a54;
			}
			#photos{
				width:100%;
				height:80%;
			}
			.photo_text{
				text-align:center;
				font-size:13px;
				line-height:26px;
				color:#ccc7d9;

最低0.47元/天解锁文章

对明天的期待丶

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
QQ相册(html)实例详述----Div布局

今天重新整理了一下前端div布局的知识，发现有了一些比较深的认识，特在此详述一下。 div定义：可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 &lt;div&gt;，那么该标签的作用会变得更加有效。在考虑很多页面的布局时，我们首先会想到div，因...
复制链接

扫一扫