接下来我们在桌面新建一个文件夹,命名为“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>
分享到:
相关推荐
第 2 页 写入整体层结构与CSS 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: <!DOCTYPE ...
Div+CSS布局入门教程+构思图+源码 第 1 页 页面布局与规划 第 2 页 写入整体层结构与CSS 第 3 页 页面顶部制作之一 第 4 页 页面顶部制作之二 第 5 页 页面制作-用好border和clear
如果想学好Div+CSS布局就下这个资源 诚信可靠 Div+CSS布局入门教程资源.rar Div+CSS布局入门教程.doc ...2写入整体层结构与CSS.doc 3页面顶部制作之一.doc 4页面顶部制作之二.doc 5页面制作-用好border和clear.doc
二、写入整体层结构与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 ,三、页面顶部制作之一,四、页面顶部制作之二,五、页面制作-用好border和clear ...
说明这个不好 我的资源下有一个比这个全的 Div+CSS 希望找下 happylwg sorry 不过这个也可以 是好的资料 ...写入整体层结构与CSS 页面顶部制作之一.doc 页面顶部制作之二.doc 页面制作-用好border和clear.doc
2013-08-04 更新修正图片扩展名含有大写字母时,上传不成功的问题修正分类移动功能的一点bug《嵩嵩图片管理系统》简称"SsPic",采用ASP+ACCESS+DIV+CSS+AJAX开发,可配置在支持ASP环境的任意主机。 1.安装环境 嵩...
这是一个用html5写入捕鱼的游戏...3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。
netbeans+JAVADB 试题管理系统 程序+数据库+文档 javaDB netbeans jdbc jsf div/css+javascript 三层结构 servlet entitybean managedbean 登录验证 权限选择。
发布新样式,调整网站结构,只需修改css目录中的css.css文件即可。 商城网站完全独立,网站源码随时可供您下载到本地电脑保存备份。 更重要的是,此版本还免费下载,免费使用,免费传播。 --------注意事项-----...
超强的单文件论坛系统,具备主流论坛功能,设置管理简单 全力支持Excel Access MSSQL MYSQL DBASE数据库,数据库全部经测试通过 ...简单的DIV+CSS结构,支持主流浏览器 个人觉得有点意思,学习学习,分享分享
现在html5 css3已经越来越流行,用CSS3实现DIV渐变已经不是什么难事了,但现在还需要先在PS中画出效果后再取色,写入CSS3比较麻烦。 今天给大家介绍一款插件,可以自由拖动DIV的渐变颜色,并直接复制代码即可,方便...
智能缓存:从资源列表、搜索结果,到单个资源显示页面,智能缓存机制实现静态HTML同等的效果登录节点:整合社会化评论系统,只要用户留言,即可将网站推广到成千上万的第三方平台SEO:网站采用纯div+css+html5友好...
4.标签系统与模板系统,只需懂得div+css,就可以做出自己的新模板,里面放入各类标签就可以轻松调用文档、用户等列表内容 5.多词搜索,且搜索词加粗加红 6.评论功能复出,增加文档的实用点评性! 7.文档简介正式加入...
接下来先为body编写CSS代码:(方法还是和“我的第一张css+div布局网页”一样,用鼠标编代码,呵呵!) body { margin: 0px; padding: 0px; background-attachment: fixed; background-image: url(images/tupian/
4.标签系统与模板系统,只需懂得div+css,就可以做出自己的新模板,里面放入各类标签就可以轻松调用文档、用户等列表内容 5.多词搜索,且搜索词加粗加红 6.评论功能复出,增加文档的实用点评性! 7.文档简介正式加入...
Div+CSS+JS+AJAX 智能瀑布流展示图片,自适应屏幕宽度 多功能无限级分类 支持10M以上的大图片上传,自动生成缩略图,加快显示速度 批量上传图片,一键上传文件夹内所有选择的图片 图片自动按年月生成...
而且系统首页利用CSS/DIV 技术的结合,让页面动感展示,效果很不错,我利用JSP做的页面展示,页面整体构想简单明了,各种优惠活动都在首页,一眼就能看到。 采用C/S架构,使用Java Spring MVC架构 开发平台:Eclipse...
2、栏目菜单需要打开top.asp文件找到相关div ul li 的css样式写的菜单,改汉字栏目名称,和超级链接地址。不知道栏目的链接 地址,可以再后台此栏目下面发表几个文章,然后打开网站,在文章顶部找到 您的位置 点击此...