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

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

<!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. 图标：适配不同分辨 的 hdpi、mdpi、ldpi 文件夹

    一:不同的layout Android手机屏幕大小不一,有480×320, 640×360, 800×480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的layo ...

  2. 【OpenCV】视频取坐标

    今天实现了视频播放以后暂停获取鼠标点击处坐标的功能. #include <iostream> #include <opencv2/highgui/highgui.hpp> #i ...

  3. NET映射导致的应用无法访问

    应用环境 IIS 数据库  oracle11G 服务器 windwos2003 企业版 周一早上刚到,听到业务部门的人反应,集团的扫码抢系统登陆不上了,没办法进行出入库操作,大批货物在仓库堆积,承运车 ...

  4. Ubuntu Java Envrioment

    Download Java SDK and Install 1. Download Java SDK from Oracle websit 2.unzip by command line tar -z ...

  5. Linq并行执行

    一.     并行LINQ 1.  并行查询 .NET4在System.Linq名称空间中包含一个新类ParalleIEnumerable ,可以分解查询的工作使其分布在多个线程上.尽管Enmerab ...

  6. 如何定位Sharepoint网站集所在的w3wp进程

     方法1.    直接开始运行,输入cmd,再输入iisapp可以列出当前所有IIS中的WebApplication所对应的w3wp.exe进程,后面都有一个进程号标识,在VS中调试的时候附加到对应进 ...

  7. pod install后无反应

    参考这篇文章 http://akinliu.github.io/2014/05/03/cocoapods-specs-/

  8. PSP个人项目耗时记录

    估计这个任务需要多少时间: 计划 估计用时 估计这个任务需要多少时间 500min 开发 450min 需求分析 120min 生成设计文档 20min 设计复审 30miin 代码规范 10min ...

  9. Linux 集群

    html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...

  10. 关于移动端常用的盒模型与flex布局

    在移动端选择布局的方式中常用盒模型display:-webkit-box达到自适应,然而display:-webkit-flex也同样能达到效果,因自在己移动端用-webkit-box比felx方式熟 ...