当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想

基础代码:

 <!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=utf-8" />

 <title>DIV+CSS布局教程</title>

 <style type="text/css">

 #Container{

     width:1000px;

     margin: auto;/*设置整个容器在浏览器中水平居中*/

     background:#CF3;

 }

 #Header{

     height:80px;

     background:#;

 }

 #logo{

     padding-left:50px;

     padding-top:20px;

     padding-bottom:50px;

 }

 #Content{

     height:600px;

     /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/

     margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/

     background:#0FF;

 }

 #Content-Left{

     height:400px;

     width:200px;

     margin:20px;/*设置元素跟其他元素的距离为20像素*/

     float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/

     background:#90C;

 }

 #Content-Main{

     height:400px;

     width:720px;

     margin:20px;/*设置元素跟其他元素的距离为20像素*/

     float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/

     background:#90C;

 }

 /*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/

 #Footer{

     height:40px;

     background:#90C;

     margin-top:20px;

 }

 .Clear{

     clear:both;

 }

 </style>

 </head>

 <body>

 <div id="Container">

     <div id="Header">

         <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>

     </div>

     <div id="Content">

         <div id="Content-Left">Content-Left</div>

         <div id="Content-Main">Content-Main</div>

     </div>

     <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>

     <div id="Footer">Footer</div>

 </div>

 </body>

 </html>

Container作为整个页面的容器，控制着整个页面在浏览器的位置，此处使用margin:0 auto;控制Container容器在浏览器中水平居中，一般固定宽度的布局都会用到这就代码。

本文只讲述最基本的布局，在具体开发实践中可能会遇到浏览器兼容性等其他问题，遇到细节问题请自行百度解决，解决的多了经验就积累起来了。

ok

【html】【7】基础布局初探的更多相关文章

  1. laravel 5.5 《电商实战 》基础布局

    我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所 ...

  2. CSS基础布局

    目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...

  3. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  4. Android 的UI基础布局的学习

    一. 今天学习了Android 的UI基础布局的部分,绝大多数的布局都在Androidstudio的这个界面里,如下: 在左边的框里的palette的内部,包含了的大多数的布局所要用的button按钮 ...

  5. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  6. Android学习系列(5)--App布局初探之简单模型

    人类科技的进步源自探索,探索来自于发现本原,当然App布局没这么先进,本文也只是一个归类总结.这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. Androi ...

  7. flex进行页面的基础布局

    接触flex有一段时间了,由于自己在移动上的经验比较少,一直以为这个和css3的其他属性差不多,就是一个盒模型的缩放之类的.今天一个移动的小项目用到了这个属性,仔细看了下,先不说里面具体的属性,就fl ...

  8. java基础 布局管理器

    概念: 组建在容器(比如JFrame)中的位置和 大小 是由布局管理器来决定的.所有的容器都会使用一个布局管理器,通过它来自动进行组建的布局管理. 种类: java共提供了物种布局管理器:流式布局管理 ...

  9. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

随机推荐

  1. 转：SQL Server 批量插入数据的两种方法

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...

  2. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...

  3. C# 条形码 生成函数 (Code 128 标准

    C# 条形码 生成函数 (Code 128 标准参考:GB/T 18347-2001) 最近在做单据打印,发现客户要求用到条形码,在网上找了,发现只有一些条形码的标准,但打出来发现根本不能扫,还要加某 ...

  4. centos 卸载自带的 java

    一般情况下,我们都要将linux自带的OPENJDK卸载掉,然后安装SUN的JDK 首先:查看Linux自带的JDK是否已安装     <1># java -version        ...

  5. Genymotion与本地电脑共享文件夹的方法

    首先打开vbox的界面,左侧列表应该可以看到Genymotion添加的虚拟机,如图:对要设置的虚拟机单击右键,在弹出的菜单中点击“设置...”,弹出设置页面后点击左侧最后一个标签“共享文件夹”,点击右 ...

  6. Flash Builder 创建CSS

    1.global 选择器将样式应用于所有控件 Ÿ 在 Flash Builder 中创建新MXML 文件并切换到设计模式 Ÿ 属性视图右侧的外观视图可更改外观 Flash Builder 自动创建CS ...

  7. SAP增强总结-第二代增强（SMOD、CMOD）【转载】

    第二代增强比第二代增强安全性提高了很多,第一代增强毕竟是在原标准程序中修改,大部分传递参数都可以直接使用,第二代增强做了一些封装,对用户可以修改的参数做了限制. 1.增强点查找方法 首先根据事物码找到 ...

  8. shell修改文件名(二)

    我想修改类似如下一批文件的文件名:AA01_01.txtAA01_02.txtAA01_03.txtAA01_04.txt 修改成BB02_01.txtBB02_02.txtBB02_03.txtBB ...

  9. C 队列顺序存储

    #ifndef __MY_SEQLIST_H__ #define __MY_SEQLIST_H__ typedef void SeqList; typedef void SeqListNode; // ...

  10. Centos内核升级的三种方法

    本文出自 “存储之厨” 博客,请务必保留此出处http://xiamachao.blog.51cto.com/10580956/1755354 在基于CentOS平台的工作过程中,难免有时需要升级或者 ...