HTML+CSS 轻松入门之盒子模型之边框（下）
通常我们是很少给p标签来加边框的，但是在设计的时候，我们会给div 标签 加上 边框，这样看起来会明显一点
下面我们来做一个实例：比如网站首页部分，头部 中部（分为左右俩块） 底部 这样的一个布局样式，我们要怎么实现呢
首先我们要给一个大的div 头部中部和底部都放在这个div 中 这样我们就要给第一个div 做一个css样式，然后再这个div 中加入3个div 标签
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px;
height:500px;
border:1px solid red;
margin:0 auto; /*居中*/
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">中部</div>
<div id="but">底部</div>
</div>
</body>
</html>下面我们要给头部中部底部分别加上样式，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center;
}
#top{
width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
}
#cen{
width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
}
#but{
width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
}
#left{
width:200px;
height:198px;
border:1px solid green;
margin-left:5px;
float:left;
}
#right{
width:570px;
height:198px;
border:1px solid black;
float:right;
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
<div id="but">底部</div>
</div>
</body>
</html>注：边框也要分上下左右的
border-top 上
border-left 左
border-right 右
border-buttom 下
我又来了
可以给页面分成不同的版块
8年前 添加回复 0