css网页制作教程-完整布局实例

css网页制作教程-完整布局实例

ID:25261427

大小:362.00 KB

页数:54页

时间:2018-11-19

css网页制作教程-完整布局实例_第1页
css网页制作教程-完整布局实例_第2页
css网页制作教程-完整布局实例_第3页
css网页制作教程-完整布局实例_第4页
css网页制作教程-完整布局实例_第5页
资源描述:

《css网页制作教程-完整布局实例》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、CSS网页制作教程-完整布局实例在网页制作教程中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部

2、分:  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;  2、内容部分又可分为侧边栏、主体内容;  3、底部,包括一些版权信息。  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。  DIV结构如下:  │body{} /*这是一个HTML元素,具体我就不说明了*/  └#Container{} /*页面层容器*/     ├#Header{} /*页面头部*/     ├#PageBody{} /*页面主体*/     │ ├#Sidebar{} /*侧边栏*

3、/     │ └#MainBody{} /*主体内容*/     └#Footer{} /*页面底部*/至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。下面,我们在标签对中写入DIV的基本结构,代码如下:[color=#aaaaaa][/color]  

4、ivid="Header">[color=#aaaaaa][/color]  

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

5、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;

6、height:400px;background:#CCFF00}/*页面底部*/#Footer{width:800px;margin:0auto;height:50px;background:#00FFFF}把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):1、请养成良好的注释习惯,这是非常重要的;2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;3、讲解一些常用的CSS代码的含义:font:12pxTahoma;这里使用了缩写,完整的代码应该是

7、: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则是自动

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

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

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