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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title> </title>
  6. <style type="text/css">
  7. #head{
  8. height:40px;
  9. background-color:#0033CC;
  10. margin:0;
  11. }
  12. #content{
  13. background:#CCCCCC;
  14. height:200px;
  15. margin:0;
  16. }
  17. #left{
  18. width:20%;
  19. height:200px;
  20. background:#CCCC66;
  21. float:left;
  22. margin:0;
  23. }
  24. #c{
  25. width:60%;
  26. height:200px;
  27. background:red;
  28. margin:0;
  29. float:left;
  30. }
  31. #right{
  32. width:20%;
  33. height:200px;
  34. background:#339966;
  35. float:right;
  36. margin:0;
  37. }
  38. #foot{
  39. background:#0099CC;
  40. height:40px;
  41. margin:0;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id="head">head</div>
  47. <div id="content">
  48.   <div id="left">left</div>
  49.   <div id="c">content</div>
  50.   <div id="right">rigth</div>
  51. </div>
  52. <div id="foot">foot</div>
  53. </body>
  54. </html>

　　

上下左右布局（DIV+CSS）的更多相关文章

  1. div+css布局教程系列1

    <!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...

  2. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

  3. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  7. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

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

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

  9. 使用Div+CSS布局设计网站的优点

    网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div ...

  10. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【BZOJ】【2002】【HNOI2010】弹飞绵羊

    呃这题的Hint写着splay启发式合并……但是蒟蒻不懂T_T只好写个简单的LCT来蒙混过关,就是时间效率上差劲的很…… 不过能够一次AC心情也是蛮愉悦的~ /******************** ...

  2. 剑指offer--面试题21--相关

    题目:设计包含min函数的栈,pop(),push(),min()的时间复杂度均为O(1) 自己所写代码如下:(写‘栈’的代码还是有些不熟练!) #include <iostream> u ...

  3. Redis Master/Slave 实践

    本次我们将模拟 Master(1) + Slave(4) 的场景,并通过ASP.NET WEB API进行数据的提交及查询,监控 Redis Master/Slave 数据分发情况,只大致概述,不会按 ...

  4. Topcoder 多校T-shirt场

    盗用名字:C题题目都没看懂, B:You are given a long long n. Return the largest divisor of n that is a perfect squa ...

  5. Sqli-labs less 26

    Less-26 TIPS:本关可能有的朋友在windows下无法使用一些特殊的字符代替空格,此处是因为apache的解析的问题,这里请更换到linux平台下. 本关结合25关,将空格,or,and,/ ...

  6. ECMAScript 5.1中对属性的操作

    此操作只针对新版本浏览器. Object.defineProperty(obj,'name',{configurable:true/false,enumberable:true/false,value ...

  7. Subclasses

    Given a collection of numbers, return all possible subclasses. public class Solution { public List&l ...

  8. jdom处理的XML Document 和String 之间的相互转化

    package util; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileWriter; ...

  9. KMP高质量代码实现详解

    KMP算法 对于KMP算法我分为两个部分说明,第一部分是算法部分,介绍KMP算法的算法思想:第二部分是实现部分,介绍一种厉害的实现代码以及代码注释.当然了由于本文主要介绍怎么实现故而先分析实现,对KM ...

  10. ExtJs之Ext.query

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...