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

基础代码:

 <!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. pom.xml报错

    错误太多打开文件后就不会显示,点开前边的选项卡就会提示错误信息,一般是jar包没加载全.

  2. IsPostBack

    1.IsPostBack介绍Page.IsPostBack是一个标志:当前请求是否第一次打开. 调用方法为:Page.IsPostBack或者IsPostBack或者this.IsPostBack或者 ...

  3. 【Stage3D学习笔记续】真正的3D世界（六）：空间大战

    这就是书上的最终效果了,一个完整的空间大战游戏: 点击查看源码 这里并没有太多的新知识,所涉及的东西更多的是游戏开发方面的优化和技巧,下面我们大家一起来看看: 飞船: 类似粒子效果中的粒子创建方法,我 ...

  4. Sass 默认样式库

    Sass 默认初始化样式库 @charset "utf-8"; // 变量存储 // 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8 ...

  5. 最牛X的编码套路

    最近,我大量阅读了Steve Yegge的文章.其中有一篇叫"Practicing Programming"(练习编程),写成于2005年,读后令我惊讶不已: 与你所相信的恰恰相反 ...

  6. hdu 5459 Jesus Is Here 数学

    Jesus Is Here Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...

  7. LetterView实现载入全国各地城市

    近期更具eoe论坛上的letteView案例(   eoe)自己做了一个LetterView载入全国城市的案例,欢迎大家互相学习和交流, 相对于eoe那个案例稍微修改了一下,利用json存储全国城市数 ...

  8. android学习日记07--Canvas画布

    1.Canvas Canvas类主要实现了屏幕的绘制过程,其中包含了很多实用的方法,比如绘制一条路径.区域.贴图.画点.画线.渲染文本,当然Android官网提示大家很多方法有不同的重载版本,参数更灵 ...

  9. android学习日记06--SurfaceView视图

    一.API关SurfaceView的介绍 SurfaceView是视图(View)的继承类,这个视图里内嵌了一个专门用于绘制的Surface.你可以控制这个Surface的格式和尺寸.Surfacev ...

  10. C 队列顺序存储

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