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

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

<!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. MVC部分视图含义

    Partail Views 类似于ASPX视图引擎中的用户控件,使用部分视图可以创建放置于不同页面的通用部分.

  2. 反转链表，时间复杂度O(n),空间复杂度O(1)

    原理:使用三个指针,p,q指向交换的元素,r指向后续元素 代码如下: class Node{ int data; Node next; Node(int data){ this.data=data; ...

  3. Oauth2.0

    注:Access token 为第三方平台的token,在用户授权时使用Refresh Token为用户的token get/post参数时,一般采用字典排序

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

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

  5. session保存用户信息

    前台jsp-------------- <%@ page import="com.manager.form.User" %><%User user = reque ...

  6. 1、B2BUA

    链接1:proxy和B2BUA的区别和联系:http://www.cnblogs.com/gnuhpc/archive/2012/12/11/2813499.html 链接2:http://blog. ...

  7. QTP操作excel文档

    对于QTP操作excel的大前提是,保证组建服务里的DCOM配置里存在 microsoft excel application ,具体的查看方式是,在运行框中输入dcomcnfg,然后会打开组件服务的 ...

  8. leetcode-【中等题】2. Add Two Numbers

    题目 You are given two linked lists representing two non-negative numbers. The digits are stored in re ...

  9. Thinkphp源码分析系列（九）–视图view类

    视图类view主要用于页面内容的输出,模板调用等,用在控制器类中,可以使得控制器类把表现和数据结合起来.下面我们来看一下执行流程. 首先,在控制器类中保持着一个view类的对象实例,只要继承自控制器父 ...

  10. bootstrap 无限极菜单

        <ul class='wraplist' >           <li class="open">                <a hr ...