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

基础代码:

 <!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. C# 产生随机密码

    using System.Web.Security var rawPassword = System.Web.Security.Membership.GeneratePassword(10,1) re ...

  2. Remastersys打包你自己的ubuntu成iso文件，保存原来的所有配置

    你是不是辛辛苦苦地配好了ubuntu结果不久又重装,然后又重新配置很久呢? 笔者好不容易配置好了torch,但是换硬盘,于是就想到了将ubuntu打包成iso文件,下次直接安装,然后配置好的东西都搬过 ...

  3. C#- Winform调用BAT例子

    前段时间在工作的时候需要用到,百度了好久后找,可是找到了又希望调用的时候窗体不要显示出来. proc.StartInfo.CreateNoWindow = true;       proc.Start ...

  4. ECSHOP在线手册之 数据库结构说明 (适用版本v2.7.3)

    1.account_log 用户账目日志表 字段 类型 Null/默认 注释 log_id mediumint(8) 否 / 自增 ID 号 user_id mediumint(8) 否 / 用户登录 ...

  5. cocos2d-x Menu、MenuItem

    转自:http://codingnow.cn/cocos2d-x/832.html 学习cocos2d-x中的菜单主要需要了解:菜单(CCMenu)和菜单项(CCMenuItem)以及CCMenuIt ...

  6. 今天写一些 有关iOS 多图片组合 成一张图片的问题。保持原像素不变

    1.要求:服务器给一张图片模板,要在模版上镂空,然后添加一些别的图片,然后组合成一张图,这个模版的像素 不是固定的,有可能比 当前手机屏幕大.所以,在组合截图的时候,有一定的要求. 贴代码: /** ...

  7. 远程重启IIS服务

    方法一: $UserName = "administrator" $serverpass = "pass" $server = "10.4.19.60 ...

  8. 理解class.forName()

    使用jdbc方式连接数据库时会使用一句代码Class.forName(String className).这句话是什么意思呢?首先说一点Class.forName(String className)这 ...

  9. iOS给背景添加点击事件

    当点击背景的时候出发事件,或者跳转界面或者产生其他的响应 -(void)viewDidLoad { UIImageView * imageView  = [UIImageView alloc]init ...

  10. HDU 4259 - Double Dealing（求循环节）

    首先将扑克牌进行一次置换,然后分解出所有的循环节,所有循环节的扑克牌个数的最小公倍数即为答案 #include <stdio.h> #include <string.h> #i ...