---恢复内容开始---

这个东西说难也不难，但也要详细思虑一番：

<!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=gb2312" />

<title>制作首页布局ok啦。我好开心，着是自己做的第一个布局。我也是很棒的啊。谢谢！！</title>

<style type="text/css">

#container{

width:1200px;

height:1200px;

background:gray;

}

#hearder{width:1200px;

height:400px;

background:blue;

}

#main{width:1200px;

height:500px;

background:yellow;

}

#footer{width:1200px;

height:300px;

background:pink;

}

#lside{width: 900px;height:500px;background:green;

float:left;

}

#rside{width:200px;height:500px;float:right;background:red;}

.four1,.four2,.four3,.four4{width:400px;height:200px;

background:black;float:left;margin:20px 10px;

}

.four3{width:400px;height:200px;

background:black;float:left;clear:left;margin:20px 10px;

}

.four5{width:300px;height:200px;background:red;float:right;margin:0px;}

</style>

</head>

<body>

<div id="container">

<div id="hearder"></div>

<div id="main">

 <div id="lside">

<div class="four1" ></div>

<div class="four2"></div>

<div class="four3"></div>

<div class="four4"></div>

</div>

<div  id="rside"></div>

 </div>

<div id="footer"></div>

</div>

</body>

</html>

---恢复内容结束---

div+css的第一个布局的更多相关文章

  1. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  2. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  3. div+css对网页进行布局

    div+css对网页进行布局 首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分 拿到网站页面图后,首先将分析页面分为哪几块,然后 ...

  4. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  5. div+CSS实现页面的布局要点记录

    1.页面任何控件可以通过div包装为一个模块,然后通过margin(外补丁)和padding(内补丁)对控件位置的摆放进行控制,以实现想要的效果. 2.position:absolute;对控件实现绝 ...

  6. div+css实现双飞翼布局

    本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!D ...

  7. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  8. (一)初识div+css

    关于div+css,一直以来都是听其名,而不知其为何.今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!! div全称division ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. SVN has atopping svn已停止工作 or windows资源管理器无限重启

    准备在空间时间用用linux,就在自己的win7系统上安装了属性系统,用easyBCD安装的,谁知安装好之后win7系统下的svn客户端不能使用了,点击报错“SVN已停止工作”,随后怀疑是linux引 ...

  2. jquery mobile 登陆后页面验证

    调用 pagebeforechange方法 $(document).bind("pagebeforechange", function (e, data) { if (typeof ...

  3. jQuery MiniUI开发系列之：安装部署

    jQuery MiniUI是一套纯Javascript的WebUI控件库,它由几十个Javascript控件组成,是不依赖服务端和数据库的. 下载jQuery MiniUI,解压缩后,开发者可以直接在 ...

  4. 使用delphi+intraweb进行微信开发4—微信消息加解密

    示例代码已经放出!请移步使用delphi+intraweb进行微信开发1~4代码示例进行下载,虽为示例代码但是是从我项目中移出来的,封装很完备适于自行扩展和修改. 在上一讲当中我做了个简单的微信文本消 ...

  5. win10 下runtime error 解决办法

    下载http://120.52.73.50/download.microsoft.com/download/5/2/1/5212066c-5f48-4b16-a059-ed84b505a65d/vcr ...

  6. Use filter in outlook2013

    1. 条件与条件间用分号隔开 2. search带附件的邮件:hasattachments:yes

  7. C# 6.0 特性

    C#6.0主要提供了一些语法糖,另外还提供了新的编译器Roslyn地址https://github.com/dotnet/roslyn 一下列举几个新增的语法糖: 1.构造一个类: public cl ...

  8. pthread 学习

    1. 创建线程 int pthread_create (pthread_t* thread, pthread_attr_t* attr, void* (*start_routine)(void*), ...

  9. 对于旅游业的手机app的分析

    对旅游行业的手机app的测试及分析 随着收入水平的提高,旅游已成为人们的惯常需求.或是为了增长见闻,感悟人生:又或者是愉悦感情,消闷解愁:还有的是为了体验生活,追求情调,同时锻炼身体.当然,旅游的目的 ...

  10. Hibernate配置文档详解

    Hibernate配置文档有框架总部署文档hibernate.cfg.xml 和映射类的配置文档 ***.hbm.xml hibernate.cfg.xml(文件位置直接放在src源文件夹即可) (在 ...