创建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 如何把一个 RelativeLayout或ImageView背景设为透明

    在项目中,需要把RelativeLayout 和  ImageView背景设置为透明,怎么实现呢?这里主要通过代码,请参阅以下关键代码: public ImageView imgDetail; pri ...

  2. BI名词解释

    BI名词解释     浏览数Page Views: 网页(含文件及动态网页)被访客浏览的次数.Page View的计算范围包括了所有格式的网页,例如:.htm..html..asp..cfm. asa ...

  3. Hadoop RPC源码阅读-客户端

    Hadoop版本Hadoop2.6 RPC主要分为3个部分:(1)交互协议(2)客户端(3)服务端 (2)客户端 先展示RPC客户端实例代码 public class LoginController ...

  4. 新Azure 服务仪表盘!

    通过仪表盘, 我们可以查看当前状态和历史记录: http://www.windowsazure.cn/support/service-dashboard/

  5. FusionCharts 3.2.1 flash 图表展示、数据钻取

    StackedColumn3DLineDY.swf 效果展示: 一.页面代码 <div id="chart2div" align="center" sty ...

  6. 【转】BCSphere入门教程01：Immediate Alert--不错

    原文网址:http://www.ituring.com.cn/article/117570 写在前面 智能硬件开发的起点是智能硬件,在本教程中的每一章节,首先会列出您的蓝牙智能硬件所需要支持的Serv ...

  7. Gilde加载网络图片(一)

    前两天 一个朋友要在本地加载几M的大图 用于用户滚动查看.按照思路 是压缩后加载显示但是这样会不清晰, 其实gilde用来加载图片 很牛掰 于是了解一下 下面贴上两个工具类: package com. ...

  8. 如何扩展大规模Web网站的性能？

    Reduce Data广告服务网站如何扩展到每天300K QPS请求?分享经验如下: 1. 为大规模设计,广告服务平台从一开始增长就很惊人,因此,系统开始就为大规模设计,系统为水平和垂直伸缩扩展. 2 ...

  9. Linux Mono OpenShift Cloud9 rhc

    OpenShift Mono Asp.net MVC4 MySql 1..Net4.0+Mvc4,不要使用太新的.Net4.5.1+Mvc5. 2.MySql数据库:MySql.Data.Dll 从官 ...

  10. 深入理解 Spring 事务原理

    本文由码农网 – 吴极心原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 一.事务的基本原理 Spring事务的本质其实就是数据库对事务的支持,没有数据库的事务支持,spring是无法提供 ...