您的位置：首页 > 网站优化 > css  >  Div+CSS布局入门教程--写入整体层结构与CSS

Div+CSS布局入门教程--写入整体层结构与CSS

 更新时间：2017年7月6日 23:13  点击：2217

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

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

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

 代码如下 复制代码

<div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]
　　<div id="Header">[color=#aaaaaa]<!--页面头部-->[/color]
　　</div>
　　<div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]
　　　　<div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
　　　　</div>
　　　　<div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]
　　　　</div>
　　</div>
　　<div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]
　　</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、请养成良好的注释习惯，这是非常重要的；

2、body是一个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。

[!--infotagslink--]

相关文章

  • C#中txt数据写入的几种常见方法

    这篇文章主要给大家介绍了关于C#中txt数据写入的几种常见方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-25

  • C#窗体布局方式详解

    这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25

  • Lua语言新手简单入门教程

    这篇文章主要给大家介绍的是关于Lua语言新手入门的简单教程，文中通过示例代码一步步介绍的非常详细，对各位新手们的入门提供了一个很方便的教程，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。...2020-06-30

  • c# 对CSV文件操作（写入、读取、修改）

    这篇文章主要介绍了c# 如何对CSV文件操作，帮助大家更好的理解和学习C#,感兴趣的朋友可以了解下...2020-11-03

  • js中flexible.js实现淘宝弹性布局方案

    这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25

  • 从零开始在vue-cli4配置自适应vw布局的实现

    这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09

  • C#线程入门教程之单线程介绍

    这篇文章主要介绍了C#线程入门教程之单线程介绍,本文讲解了什么是进程、什么是线程、什么是多线程等内容,并给出了一个单线程代码示例,需要的朋友可以参考下...2020-06-25

  • 在echarts中图例legend和坐标系grid实现左右布局实例

    这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17

  • Flex网页布局基础入门及实例教程

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14

  • CocosCreator入门教程之用TS制作第一个游戏

    这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏，对TypeScript感兴趣的同学，一定要看一下...2021-04-16

  • Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01

  • JavaScript瀑布流布局实现代码

    这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • php入门教程（类实例教程)

    这里主要讲到关于在php教程类的调用，申请明，使用以前各种类的实例方法与操作过程，让你清楚的知道php类的construct destruct clone call wake sleep用法。 简单购物车...2016-11-25

  • 解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

    这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • js实现瀑布流布局（无限加载）

    这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • winform 使用Anchor属性进行界面布局的方法详解

    这篇文章主要介绍了winform 使用Anchor属性进行界面布局的方法，有需要的朋友可以参考一下...2020-06-25

  • 详解HTML5布局和HTML5标签

    这篇文章主要介绍了HTML5布局和HTML5标签的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08

  • Android布局之TableLayout-TableRow布局

    本文章来给各位同学详细介绍关于Android布局之TableLayout-TableRow布局,各位同学有需要可进入参考。 代码如下 复制代码 <?xml version="1...2016-09-20

  • php入门教程,？号表达式

    下面举一个很简单的？表达式的实现吧，其实它就是简单的if else哦。 <? $a = 5; //定义变数a=5 $b = 3; //定义变数b=5 $c = ($a==$b) ? ("yes") : ("no"); //如果...2016-11-25

  • 一看就懂的ReactJs基础入门教程-精华版

    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦...2021-04-05