页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等

页面布局分为4种：

一栏布局

两栏布局

三栏布局

混合布局

灵活利用float、position对页面进行布局

清除浮动

方法一:

针对受到浮动影响的元素操作   clear：both；

方法二：

针对受到浮动影响的元素操作    width：100%；overflow:hidden;

混合布局代码

<!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>混合布局编程挑战</title>

    <style type="text/css">

    body {

        margin: 0;

        padding: 0;

        font-size: 30px;

        color: #fff

    }

    .top {

        height: 200px;

        background-color: #ccc;

    }

    .main {

        height: 500px;

        background-color: red;

    }

    .left {

        width: 200px;

        height: 500px;

        float: left;

        background-color: #0000FE;

    }

    .right {

        width: 300px;

        height: 500px;

        float: right;

        background-color: #350C0C;

    }

    .foot {

        height: 100px;

        background-color: #E59018;

    }

    </style>

</head>

<body>

    <div class="top">top</div>

    <div class="main">

        <div class="right">right</div>

        <div class="left">left</div>

    </div>

    <div class="foot">foot</div>

</body>

</html>

如何用CSS进行网页布局---学习总结的更多相关文章

  1. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  2. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  3. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  4. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  5. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  6. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  7. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  8. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...

  9. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

随机推荐

  1. Unity3d ShaderLab之WorldNormalVector

    首先来看看Unity 3d官方文档上对WorldNormalVector的解释: float3 worldNormal; INTERNAL_DATA - will contain world norm ...

  2. WAV音频格式分析

    wav是windows下无损的声音文件,该文件保存了音频的PCM信息和播放器播放该音乐的时候的大多数信息,他有两个块组成,第一个块是格式块,第二个块是数据块 先说格式块,格式块用一张图可以解释,如下 ...

  3. 《Android学习指南》目录

    源:<Android学习指南>目录 Android学习指南的内容分类: 分类 描述 0.学习Android必备的Java基础知识 没有Java基础的朋友,请不要先看Android的课程,这 ...

  4. OSD（On Screen Display ）技术（转）

    源:OSD(On Screen Display )技术 OSD 是 On Screen Display 的缩写,是应用在 CRT/LCD 显示器上,在显示器的荧幕中产生一些特殊的 字形或图形,让使用者 ...

  5. iOS开发 missing iOS distribution signing identity for 。。。

    苹果真是不让人省心,新年一来上传APP,就出现Missing iOS Distribution signing indetity for xxx 于是就把证书删了做,做了删了再重做,还是不行 百度了一 ...

  6. IOS开发之IOS8.0最新UIAlertController 分类： ios技术 2015-01-20 14:24 144人阅读 评论(1) 收藏

    最近苹果更新的IOS8 对以前进行了很大的修改, 更新的API也让人捉急,据说iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.比如全新的UIPrese ...

  7. c++中vector使用

    不多说,先看代码: #include <IOSTREAM> #include <VECTOR> using namespace std; int main() { cout&l ...

  8. cocos2dx3.5 HTC One X 某些UI白屏或使用ClippingNode造成部分手机白屏

    public Cocos2dxGLSurfaceView onCreateView() { Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSu ...

  9. paper资料

    1.Ycbcr  RGB空间转换 :http://www.cnblogs.com/Imageshop/archive/2013/02/14/2911309.html 2.抠图:http://www.c ...

  10. Elasticsearch基础教程

    Reference: http://blog.csdn.net/cnweike/article/details/33736429 基础概念 Elasticsearch有几个核心概念.从一开始理解这些概 ...