创建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. PEP Index > PEP 339 -- Design of the CPython Compiler 译文

    http://www.python.org/dev/peps/pep-0339/ PEP: 339 标题: CPython的编译器设计 版本: 425fc5598ee8 最后修改: 2011-01-1 ...

  2. ListView 的position和id的区别

    我们在使用ListView的时候,一般都会为ListView添加一个响应事件android.widget.AdapterView.OnItemClickListener.本文主要在于对OnItemCl ...

  3. C++11内存模型的一些补充阅读材料

    <Intel Threading Building Block> O'REILLY Chapter 7 Mutual Exclusion - Atomic Operation - Memo ...

  4. Docker在云环境中的应用实践初探：优势、局限性与效能评测

    作者 商之狄 发布于 2014年11月10日 本文依据笔者所在团队的一些近期开发和应用的实践,整理出一些有意义的信息,拿出来和社区分享.其中既包括在云端应用Docker与相关技术的讨论,同时也有实施过 ...

  5. HDU-2368 Alfredo's Pizza Restaurant

    http://acm.hdu.edu.cn/status.php Alfredo's Pizza Restaurant Time Limit: 1000/1000 MS (Java/Others)   ...

  6. python 实现对象模型

    # -*- coding:utf-8 -*- """ python 实现对象模型 创建 bmicalcpage 类 """ class bm ...

  7. The Same Game": A Simple Game from Start to Finish3

    视图: 画出你的游戏界面 前面,我们的文档对象中已经初始化了游戏板对象,接下来我们需要显示这些信息给用户了. 第一步是添加代码,来重新设置我们的窗口尺寸.缺省的窗口尺寸不是我们想要的,我们将重写OnI ...

  8. glsl-UBO

    UBO 是什么?为何要用UBO? 1.数据共享设计 采用Block的原因是: 如果你的程序中包含了多个着色器,而且这些着色器使用了相同的Uniform变量,你就不得不为每个着色器分别管理这些变量.Un ...

  9. 日常使用 Git 的 19 个建议

    如果你对git一无所知,那么我建议先去读一下Git 常用命令速查.本篇文章主要适合有一定 git 使用基础的人群. 目录: 日志输出参数 查看文件的详细变更 查看文件中指定位置的变更 查看尚未合并(m ...

  10. 中文乱码问题（使用Servlet3.0新特性实现文件上传——上传文件名中文乱码问题）

    问题描述:就是文件传送过来的文件名等是乱码 解决方法:将传送的JSP页面(即含有表单的页面)的页面编码方式改为: <%@ page contentType="text/html; ch ...