创建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. [Mac]使用xcode命令行编译protobuf

    因为不想每次测试与画面显示无关的小功能时把cocos2dx包含进去,所以改用xcode的command line tool直接建立c++项目. 方法: 1.点击file-new-project,选择o ...

  2. POJ_3280_Cheapest_Palindrome_(动态规划)

    描述 http://poj.org/problem?id=3280 n 种小写字母构成长度为 m 的串,现在要通过增删字母使串回文,给出每种字母增和删的费用,求最小花费. Cheapest Palin ...

  3. JAVA用geotools读写shape格式文件

    转自:http://toplchx.iteye.com/blog/1335007 JAVA用geotools读写shape格式文件 (对应geotools版本:2.7.2) (后面添加对应geotoo ...

  4. HTML快速入门5——不规则表格、表格背景、边框颜色

    转自:http://blog.csdn.net/ysuncn/article/details/2214153 不规则表格 例子: <table border=1><tr>< ...

  5. [洛谷U990]传递游戏（90分）

    [题目描述 Description] n个人在做传递物品的游戏,编号为1-n. 游戏规则是这样的:开始时物品可以在任意一人手上,他可把物品传递给其他人中的任意一位:下一个人可以传递给未接过物品的任意一 ...

  6. GNU风格 汇编语法总结（转）

    转载自:http://blog.sina.com.cn/s/blog_78d30f6b0101713r.html 汇编源程序一般用于系统最基本的初始化:初始化堆栈指针.设置页表.操作 ARM的协处理器 ...

  7. 【转】如何实现一个malloc

    任何一个用过或学过C的人对malloc都不会陌生.大家都知道malloc可以分配一段连续的内存空间,并且在不再使用时可以通过free释放掉.但是,许多程序员对malloc背后的事情并不熟悉,许多人甚至 ...

  8. 报错：Cannot insert explicit value for identity column in table 't' when identity_insert is set to OFF

    通常情况下,不能向 SQL Server 自增字段插入值,如果非要这么干的话,SQL Server 就会好不客气地给你个错误警告: Server: Msg 544, Level 16, State 1 ...

  9. Java工作队列和线程池

    背景    最近的需要做一个与设备通信的web项目.当然,我们需要写好与设备之间的通信协议(socket).大致的时序逻辑时:当用户用浏览器点击页面某一控件后,它就向后台发送一个post请求,后台解析 ...

  10. (5/18)重学Standford_iOS7开发_视图控制器生命周期_课程笔记

    第五课: 1.UITextView @property (nonatomic, readonly) NSTextStorage *textStorage;//注意为只读属性,因此不能直接更改内容,NS ...