创建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. 通过硬件层提高Android动画的性能

    曾有许多人问我为什么在他们开发的应用中,动画的性能表现都很差.对于这类问题,我往往会问他们:你们有尝试过在硬件层解决动画的性能问题么? 我们都知道,在播放动画的过程中View在每一帧动画的显示时重绘自 ...

  2. logstahs 匹配isslog

    2016-11-30 06:33:33 192.168.5.116 GET /Hotel/HotelDisplay/cncqcqb230 - 80 - 192.168.9.2 Mozilla/5.0+ ...

  3. USACO3.43Electric Fence(pick定理）

    忘记pick定理是什么了 想枚举来着 ..没枚出来 有篇pick定理的证明 貌似挺好 也没太看懂 /* ID: shangca2 LANG: C++ TASK: fence9 */ #include ...

  4. HDOJ --- 2151 Worm

    Worm Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. [转]NHibernate之旅(2)：第一个NHibernate程序

    本节内容 开始使用NHibernate 1.获取NHibernate 2.建立数据库表 3.创建C#类库项目 4.设计Domain 4-1.设计持久化类 4-2.编写映射文件 5.数据访问层 5-1. ...

  6. Ora-12154:无法解析连接字符串

    服务器的环境为: 系统:Windows server 2008 64位 数据库:Oracle 10g WEB应用服务:IIS 7.0+.Net Framework 4.0 解决方法 Toad for ...

  7. LoadRunner中的参数与变量

    在LoadRunner脚本开发中,经常会遇到参数与变量相互转换的情况,本文对常见的转换情形进行了方法总结. 1.变量的赋值 //将字符串赋值给变量 ]; strcpy(strTemp, "H ...

  8. Android性能测试

    FPS和流畅度 FPS 1.dumpsys SurfaceFlinger –latency shell 脚本通过 dumpsys SurfaceFlinger --latency 数据计算 FPS 和 ...

  9. Java---XML的解析(1)-DOM解析

    本章只讲DOM解析.接下来还会学习Dom4j和StAX 解析技术 DOM解析: DOM解析一次将所有的元素全部加载到内存中:如有以下XML文档: <user> <name>Ja ...

  10. （转）Python：self

    原文:http://www.douban.com/group/topic/19376685/ 这是对前面一个php程序员问python方法为什么要手写一个self的回答,当时那个帖非常的热闹,但是下面 ...