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

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

<!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. vim常用操作

    vim filename 编辑一个文件 在一般模式里按yy是复制的意思(复制当前行),按yy之前先按相应的数字键就是复制光标所在行到指定的行,然后按p粘贴在一般模式里按dd是删除的意思(也叫做剪切), ...

  2. Nuget 常用命令

    Update-Package -ProjectName 'NLog' -Reinstall 主题 about_NuGet 简短说明 提供有关 NuGet 程序包管理器命令的信息. 详细说明 本主题介绍 ...

  3. 从jQuery源码阅读看 dom load

    最近两天不忙的时候再回过来研究一下jquery的源码,看到$(document).ready()时,深入的研究了一下dom的加载问题. 我们都知道,window.onload可以解决我们的js执行时机 ...

  4. C#设计模式——解释器模式(Interpreter Pattern)

    一.概述 在软件开发特别是DSL开发中常常需要使用一些相对较复杂的业务语言,如果业务语言使用频率足够高,且使用普通的编程模式来实现会导致非常复杂的变化,那么就可以考虑使用解释器模式构建一个解释器对复杂 ...

  5. PowerDesigner设计时表显示注释选项

    PowerDesigner设计时表显示注释选项:选定编辑的表,右键- >Properties- >Columns- >Customize Columns and Filter(或直接 ...

  6. JVM & Server & Connector & Context Relationship

  7. centos,apache运维经验

    1.防止php木马在apache下跨站 在/etc/php.ini 中设置open_basedir=.:/tmp/  , (还需要加载网站所在的目录) 2.shell下搜索木马 find ./ -ty ...

  8. 慕课网-Java入门第一季-7-5 Java 中带参无返回值方法的使用

    public class HelloWorld { public static void main(String[] args) { // 创建对象,对象名为hello HelloWorld hell ...

  9. LR12.53—第4课：准备Vuser脚本进行负载测试

    第4课:准备Vuser脚本进行负载测试 在前面的课程中,您确认您的Vuser脚本的回放产生了真正的用户的精确仿真.下一个步骤是准备的脚本负载测试.如何将多用户系统同时工作的工作?会拖慢系统到不可接受的 ...

  10. sql中limit使用方法

    此处以mysql为例,但是我相信物以变通在oracle上也一定适用 下面是几种limit的方法:原则看看下面几个例子应该就懂了 在数据库中很多地方都会用到,比如当你数据库查询记录有几万.几十万时使用l ...