论坛首页 → 入门技术论坛 →

CSS之border margin padding

浏览 2650 次
锁定老帖子 主题：CSS之border margin padding
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • lucky520
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 40
  • 来自: 武汉
   发表时间：2008-11-19  

       拿到一个页面，首先要将根据页面排版将它划分成若干个div,由于div是自动换行的，于是我们想到用float,margin来确定div的位置（如果你没有css基础，可以看看我前面的文章，下载css入门文档看看）.

下面是我练习的一个简单例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" rel="stylesheet" href="demo.css"/>
<title>无标题文档</title>
</head>

<body>
<div id="header">
    <div class="header_left"><p>Hello CSS</p></div>
	<div class="header_right"><h1>右边内容fgdsgsdfgfdsgdsfgdsfgsdfgfdsgfdsgsdfgsdg</h1></div>
</div>
</body>
</html>

 你可以看到页面效果很简单，就是用一个header这个大盒子，装着两个小盒子header_left,header_right.那么我们该 如何定义这些盒子的样式呢？（这里我就不解释定义css的原则了）

1.首先定义body的样式:

body{
font-size:14px;
font-weight:bold;

/*定义页面的背景图片*/
background:url(img/bg.jpg) 0 0 repeat-x;
}

根据css2.0帮助手册，你可以知道background拥有5个常用属性：背景颜色，背景图片，是否重复，是否滚动，图片坐标

2.定义大盒子header样式：

#header{
background:#FFFFFF;
width:760px;
height:140px;
border: yellow 1px solid;
}

这段代码应该没什么难度吧。

3.定义左边的盒子header_left的样式：

.header_left{
width:480px;
height:120px;
background-color:#006666;
color:#FFFFFF;
float:left;
margin:10px 0px 10px 2px;
border: #00FF00 1px solid;
}

这里要注意float属性，因为div默认是自动换行的，我们要用header装着header_left并且让header_left左靠齐就需要这样处理。margin是这里要着重说的属性，它的四个值就是代表header_left左边的盒子与外层header盒子上，右，下，左的距离。border是盒子的边框。

3.定义右边盒子header_right的样式：

.header_right{
  width:270px;
  height:120px;
  float:right;
  background-color:#000000;
  color:#FFFFFF;
  border: red 1px solid;
  margin:10px 2px 0px 0px;
}

和左边盒子样式差不多，如果你还不是很明白，你可以把上面margin的四个值改大点看看效果。

4.定义左边盒子里标签p的样式：

.header_left  p{
   font-size:24px;
   font-weight:bold;  
   padding:50px 0px 50px 150px;
}

这里要主要是padding属性，它表示标签p里的内容距离左边盒子header_left的上，右，下，左边的距离。

5.定义右边盒子里h1标签的样式：

.header_right h1{
 font-size:24px;
 padding:50px;
 overflow:hidden;
}

这里主要是说overflow属性，根据帮助知道它有auto(自动),hidden(如果内容超过边框就隐藏),scoll(内容超出显示滚动条)几个常用属性，可以自己分别试一试。

 

这个例子很简单，但我觉得只要看懂这个例子就明白border,margin,padding这几个属性了。demo将以附件上传.同时提供一个css2.0中文帮助手册。我今天也是第四天学习css,做点笔记，如果你有什么心得，大家可以相互学习学习。
返回顶楼
         
  • 278506470
  • 等级: 初级会员
  • 性别:
  • 文章: 34
  • 积分: 60
  • 来自: 武汉
   发表时间：2008-11-21  
有长进了，css属性太多了，一起探讨。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics