div+css网页制作首页布局实例教程

div+css网页制作首页布局实例教程

ID:13313711

大小:304.50 KB

页数:11页

时间:2018-07-21

div+css网页制作首页布局实例教程_第1页
div+css网页制作首页布局实例教程_第2页
div+css网页制作首页布局实例教程_第3页
div+css网页制作首页布局实例教程_第4页
div+css网页制作首页布局实例教程_第5页
资源描述:

《div+css网页制作首页布局实例教程》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、龙图网-为您提供更有价值的web资源www.logtu.comDIV+CSS:网站首页布局实例教程第一步:页面布局与规划在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制

2、作的界面布局简单的构画出来,以下是我构思好的界面布局图。下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;  2、内容部分又可分为侧边栏、主体内容;  3、底部,包括一些版权信息。  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:www.logtu.com龙图网-为您提供更有价值的web资源www.logtu.com根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关

3、系,这样理解起来就会更简单了。DIV结构如下:  │body{} /*这是一个HTML元素,具体我就不说明了*/  └#Containerwww.logtu.com龙图网-为您提供更有价值的web资源www.logtu.com{} /*页面层容器*/     ├#Header{} /*页面头部*/     ├#PageBody{} /*页面主体*/     │ ├#Sidebar{} /*侧边栏*/     │ └#MainBody{} /*主体内容*/     └#Footer{} /*页面底部*/至此,页面

4、布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。第二步:写入整体层结构和CSS接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:

5、tml">无标题文档这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。下面,我们在标签对中写入DIV的基本结构,

6、代码如下:[color=#aaaaaa][/color]  [color=#aaaaaa][/color]  

  [color=#aaaaaa][/color]    [color=#aaaaaa][/color]    
    

7、>[color=#aaaaaa][/color]    

  
  [color=#aaaaaa][/color]  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:/*基本信息*/body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}/*页面层容器*/#co

8、ntainer{width:100%}/*页面头部*/#Header{width:800px;margin:0auto;height:100px;background:#FFCC99}www.logtu.com龙图网-为您提供更有价值的web资源www.logtu.com/*页面主体*/#PageBody{width:800px;margin:0auto;height:400px;ba

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。