`
hereson
  • 浏览: 1449666 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Div+CSS布局入门教程——写入整体层结构与CSS

阅读更多
接下来我们在桌面新建一个文件夹,命名为“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布局入门教程.pdf

    ### DIV+CSS布局入门教程知识点解析 #### 一、页面布局与规划 1. **页面布局的概念**: - 页面布局是指网站各个组成部分在页面上的排列方式,它直接影响着用户体验和信息传递的效果。 2. **术语简介**: - **...

    Div+CSS布局入门教程

    ### Div+CSS布局入门教程知识点解析 #### 一、网页制作基本概念 在网页制作领域,涉及到了多种术语和技术标准,比如**CSS**(层叠样式表)、**HTML**(超文本标记语言)、**DHTML**(动态HTML)以及**XHTML**(可...

    Div+CSS布局入门教程+构思图+源码

    Div+CSS布局入门教程+构思图+源码 第 1 页 页面布局与规划 第 2 页 写入整体层结构与CSS 第 3 页 页面顶部制作之一 第 4 页 页面顶部制作之二 第 5 页 页面制作-用好border和clear

    Div+CSS布局入门实战教程(3)[参照].pdf

    Div+CSS布局入门实战教程(3) 本教程主要讲解了使用Div+CSS布局入门实战教程的第三部分,主要讲解了如何制作页面顶部,包括LOGO、菜单和Banner的制作,并对页面的CSS样式进行详细的讲解。 一、页面顶部制作 在...

    Div+CSS布局入门教程.doc

    在描述中提到的页面布局与规划阶段,我们需要先构思网页的整体结构。例如,一个典型的网页可能包含顶部(Logo、菜单、Banner)、主要内容(侧边栏、主体内容)和底部(版权信息)等部分。接着,利用Div将这些部分...

    Div CSS布局大全.rar

    如果想学好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用于定义网页的结构,而CSS用于定义Div的样式。本教程适合已经...

    DIV+CSS布局PPT

    【DIV+CSS布局】是一种网页设计的技术方法,它将网页的内容结构(HTML)与样式表现(CSS)分离,使得网页的维护和更新更加方便,同时提高了网页的性能和可访问性。这一概念在21世纪初随着Web标准的推广而流行起来。 ...

    DIV+CSS网站重构教程

    1. **内容与样式的分离**:通过将CSS写入外部样式表,HTML文档专注于内容的结构,提高了代码的可读性和可维护性。 2. **提高网页加载速度**:由于CSS文件可以被浏览器缓存,减少了HTTP请求,从而加快了网页加载速度...

    divcss布局大全 疯狂代码.zip

    二、写入整体层结构与CSS XHTML的基本结构形成,应用CSS对其进行控制。使页面初见形态。 ◆→http://www.52css.com/article.asp?id=303三、页面顶部制作 写好了页面DIV结构以后,开始细致地对每一个部分进行制作...

    HTML编写+div+css教程--v1.5--风雨无阻

    添加div+css的文本教程 添加html常用元素快键 添加另存为功能 查看浏览器效果;修改窗口弹出 打开编辑框就有着Dreamweaver的内容!xhtml html简介 html可以帮助大家快速编写html;还可以学习html,div+css,...

    DIV+CSS基础教程

    ### DIV+CSS基础教程知识点详解 #### 一、基础知识概览 - **CSS** (Cascading Style Sheets): 层叠样式表,一种用来描述HTML文档外观和格式的语言。 - **HTML** (HyperText Markup Language): 超文本标记语言,用于...

    div-css布局学习和网站学习心得

    这个文档主要讲关于网站div-css布局一些很使用的基本知识,主要有以下几个方面:一、页面布局与规划,二、写入整体层结构与CSS ,三、页面顶部制作之一,四、页面顶部制作之二,五、页面制作-用好border和clear ...

    巨龙效果图自动切片生成Div+Css软件(附带自写的注册机)

    【标题】:“巨龙效果图自动切片生成Div+Css软件(附带自写的注册机)”涉及的主要知识点包括网页设计中的图像切片技术、Div+CSS布局以及软件的注册机制。 1. **图像切片技术**:在网页设计中,为了优化网页加载...

    DIV+CSS与javascript的结合运用.docx

    【描述】: 本文将探讨如何有效地结合使用DIV+CSS和JavaScript技术,以提升网页的布局美感与交互体验。这两种技术的融合使得网页设计更加灵活,同时也为实现3D特效提供了可能。 【标签】: "JavaScript" "HTML/CSS" ...

    DIV+CSS_网页布局常用基础知识.pdf

    7. **结构与样式分离**:将样式写入CSS文件,通过外部引用实现内容和样式的分离,有利于代码维护和更新。 8. **文档结构化书写**:保持CSS代码的逻辑清晰,易于阅读和维护。 以上内容是`DIV+CSS`网页布局的基础...

    首页CSS+DIV布局模板

    【首页CSS+DIV布局模板】是一种常见的网页设计技术,它主要依赖于CSS(层叠样式表)和HTML中的&lt;div&gt;元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局,具有更高的灵活性、可维护性和搜索引擎优化...

    CSS+DIV布局.rar

    说明这个不好 我的资源下有一个比这个全的 Div+CSS 希望找下 happylwg sorry 不过这个也可以 是好的资料 ...写入整体层结构与CSS 页面顶部制作之一.doc 页面顶部制作之二.doc 页面制作-用好border和clear.doc

Global site tag (gtag.js) - Google Analytics