创建CSS文件如下：

 @charset "utf-8";

 /* CSS Document */

 *{

     margin:0px;

     padding:0px;

     border:0px;

 }

 #box{

     width:1100px;

     height:760px;

     margin:auto;

 }

 #hen

 {

     width:1100px;

     height:160px;

     background-color:#936;

 }

 #zuo{

     width:250px;

     height:500px;

     margin-top:10px;

     background-color:#03C;

     float:left;

     margin-bottom:10px;

 }

 #zhong-1{

     width:262px;

     height:300px;

     margin-top:10px;

     margin-left:10px;

     float:left;

     background-color:#000;

 }

 #zhong-2{

     width:262px;

     height:300px;

     margin-top:10px;

     margin-left:10px;

     float:left;

     background-color:#000;

 }

 #xia{

     width:544px;

     height:190px;

     background-color:#03C;

     margin-top:10px;

     float:left;

     margin-bottom:10px;

 }

 #you{

     width:295px;

     height:500px;

     margin-left:10px;

     margin-top:10px;

     background-color:#3F6;

     float:right;

     margin-bottom:10px;

 }

 #dibu

 {

     width:1100px;

     height:50px;

     margin-top:10px;

     background-color:#CF3;

     clear:both;

 }

html文件如下：

<!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>CSS排版页面</title>

<link href="css/63301.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="box">

    <div id="hen"></div>

    <div id="zuo"></div>

    <div id="zhong-1"></div>

    <div id="zhong-2"></div>

    <div id="you"></div>

    <div id="xia"></div>

    <div id="dibu"></div>

</div>

</body>

</html>

　　最终实现效果如图:

CSS排版页面的更多相关文章

  1. Appcan开发之页面布局与CSS排版(转)

    在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通 ...

  2. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  3. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  4. 使用Div + CSS布局页面

    在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. ...

  5. DIV+css排版问题技巧总结---v客学院技术分享

                DIV+css排版问题技巧总结 一．排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

  6. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  7. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  8. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  9. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

随机推荐

  1. JavaScript用JQuery呼叫Server端方法

    准备好Server端的方法 [System.Web.Services.WebMethod] public static string VeryUserName(string name) { strin ...

  2. LinkedIn高级分析师王益：大数据时代的理想主义和现实主义（图灵访谈）

    转自:http://www.ituring.com.cn/article/75445 王益,LinkedIn高级分析师.他曾在腾讯担任广告算法和策略的技术总监,在此期间他发明了并行机器学习系统“孔雀” ...

  3. JavaScript修改表中的内容

    例子: <?php ?> <html> <head> <meta http-equiv="Content-Type" content=&q ...

  4. 在Raspberry配置优化安装LNMP环境总结

    在Raspberry配置优化安装LNMP环境总结 apt-get update apt-get install nginx apt-get install php5-fpm php5-cli php5 ...

  5. wand(weak and)算法基本思路

    一般搜索的query比较短,但如果query比较长,如是一段文本,需要搜索相似的文本,这时候一般就需要wand算法,该算法在广告系统中有比较成熟的应该,主要是adsense场景,需要搜索一个页面内容的 ...

  6. 使用NppExec插件让Notepad++编译运行Java、Python

    一直希望有一个轻量级的编辑器,既可以编辑代码,也可以一键运行.后来有了NotePad++,希望可以配置配置达到目的,配Java的时候上网搜了一堆,基本上互相抄,不解决实际问题,很郁闷.后来琢磨了出来, ...

  7. 《神经网络和深度学习》系列文章三：sigmoid神经元

    出处: Michael Nielsen的<Neural Network and Deep Leraning>,点击末尾“阅读原文”即可查看英文原文. 本节译者:哈工大SCIR硕士生 徐伟 ...

  8. xom报错 Exception in thread "main" java.net.UnknownHostException: file

    Exception in thread "main" java.net.UnknownHostException: file at java.net.AbstractPlainSo ...

  9. BFS+状态压缩 hdu-1885-Key Task

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1885 题目意思: 给一个矩阵,给一个起点多个终点,有些点有墙不能通过,有些点的位置有门,需要拿到相应 ...

  10. 关于wordpress在修改固定链接后，总显示Not Found的问题

    参考来源: http://chinablog.blog.51cto.com/276793/280278 一.问题背景 使用wordpress搭建网站,为了让文章URL看起来漂亮一点,wordpress ...