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

基础代码:

 <!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. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  2. PowerDesigner实用技巧小结(3)

    PowerDesigner实用技巧小结(3) PowerDesigner 技巧小结 sqlserver数据库databasevbscriptsqldomain 1.PowerDesigner 使用 M ...

  3. Codeforces Round #321 (Div. 2) C. Kefa and Park dfs

    C. Kefa and Park Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/probl ...

  4. ubuntu下设置开机自启动项

    可用一些小工具来管理 Ubuntu 的启动选项: 小工具 rcconf: #sudo apt-get rcconf #sudo apt-get install rcconf root 下运行: #su ...

  5. tcp_tw_recycle和tcp_timestamps的文章汇总

        临近年关,人会变得浮躁,期间写的代码可谓乱七八糟.不过出来混始终是要还的,这不最近就发现一个PHP脚本时常连不上服务器. 遇到这类问题,我习惯于先用strace命令跟踪了一下看看: shell ...

  6. mysqldump原理5

    http://blog.csdn.net/niu870781892/article/details/6186078 导出多张表的时候表之间用空格分开: # mysqldump -h192.168.25 ...

  7. (收藏)sokcet编程

    C# Socket网络编程精华篇 C#编写高性能网络服务器(源码) .net自动更新组件Ant 客户端服务器通信demo(附源码) 有了WCF,Socket是否已人老珠黄? Socket服务器整体架构 ...

  8. JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本

    一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...

  9. Android市场官方的统计信息

    做Android应用和游戏,避免不了的要了解市面上的各种android设备的信息,以最大程度的兼容更多的设备. Android市场会定期发布统计信息,包括SDK版本,屏幕大小和分辨率,OpenGL E ...

  10. [转帖]2010.10.7google北大笔试题回忆

    1.1关于IP协议那个正确 A IP是TCP上层协议B IP协议是应用层协议C由于两个属于同一层协议,他们之间可以直接通信DIP协议不提供可靠的通信 1.2 关于内存正确的是 A内存的存取速度不能低于 ...