当前位置：网站首页 > 技术文章 > 正文

网页制作Div+CSS的布局与规划

myzbx 2024-12-09 15:35 32 浏览

我们在网页制作中，会有许多的术语

例如：CSS、HTML、DHTML、XHTML等等。

下面开始使用DIV+CSS进行网页布局设计。

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

下面，我们需要根据构思图来规划一下页面的布局，图片大致分为以下几个部分：

　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；

　　2、内容部分又可分为侧边栏、主体内容；

　　3、底部，包括一些版权信息。

有了以上的分析，我们就可以很容易的布局了，例如以下设计层下图:

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

　　DIV结构如下：　

　│body {}　/*这是一个HTML元素*/

　　└#Container {}　/*页面层容器*/　

　　　　├#Header {}　/*页面头部*/

　　　　├#PageBody {}　/*页面主体*/　

　　　　│　├#Sidebar {}　/*侧边栏*/　

　　　　│　└#MainBody {}　/*主体内容*/　

　　　　└#Footer {}　/*页面底部*/

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

HTML 布局

上一篇：css布局方案汇总(28个实例图文并茂)
下一篇：初学者:HTML+CSS静态网页开发——网页布局

相关推荐

java基础都在这了，小主们拿去吧（java基础总结大全）: -----面向对象---------面向对象和面向过程的区别？面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描述某个事务在整个问题中的行为。面向过程是分析出解决问...

Java 8:一文掌握 Lambda 表达式 | CSDN 博文精选: 作者|Android大强哥责编|郭芮出品|CSDN博客本文将介绍Java8新增的Lambda表达式，包括Lambda表达式的常见用法以及方法引用的用法，并对Lambda...

如何理解Python类中的self?（python方法中self.属性）: 许多python初学者，在接触到python面向对象的时候，就被类中包含的方法中的self打败了，不知道self是何物？既然写在方法中，是必须参数，为何在调用方法的时候不给它传参数还能正常运行？和我们...

javascript的this用法（javascript中的this）: this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，functiontest(){this.x=1;}随着函数使用场合的不同，th...

JavaScript 的 this 原理是什么?（js中this的含义）: JavaScript中的this是一个关键字，代表当前执行代码的上下文对象。它的值在运行时确定，根据不同的调用方式和执行环境，this的值也会发生变化。具体来说，this的取值规则如下：如果...

小白学习Java开发如何入门?你可能需要这份学习路线图: 21世纪进入信息时代，信息科技给人类的生产和生活方式带来了深刻的变革，信息产业已成为推动国家经济发展的主导产业之一，Java作为含金量极高的一门IT技术，很多人希望从事这个行业，那么想学好Java，要...

Java类与对象知识点总结（java第十一章类和对象）: #头号有新人##java#1．类与对象java是一门纯面向对象的语言，在java面向对象的世界里，一切皆为对象。面向对象是解决问题的一种思想，主要是要依靠对象之间的交互完成一件事情。用面向对象的思想...

JavaScript面试题精选:10个高频问题详解: 引言JavaScript是现代Web开发的支柱。无论您是在准备面试还是复习知识，这里有10个经常被问到的JavaScript问题，配有简洁准确的答案。1.var、let和const有什么区别？v...

三石说:java基础类与对象（java类和对象总结）: 类：类是封装对象的行为和属性的载体，具有相同属行和行为的一类实体。类中包含方法和属性。类中的构造方法：1.构造方法没有返回值2.名称与类名相同，在构造方法中可以为成员变量赋值，也就是初始化成员变量，若...

C#自学——委托、LINQ（c#中委托）: 委托的概念委托是一种可以指向方法的数据类型(委托类型)，可以声明委托类型的变量数据类型指的是类似类的，前面提到过一切皆对象，委托就是将方法当作对象使用声明委托delegate返回值类型委托类型名称...

JVM(三)对象的生死判定和算法详解: 导读：对象除了生死之外，还有其他状态吗？对象真正的死亡，难道只经历一次简单的判定？如何在垂死的边缘“拯救”一个将死对象？判断对象的生死存活都有那些算法？本文带你一起找到这些答案。在正式开始之前，我们先...

这几道面试题，可以考考自己（面试真题去哪里找）: 选择几道主流面试题，让大家自我检验一下，理论与实践相结合，才能更容易拿到高薪。Copy如何在.NET中做deepcopy？1）使用序列化反序列化对象实现深度克隆2）使用反射实现深度克隆trycat...

掌握 C# 和 .NET:常用术语与概念（c#用于什么）: 在群里看到一则招聘信息，《基本功扎实，对DDD、OO、IOC、AOP等有深刻认识，熟悉常用设计模式。》OO是什么？？查了一下原来OO原来指的是面向对象编程（OOP），于是就总结了一些常用的术语...

Java新特性:Lambda表达式（java lambda表达式的3种简写方式）: 1、Lambda表达式概述1.1、Lambda表达式的简介Lambda表达式（Lambdaexpression），也可称为闭包（Closure），是Java（SE）8中一个重要的新特性。Lam...

JS的this指向问题（js如何改变this指向）: 一句话概括this指向：谁调用this就指向谁这句话可能太过广义，那么请看以下的各种this指向场景1.箭头函数（=>）箭头函数this的指向不会发生改变，也就是说在创建箭头函数时就已经确定了...

一周热门

最近发表

首页
收录
顶部