(二)盒子模型

一个漂亮的网页,除了有漂亮的图片外,还要有漂亮的页面布局,页面布局的好坏,对页面的美观度也是至关重要的!!

通过观察大量网站页面布局,都会用到盒子模型进行页面布局,那什么是盒子模型呢?

关于盒子模型,看了讲解视频,也是云里雾里的,下面是个人的一些理解,不足之处还请前辈们给予指点...

  盒子模型简而言之就是一间房间里面,放一个盒子,而盒子里面放的也有珠宝。房间相当于一个完整的html页面,盒子可以理解为一个<div></div>块,珠宝就是div标签中存放的内容。

一个简单的盒子模型页面就是:

html页面如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="box.css"/>
<title>盒子模型</title>
</head>

<body>

<div class="se1">
<img src="1.jpg"/><br/>
<a href="#">点击信息</a>
</div>
</body>
</html>

CSS代码如下:

body{
border:1px solid red; /*1px表示边框的宽度 solid实线 red颜色*/
width:600px;
height:500px;
font-size:12px;
/*body体自动居中*/
margin:0px auto; /*0px表示上下距离,auto左右自动居中*/
}

.se1{
width:65px;
height:62px;
border:1px solid blue;
margin:5px 0px 0px 5px;  /*margin中值的个数:1-->上右下左,2-->上下、右左,3-->上、右左、下,4-->上右下左*/
padding-left:5px;
}

.se1 img{
border:1px solid black;
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
margin-bottom:3px;
}

 

posted @ 2015-06-16 10:17  咸稀饭  阅读(109)  评论(0编辑  收藏  举报