Div+CSS基础.docx
- 文档编号:3280699
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:13
- 大小:221.37KB
Div+CSS基础.docx
《Div+CSS基础.docx》由会员分享,可在线阅读,更多相关《Div+CSS基础.docx(13页珍藏版)》请在冰点文库上搜索。
Div+CSS基础
Div+CSS基础
一、页面布局与规划2
二、使用列表
制作菜单8三、如何用好border和clear11
一、页面布局与规划
所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是构思好的界面布局图(范例)。
下面,需要根据构思图来规划一下页面的布局,仔细分析一下该图,不难发现,图片大致分为以下几个部分:
1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
2、内容部分又可分为侧边栏、主体内容;
3、底部,包括一些版权信息。
有了以上的分析,就可以很容易布局了,设计层如下图:
根据上图,再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:
│body{} /*这是一个HTML元素*/
└#Container{} /*页面层容器*/
├#Header{} /*页面头部*/
├#PageBody{} /*页面主体*/
│ ├#Sidebar{} /*侧边栏*/
│ └#MainBody{} /*主体内容*/
└#Footer{} /*页面底部*/
至此,页面布局与规划已经完成,接下来要做的就是开始书写HTML代码和CSS。
(以下内容html脚本淡忘的同学一定要认真阅读,不理解之处及时请教指导老师。
)
写入整体层结构与CSS(以下实例,希望大家同步操作)
在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
无标题文档
这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,在
标签对中写入DIV的基本结构,代码如下:[color=#aaaaaa]--页面层容器-->[/color]
[color=#aaaaaa]--页面头部-->[/color]
[color=#aaaaaa]--页面主体-->[/color]
[color=#aaaaaa]--侧边栏-->[/color]
[color=#aaaaaa]--主体内容-->[/color]
[color=#aaaaaa]--页面底部-->[/color]
为了使以后阅读代码更简易,应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:
/*基本信息*/
body{font:
12pxTahoma;margin:
0px;text-align:
center;background:
#FFF;}
/*页面层容器*/
#container{width:
100%}
/*页面头部*/
#Header{width:
800px;margin:
0auto;height:
100px;background:
#FFCC99}
/*页面主体*/
#PageBody{width:
800px;margin:
0auto;height:
400px;background:
#CCFF00}
/*页面底部*/
#Footer{width:
800px;margin:
0auto;height:
50px;background:
#00FFFF}
把以上文件保存,用浏览器打开,这时已经可以看到基础结构了,这个就是页面的框架了。
一些常用的CSS代码的含义:
font:
12pxTahoma;
这里使用了缩写,完整的代码应该是:
font-size:
12px;font-family:
Tahoma;说明字体为12像素大小,字体为Tahoma格式;
margin:
0px;
也使用了缩写,完整的应该是:
margin-top:
0px;margin-right:
0px;margin-bottom:
0px;margin-left:
0px或margin:
0px0px0px0px
顺序是上/右/下/左,你也可以书写为margin:
0(缩写);
以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
另外还有以下几种写法:
margin:
0pxauto;
说明上下边距为0px,左右为自动调整;
以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
text-align:
center
文字对齐方式,可以设置为左、右、中,这里将它设置为居中对齐。
background:
#FFF
设置背景色为白色,这里颜色使用了缩写,完整的应该是background:
#FFFFFF。
background可以用来给指定的层填充背景色、背景图片,以后将用到如下格式:
background:
#cccurl('bg.gif')topleftno-repeat;
表示:
使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,topleft
表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
top/right/bottom/left/center
用于定位背景图片,分别表示上/右/下/左/中;还可以使用background:
url('bg.gif')20px100px;
表示X座标为20像素,Y座标为100像素的精确定位;repeat/no-repeat/repeat-x/repeat-y
分别表示填充满整个层/不填充/沿X轴填充/沿Y轴填充。
height/width/color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
如何使页面居中?
大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
是因为在#container中使用了以下属性:
margin:
0auto;
按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
通过margin:
auto就可以轻易地使层自动居中了。
二、使用列表
制作菜单确定已经根据前文内容写入了DIV、CSS到index.htm和css.css文件中后,同学们可同步操作以下脚本:
博客
设计
相册
论坛
关于
还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{},如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。
另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。