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

基础代码:

 <!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. 曾经的pc端项目踩到的一些兼容性的坑及其解决方案

    曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...

  2. 求前几日的平均值用obj.reduce()方法

    const average = data=>data.map((item, idx, origin)=>Math.round(origin.slice(0,idx+1).reduce((a ...

  3. CentOS6 配置

    1.CentOS6 Minimal 安装的情况下,默认网卡不启动,并且默认设置了依赖 NetworkManager 的选项.又因为 Minimal 安装并不会安装系统默认提供的网络管理工具  Netw ...

  4. Oracle- 存储过程和异常捕捉

    这段时间晚上有时候去打打球,回家看看电视剧,日子一天天过…….学了点ORACLE存储过程基础,作一下备注,以便日后需查阅. 创建无参存储过程 create procedure p_myPro1 is ...

  5. delete table 和 truncate table

    delete table 和 truncate table 使用delete语句删除数据的一般语法格式: delete [from] {table_name.view_name} [where< ...

  6. CAS Tomcat实现单点登录

    转贴: http://www.cnblogs.com/ja-net/archive/2012/07/25/2608536.html 最近这两天在搞单点登录,第一次使用老出状况.以下是配置过程: 1.安 ...

  7. 【23】宁以non-member、non-friend替换member函数

    1.non-member方法与member方法没有本质区别,对于编译器来说,都是non-member方法,因为member方法绑定的对象,会被编译器转化为non-member方法的第一个形参.non- ...

  8. android学习日记16--GridView(网格视图)

    一.GridView 1.简述 GridView按照行列来显示图片或文本的一种视图,排列其实有点类似TableLayout布局, 不过和TableLayout还是差别很大的,倒比较像二维的ListVi ...

  9. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  10. 优麒麟（UbuntuKylin）不是国产Linux操作系统

    2014年5月10日,CCTV新闻频道"新闻直播间"栏目播报了"谁来替代Windows XP,工信部希望用户使用国产操作系统"报道.同一时候,央视也报道了眼下包 ...