DIV+CSS学习(二)

zhoujiangzi

浏览: 93360 次
性别:
来自: 成都

最近访客更多访客>>

1621326529

ErrorOr

dzq1994

liuluwdy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前端

今天主要来学习下列布局，一个好的网页需要有好的布局方式，如果布局很乱，那么用户在浏览的时候，就会感觉很糟糕，以至于下次不会再来查看我们的网站。

1.首先创建个index.html页面，然后添加个div，为了使div能清楚看到，我们加上背景色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV+CSS学习(二)</title>
</head>
<style>
.div{
    width:300px;
	height:400px;
	background:red;
}
</style>
<body>

<div class="div">这是一个div</div>

</body>
</html>

代码很简单，就设置了div的宽度和高度，浏览结果如下：

现在我们让这个DIV固定宽度居中，要解决这个问题，这里使用margin属性，即外边距，也就是我们当前元素到浏览器的边框距离。

我们在css中添加上这个属性，让其居中

.div{
    width:300px;
	height:400px;
	background:red;
	margin:auto;
}

得到的结果：

注意，margin这个属性有四个参数，对应的意思分别是上右下左对应的边距。

同样我们可以设置body的margin属性，可以设置为0，这样当我们的宽度不设置的时候，就不会存在边框了，而是紧贴着浏览器的。

下面再来进行一个布局，也就是我们网页经常被分为上中下三部分，那么用DIV+CSS该如何写呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV+CSS学习(二)</title>
</head>
<style>
.header{
    width:80%;
	height:100px;
	background:#9f9;
	margin:5px auto;
}
.bodyer{
	width:80%;
	height:400px;
	background:blue;
	margin:5px auto;
}
.footer{
	width:80%;
	height:100px;
	background:#9f9;
	margin:5px auto;
}
</style>
<body>

<div class="header">头部信息</div>
<div class="bodyer">中间部分</div>
<div class="footer">尾部信息</div>
</body>
</html>

注意margin，每个都是距离上的边距为5px，其他为自动，浏览结果如下：