css+div布局案例

css+div布局案例

ID:34516306

大小:303.00 KB

页数:15页

时间:2019-03-07

css+div布局案例_第1页
css+div布局案例_第2页
css+div布局案例_第3页
css+div布局案例_第4页
css+div布局案例_第5页
资源描述:

《css+div布局案例》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、范文范例指导参考CSS+DIV布局案例所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;  2、内容部分又可分为侧边栏、主体内容;  3、底部,包括一些版权信息。  有了以上的分析,我们就可以很容易的布局了,

2、我们设计层如下图:学习资料整理分享范文范例指导参考根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。  DIV结构如下:  │body{} /*这是一个HTML元素,具体我就不说明了*/  └#Container{} /*页面层容器*/     ├#Header{} /*页面头部*/     ├#PageBody学习资料整理分享范文范例指导参考{} /*页面主体*/     │ ├#Sidebar{} /*侧边栏*/     │ └#MainBody{} /*主体内容*/     

3、└#Footer{} /*页面底部*/至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:

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

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

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

6、olor=#aaaaaa][/color]    

学习资料整理分享范文范例指导参考  
  [color=#aaaaaa][/color]  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:/*基本信息*/body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}/*页

7、面层容器*/#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}把以上文件保存,用浏览器打开

8、,这时我们已经可以看到基础结构了,这个就是页面的框架了。关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):1、请养成良好的注释习惯,这是非常重要的;2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;3、讲解一些常用的CSS代码的含义:font:12pxTahoma;这里使用了缩

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

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

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