`
newleague
  • 浏览: 1492344 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

Div+CSS布局入门教程

阅读更多

一、页面布局与规划
  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
    在网页制作中,有许多的术语,例如:CSSHTMLDHTMLXHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

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


  下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
  1、顶部部分,其中又包括了LOGOMENU和一幅Banner图片;
  2、内容部分又可分为侧边栏、主体内容;
  3、底部,包括一些版权信息。
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

 


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

 


  DIV结构如下:
  body {} /*这是一个HTML元素,具体我就不说明了*/
  #Container {} /*页面层容器*/
     #Header {} /*页面头部*/
     #PageBody {} /*页面主体*/
      #Sidebar {} /*侧边栏*/
      #MainBody {} /*主体内容*/
     #Footer {} /*页面底部*/
  至此,页面布局与规划已经完成, 接下来我们要做的就是开始书写HTML代码和CSS

二、写入整体层结构与CSS

  接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习,在文件夹下新建两个空的记事本文档,输入以下内容:


程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>


  这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css

  下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:


程序代码

<div id="container"><!--
页面层容器-->
  <div id="Header"><!--页面头部-->
  </div>
  <div id="PageBody"><!--页面主体-->
    <div id="Sidebar"><!--侧边栏-->
    </div>
    <div id="MainBody"><!--主体内容-->
    </div>
  </div>
  <div id="Footer"><!--页面底部-->
  </div>
</div>


  为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:



程序代码

/*
基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*
页面层容器*/
#container {width:100%}

/*
页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*
页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*
页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}


  把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。
  关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):

  1、请养成良好的注释习惯,这是非常重要的;

  2body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;

  3、讲解一些常用的CSS代码的含义:

    font:12px Tahoma
    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;

    margin:0px
    也使用了缩写,完整的应该是:

    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
    或
    margin:0px 0px 0px 0px

    顺序是 / / / 左,你也可以书写为margin:0(缩写)
    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
    另外还有以下几种写法:
    margin:0px auto
    说明上下边距为0px,左右为自动调整;
    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。

    text-align:center
    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。

    background:#FFF
    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF
    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
    background:#ccc url('bg.gif') top left no-repeat
    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
    top left
    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
    top/right/left/bottom/center
    用于定位背景图片,分别表示 / / / / 中;还可以使用
    background:url('bg.gif') 20px 100px;
    表示X座标为20像素,Y座标为100像素的精确定位;
    repeat/no-repeat/repeat-x/repeat-y
    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

分享到:
评论

相关推荐

    Div+CSS布局入门教程(一二三四)

    【Div+CSS布局入门教程详解】 Div+CSS布局是网页设计中的重要技术,它通过分离样式和内容,使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局,从基础概念到实际操作,帮助你掌握这种布局...

    FastReport 模版打印如何实现

    FastReport 模版打印如何实现

    使用运算放大器模拟反相放大器的闭环电压增益simulink.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    基于java的抗疫医疗用品销售平台设计与实现.docx

    基于java的抗疫医疗用品销售平台设计与实现.docx

    vue+SpringBoot749乡村日常政务管理系统的设计与实现java毕业设计源码含论文.rar

    jdk版本:jdk1.8+ 前端:vue.js+ElementUI 开发工具:IDEA 或者eclipse都支持 编程语言: java 框架支持:springboot 数据库: mysql 版本不限 数据库工具:Navicat/SQLyog都可以 详细技术:java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架,后端采用java语言,sprinboot框架,mybatis操作数据源,使用软件:idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计,并基于MySQL数据库管理系统

    java毕业设计源码ssm859基于SSM框架的线上DIY手工艺品综合平台+vue程序数据库含论文.rar

    前端采用的Vue框架,后端采用java语言,ssm框架,mybatis操作数据源,使用软件:idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计,并基于MySQL数据库管理系统 本系统基于SSM(Spring+SpringMVC+MyBatis)框架,适用于毕业设计, 基于B/S模式, mysql数据库,感兴趣的朋友们可以下载研究一下。 jdk版本:jdk1.8+ 前端:vue.js+ElementUI 开发工具:IDEA 或者eclipse都支持 编程语言: java 框架支持:ssm 数据库: mysql 版本不限 数据库工具:Navicat/SQLyog都可以 详细技术:java+ssm+vue+MYSQL+MAVEN

    java基于ssm+vue企业在线培训系统源码 带毕业论文

    【资源说明】 1、开发环境:ssm框架;内含Mysql数据库;VUE技术 2、项目代码都经过严格调试,代码没有任何bug!下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。

    任务管理系统Web(Spring+Mybaties).zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    这是一个基于mediapipe实现的运动计数项目;大三上期末小组作业;python。.zip

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    (全国物联网大赛一等奖,挑战杯铜奖)基于QT的人脸识别,定位导航,脑电心率测算,用GPRS传到服务端的疲劳驾驶检测系统(毕设&课

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    南开大学2023年前端开发实训大作业.zip(课设&实训&大作业&项目)

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    毕业设计 C-V2X漏洞挖掘 开放资源.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    基于 Java+SqlServer 实现的学生学籍管理系统毕业设计(源代码+论文+开题报告+外文翻译+答辩PPT)

    【作品名称】:基于 Java+SqlServer 实现的学生学籍管理系统【毕业设计】(源代码+论文+开题报告+外文翻译+答辩PPT) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:本系统是用JSP开发工具实现的,主要完成对学籍的管理,包括添加、修改、删除,查询,以及用户管理等五个方面。系统可以完成对各类信息的浏览、查询、添加、删除、修改等功能。系统的核心是添加、修改和删除三者之间的联系,每一个表的修改都将联动的影响其它的表,当完成添加或删除操作时系统会自动地完成学籍的修改。查询功能也是系统的核心之一,在系统中主要根据学生学号和课程号进行查询,其目的都是为了方便用户使用。系统也有完整的用户添加、删除和密码修改功能。 本系统功能主要划分学生操作管理、管理员操作管理这2大模块。其中学生操作模块包括学籍维护、选课管理、成绩查询、修改密码这几个小模块。管理员操作包括后台学生信息管理、选修课程信息管理、基础课程信息管理、成绩这几个小模块。 在本系统中使用的是SQL Server2000数据库

    本项目属于机器学习的简单部分,基于为了快速理解机器学习而搭建的人工智能速成项目(毕设&课设&实训&大作业&竞赛&项目)

    本项目属于机器学习的简单部分,基于为了快速理解机器学习而搭建的人工智能速成项目,大家可以根据其中的项目时间进行相关的学习.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    2022年研一高级机器学习课程设计.zip(课设&实训&大作业&项目)

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。

    java-ssm947基于JSP的贝儿宠物店管理系统的设计与实现+jsp程序源码数据库含论文.rar

    本系统基于SSM(Spring+SpringMVC+MyBatis)框架,适用于毕业设计, 基于B/S模式, mysql数据库,感兴趣的朋友们可以下载研究一下。 后端采用java语言,ssm框架,mybatis操作数据源,使用软件:idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计,并基于MySQL数据库管理系统 jdk版本:jdk1.8+ 前端:jsp 开发工具:IDEA 或者eclipse都支持 编程语言: java 框架支持:ssm 数据库: mysql 版本不限 数据库工具:Navicat/SQLyog都可以 详细技术:java+ssm+jsp+MYSQL+MAVEN

    vue+SpringBoot421露营地管理系统设计与实现java毕业设计源码含论文.rar

    jdk版本:jdk1.8+ 前端:vue.js+ElementUI 开发工具:IDEA 或者eclipse都支持 编程语言: java 框架支持:springboot 数据库: mysql 版本不限 数据库工具:Navicat/SQLyog都可以 详细技术:java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架,后端采用java语言,sprinboot框架,mybatis操作数据源,使用软件:idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计,并基于MySQL数据库管理系统

    基于java的小型药店管理系统设计与实现.docx

    基于java的小型药店管理系统设计与实现.docx

Global site tag (gtag.js) - Google Analytics