<DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

         <title>div布局</title>

         <style type="text/css">

             div#container

             {

             width:800px;

             }

             div#header

             {

                background-color:#99bbbb;

             }

             div#menu

             {

             background-color:#ffff99;

             height:450px;

             width:200px;

             float:left;

             }

             div#content

             {

             background-color:#EEEEEE;

             height:450px;

             width:600px;

             float:left;

             }

             div#footer

             {

             background-color:#99bbbb;

             text-align:center;

             clear:both;

             }

             h1

             {

                margin-bottom:;

             }

         </style>

     </head>

     <body>

         <div id="container">

             <div id="header">

                 <h1>Main Tilte of the web  page</h1>

             </div>

             <div id="menu">

                 <h2>Menu</h2>

                 <p>无序列表</p>

                 <ul>

                     <li>HTML</li>

                     <li>CSS</li>

                     <li>JavaScript</li>

                     <li>Jquery</li>

                 </ul>

                 <p>有序列表</p>

                 <ol>

                     <li>电视机</li>

                     <li>冰箱</li>

                     <li>空调</li>

                 </ol>

                 <p>自定义列表</p>

                 <dl>

                     <dt>科目</dt>

                     <dd>语文</dd>

                     <dd>数学</dd>

                     <dd>英语</dd>

                 </dl>

             </div>

             <div id="content">Content goes here</div>

             <div id="footer">Copyright W3CSchool.com.cn</div>

         </div>

     </body>

 </html>

效果图：

HTML-DIV布局的更多相关文章

  1. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  2. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  3. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  4. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  5. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  6. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  7. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  8. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  9. 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  10. (转)盒子概念和DiV布局

    CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...

随机推荐

  1. 七牛CEO许式伟：移动游戏资源存贮的大趋势

    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) 9月14日,eoe移动开发者大会正式在北京国家会议中心召开,七牛云储存CEO许式伟先生做了 ...

  2. Git忽略配置文件gitignore

    在git客户端用户工程根目录下,.git同级目录创建文件.gitignore,文件名为.gitignore.目的是为了忽略一些不需要提交的文件到git服务器 配置如下: bin target .set ...

  3. FoLlow 的技术博客

    酷壳 http://coolshell.cn 老赵点滴- 追求编程之美 http://blog.zhaojie.me/ Pixel-In-Gene Blog

  4. wordpress自动保存远程图片插件 DX-auto-save-images

    wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...

  5. [原创]android自定义控件的最大高度MaxHeightView

    代码地址:https://github.com/Carbs0126/MaxHeightView android中部分控件具有maxHeight功能,如button等,但是对于ViewGroup类的控件 ...

  6. Promise 使用心得

        this.testPromise=function(){         return new Promise(function(resolve,reject){             co ...

  7. LevelDB(v1.3) 源码阅读之 Arena（内存管理器）

    LevelDB(v1.3) 源码阅读系列使用 LevelDB v1.3 版本的代码,可以通过如下方式下载并切换到 v1.3 版本的代码: $ git clone https://github.com/ ...

  8. Ubuntu下的防火墙

    Ubuntu下的防火墙Gufw-ufw Gufw是ufw的桌面版本,网上有Gufw的安装和配置方法,但是我认为并不是很好.网上的教程也有点愚弄大众的嫌疑,因为按照他的说法,最后防火墙根本就无法自动启动 ...

  9. jsp页面间传递参数 中文乱码问题(zz)

      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...

  10. JavaScript中的String对象

        String对象提供的方法用于处理字符串及字符. 常用的一些方法: charAt(index):返回字符串中index处的字符. indexOf(searchValue,[fromIndex] ...