1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="decsription" content="一列布局变混合布局" />

  6. <title>一列布局混合布局</title>

  7. <style type="text/css">

  8. body {

  9. margin: 0;

  10. padding: 0; /*清楚默认样式*/

  11. }

  13. .top {

  14. height: 100px;

  15. background: blue;

  16. }

  17. .nav{height:100px;width:1000px;background:#f60;margin:0 auto;}

  18. .main {

  19. width: 800px;

  20. height: 600px;

  21. background: #ccc;

  22. margin: 0 auto;

  23. }

  24. .left{width:200px;height:600px;background:yellow;float:left;}

  25. .right{width:600px;height:600px;background:#369;float:right;}

  26. .sub_l{width:400px;height:600px;background:#218;float:left;}

  27. .sub_r{width:200px;height:600px;background:green;float:right;}

  28. .sub_r_up{width:200px;height:200px;background:#765;}

  29. .sub_r_down{width:200px;height:300px;background:red;}

  30. .bottom {

  31. width: 800px;

  32. height: 100px;

  33. background: #b0b;

  34. margin: 0 auto;

  35. }

  36. </style>

  37. </head>

  38. <body>

  39. <div class="top">

  40. <div class="nav"></div>

  41. </div>

  42. <div class="main">

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

  44. <div class="right">

  45. <div class="sub_l"></div>

  46. <div class="sub_r">

  47. <div class="sub_r_up"></div>

  48. <div class="sub_r_down"></div>

  49. </div>

  50. </div>

  51. </div>

  52. <div class="bottom"></div>

  53. </body>

  54. </html>

Html 网页布局（一）的更多相关文章

  1. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  2. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. MasonJS – 创建完美的砌体结构网页布局

    MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距.当使用 Masonry,Isotope 或任何其他网格插件时,布局中会出现空白或边缘参差不齐的情况.MasonJS 可以帮助你填补 ...

  5. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

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

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

  7. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

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

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

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

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

  10. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

随机推荐

  1. struts2：异常处理

    Struts2框架提供了自己的异常处理机制,只需要在struts.xml文件中配置异常处理即可,而不需要在Action方法中来捕捉异常. 传统方法 public String execute() th ...

  2. 解决tomcat启动Socket监听端口死循环被hold问题

    原文链接:http://blog.csdn.net/dead_cicle/article/details/7073433 1.SOCKET监听置于servlet的init方法中,在web.xml里加入 ...

  3. 读书笔记_Effective_C++_条款四十八：了解模板元编程

    作为模板部分的结束节,本条款谈到了模板元编程,元编程本质上就是将运行期的代价转移到编译期,它利用template编译生成C++源码,举下面阶乘例子: template <int N> st ...

  4. c/c++:动态库 静态库 linux/windows 例子 （转）

    作者:吴秦出处:http://www.cnblogs.com/skynet/本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名吴秦(包含链接). C++静 ...

  5. Android使用SurfaceView实现墨迹天气的风车效果

    SurfaceView也是继承自View,它和我们以前接触到的View(Button.TextView等)最大的不同是,SurfaceView可以有一个单独的线程进行绘制,这个线程区别于UI线程(主线 ...

  6. SNF开发平台WinForm之四-开发-主细表管理页面-SNF快速开发平台3.3-Spring.Net.Framework

    4.1运行效果: 4.2开发实现: 4.2.1          有了第一个程序的开发,代码生成器的配置应该是没有问题了,我们只要在对应的数据库中创建我们需要的表结构就可以了,如下: 主表结构如下: ...

  7. Win10系统下编译GDAL1.9.2版本

    环境说明: 1.Win10企业版.64位: 2.VS2012旗舰版: 3.GDAL1.9.2 GADL编译 1.解压GDAL压缩包至F:\GDAL\gdal-1.9.2: 2.设置GDAL编译后安装目 ...

  8. Transactional replication 的Snapshot 文件在什么情况下会被清除

    Snapshot agent负责收集publication database的信息,将article的内容存储在snapshot文件中.而distribuiton cleanup job(后文简称清除 ...

  9. 二叉平衡查找树AvlTree（C实现）

    二叉平衡查找树即是一棵树中所有节点的左右子树高度差不超过1的查找树 头文件—————————————————————————————— #ifndef _AVLTREE_H_ #define _AVL ...

  10. 编写高质量JS代码的68个有效方法（五）

    No.21.使用apply方法通过不同数量的参数调用函数 Tips: 使用apply方法自定一个可计算的参数数组来调用可变参数的函数 使用apply方法的第一个参数给可变参数的方法提供一个接收者 // ...