接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:
[color=#aaaaaa]<!---->[/color]
[color=#aaaaaa]<!---->[/color]
[color=#aaaaaa]<!---->[/color]
[color=#aaaaaa]<!---->[/color]
[color=#aaaaaa]<!---->[/color]
[color=#aaaaaa]<!---->[/color]
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container {width:100%}
/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。
关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):
1、请养成良好的注释习惯,这是非常重要的;
2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;
3、讲解一些常用的CSS代码的含义:
font:12px Tahoma;
这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;
margin:0px;
也使用了缩写,完整的应该是:
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
另外还有以下几种写法:
margin:0px auto;
说明上下边距为0px,左右为自动调整;
我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
text-align:center
文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
background:#ccc url('bg.gif') top left no-repeat;
表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
top left
表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素,Y座标为100像素的精确定位;
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
4、如何使页面居中?
大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
是因为我们在#container中使用了以下属性:
margin:0 auto;
按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
无标题文档
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
分享到:
相关推荐
### DIV+CSS布局入门教程知识点解析 #### 一、页面布局与规划 1. **页面布局的概念**: - 页面布局是指网站各个组成部分在页面上的排列方式,它直接影响着用户体验和信息传递的效果。 2. **术语简介**: - **...
### Div+CSS布局入门教程知识点解析 #### 一、网页制作基本概念 在网页制作领域,涉及到了多种术语和技术标准,比如**CSS**(层叠样式表)、**HTML**(超文本标记语言)、**DHTML**(动态HTML)以及**XHTML**(可...
Div+CSS布局入门教程+构思图+源码 第 1 页 页面布局与规划 第 2 页 写入整体层结构与CSS 第 3 页 页面顶部制作之一 第 4 页 页面顶部制作之二 第 5 页 页面制作-用好border和clear
Div+CSS布局入门实战教程(3) 本教程主要讲解了使用Div+CSS布局入门实战教程的第三部分,主要讲解了如何制作页面顶部,包括LOGO、菜单和Banner的制作,并对页面的CSS样式进行详细的讲解。 一、页面顶部制作 在...
在描述中提到的页面布局与规划阶段,我们需要先构思网页的整体结构。例如,一个典型的网页可能包含顶部(Logo、菜单、Banner)、主要内容(侧边栏、主体内容)和底部(版权信息)等部分。接着,利用Div将这些部分...
如果想学好Div+CSS布局就下这个资源 诚信可靠 Div+CSS布局入门教程资源.rar Div+CSS布局入门教程.doc ...2写入整体层结构与CSS.doc 3页面顶部制作之一.doc 4页面顶部制作之二.doc 5页面制作-用好border和clear.doc
Div+CSS经典速成教程主要讲述了使用Div和CSS进行网页布局设计的基本方法和步骤。Div和CSS是网页设计中的核心技术,主要用于控制网页的布局和样式。Div用于定义网页的结构,而CSS用于定义Div的样式。本教程适合已经...
【DIV+CSS布局】是一种网页设计的技术方法,它将网页的内容结构(HTML)与样式表现(CSS)分离,使得网页的维护和更新更加方便,同时提高了网页的性能和可访问性。这一概念在21世纪初随着Web标准的推广而流行起来。 ...
1. **内容与样式的分离**:通过将CSS写入外部样式表,HTML文档专注于内容的结构,提高了代码的可读性和可维护性。 2. **提高网页加载速度**:由于CSS文件可以被浏览器缓存,减少了HTTP请求,从而加快了网页加载速度...
二、写入整体层结构与CSS XHTML的基本结构形成,应用CSS对其进行控制。使页面初见形态。 ◆→http://www.52css.com/article.asp?id=303三、页面顶部制作 写好了页面DIV结构以后,开始细致地对每一个部分进行制作...
添加div+css的文本教程 添加html常用元素快键 添加另存为功能 查看浏览器效果;修改窗口弹出 打开编辑框就有着Dreamweaver的内容!xhtml html简介 html可以帮助大家快速编写html;还可以学习html,div+css,...
### DIV+CSS基础教程知识点详解 #### 一、基础知识概览 - **CSS** (Cascading Style Sheets): 层叠样式表,一种用来描述HTML文档外观和格式的语言。 - **HTML** (HyperText Markup Language): 超文本标记语言,用于...
这个文档主要讲关于网站div-css布局一些很使用的基本知识,主要有以下几个方面:一、页面布局与规划,二、写入整体层结构与CSS ,三、页面顶部制作之一,四、页面顶部制作之二,五、页面制作-用好border和clear ...
【标题】:“巨龙效果图自动切片生成Div+Css软件(附带自写的注册机)”涉及的主要知识点包括网页设计中的图像切片技术、Div+CSS布局以及软件的注册机制。 1. **图像切片技术**:在网页设计中,为了优化网页加载...
【描述】: 本文将探讨如何有效地结合使用DIV+CSS和JavaScript技术,以提升网页的布局美感与交互体验。这两种技术的融合使得网页设计更加灵活,同时也为实现3D特效提供了可能。 【标签】: "JavaScript" "HTML/CSS" ...
7. **结构与样式分离**:将样式写入CSS文件,通过外部引用实现内容和样式的分离,有利于代码维护和更新。 8. **文档结构化书写**:保持CSS代码的逻辑清晰,易于阅读和维护。 以上内容是`DIV+CSS`网页布局的基础...
【首页CSS+DIV布局模板】是一种常见的网页设计技术,它主要依赖于CSS(层叠样式表)和HTML中的<div>元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局,具有更高的灵活性、可维护性和搜索引擎优化...
说明这个不好 我的资源下有一个比这个全的 Div+CSS 希望找下 happylwg sorry 不过这个也可以 是好的资料 ...写入整体层结构与CSS 页面顶部制作之一.doc 页面顶部制作之二.doc 页面制作-用好border和clear.doc