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

页面布局分为4种：

一栏布局

两栏布局

三栏布局

混合布局

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

清除浮动

方法一:

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

方法二：

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

混合布局代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>混合布局编程挑战</title>
  7.     <style type="text/css">
  8.     body {
  9.         margin: 0;
  10.         padding: 0;
  11.         font-size: 30px;
  12.         color: #fff
  13.     }
  14.  
  15.     .top {
  16.         height: 200px;
  17.         background-color: #ccc;
  18.     }
  19.  
  20.     .main {
  21.         height: 500px;
  22.         background-color: red;
  23.     }
  24.  
  25.     .left {
  26.         width: 200px;
  27.         height: 500px;
  28.         float: left;
  29.         background-color: #0000FE;
  30.     }
  31.  
  32.     .right {
  33.         width: 300px;
  34.         height: 500px;
  35.         float: right;
  36.         background-color: #350C0C;
  37.     }
  38.  
  39.     .foot {
  40.         height: 100px;
  41.         background-color: #E59018;
  42.     }
  43.     </style>
  44. </head>
  45.  
  46. <body>
  47.     <div class="top">top</div>
  48.     <div class="main">
  49.         <div class="right">right</div>
  50.         <div class="left">left</div>
  51.     </div>
  52.     <div class="foot">foot</div>
  53. </body>
  54.  
  55. </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. FastCgi与Cgi

      转载请注明出处:http://www.cnblogs.com/stonehat/p/6286966.html  他们之间的不同在于   FastCgi的进程是常驻的,监听一个socket, 无线循 ...

  2. EHCache分布式缓存集群环境配置

    EHCache分布式缓存集群环境配置 ehcache提供三种网络连接策略来实现集群,rmi,jgroup还有jms.同时ehcache可以可以实现多播的方式实现集群,也可以手动指定集群主机序列实现集群 ...

  3. 四、Hbase

    一.什么情况下使用Hbase 例子: 这里Order By无时不刻的处理,我们要看到刚才的足迹,不能使用缓存技巧. 根据时间戳来查询,显然很快,应为Hbase就是以时间戳来存的. 将最近的数据放在内存 ...

  4. js Date 日期格式化（转）

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  5. mysql----ERROR 1040 (HY000): Too many connections

    http://gwokae.mewggle.com/wordpress/index.php/archives/683 查看最大链接 mysql -h alg-db14 -u bfdroot -pqia ...

  6. Vue.js实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })

  7. js中，怎么解决cookie里面中文乱码问题

    呵呵,我查了百度和谷歌,都没找到解决方案,但是,最终直接结合两个函数就可以了,哈哈哈,开心ing function getCookie(name) { var prefix = name + &quo ...

  8. 【转】Linux 上的最佳 C/C++ IDE

    IDE介绍收藏篇: 个人linux下开发经验不多,一般也都使用shell远程连接使用命令行模式开发.如果自己在自己机器上开发还是有IDE要方便很多,看到这篇帖子就果断的转过来先收藏下,之前自己使用过E ...

  9. UVa 900 - Brick Wall Patterns

    题目大意:用1*2的砖头建n*2的墙,问有多少种不同的砖头排列方式?与斐波那契序列相似. #include <cstdio> #define MAXN 60 #define N 50 un ...

  10. 【腾讯Bugly干货分享】iOS 中 HTTPS 证书验证浅析

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/-fLLTtip509K6pNOTkflPQ 导语 本 ...