当前位置:  编程技术>WEB前端

非常漂亮的Div+CSS布局入门教程第1/5页

    来源: 互联网  发布时间:2014-09-06

    本文导语:  在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CS...

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。

下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:

  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
  2、内容部分又可分为侧边栏、主体内容;
  3、底部,包括一些版权信息。
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。

  DIV结构如下:
  │body {} /*这是一个HTML元素,具体我就不说明了*/
  └#Container {} /*页面层容器*/
     ├#Header {} /*页面头部*/
     ├#PageBody {} /*页面主体*/
     │ ├#Sidebar {} /*侧边栏*/
     │ └#MainBody {} /*主体内容*/
     └#Footer {} /*页面底部*/

至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。


    
 
 

您可能感兴趣的文章:

  • 用标准件的方式来组装网页DIV布局-WEB标准网站设计心得
  • 使用JQUERY进行后台页面布局控制DIV实现左右式
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • DIV+CSS布局的网站对网站SEO的影响分析
  • DIV CSS网页布局 最小高度(min-height)的妙用
  • div+css布局必了解的列表元素ul ol li dl dt dd详解
  • DIV+CSS布局教程大全与pdf电子书 下载
  • DIV+CSS网页另类上下布局的实例代码
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • 不用float实现div模块居中布局
  • div+css页面布局的五个小技巧
  • 布局用CSS+DIV的优点总结
  • 用div实现像table一样的布局方法
  • CSS顶级技巧大放送,div+css布局必知
  • 像table一样布局div
  • div+css布局必须要知道的css条件注释理论及实践第1/2页
  • div结合css布局bbs首页(div+css布局入门)
  • 推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页
  • 脚本控制三行三列自适应高度DIV布局
  • div+css布局入门
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • 如何动态修改层(<div ....> </div>)的显示与否?
  • java命名空间javax.swing.text.html类html.tag的类成员方法: div定义及介绍
  • 父div高度不能自适应子div高度的解决方案
  • java命名空间javax.management类query的类成员方法: div定义及介绍
  • 难!!!在jsp文件的java代码片段中控制该网页上DIV的属性以达到隐藏或显示某div的目的???
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k1div2luminance定义及介绍
  • jQuery拖动div、移动div与弹出层实例
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k2div2chrominance定义及介绍
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • 在div中使用css让文字底部对齐的方法
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • 基于DIV+ul+li实现的表格(多示例)
  • Jquery在指定DIV加载HTML示例代码
  • HTML 区块元素:<DIV>和 <SPAN>各自的定义与区别详细介绍
  • jquery 页面滚动到指定DIV的代码
  • HTML <div> 标签
  • 巧用jquery解决下拉菜单被Div遮挡的相关问题
  • jquery 实现弹出div位于屏幕正中(图文)
  • 解决 select 挡住div的解决方法
  • div+css如何实现页脚的置底


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3