<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. MVC使用基架添加控制器出现的错误：无法检索XXX的元数据

    环境 vs2012 框架 mvc3 数据库  sqlservercompact4.0 出现的错误如下: “ ---------------------------Microsoft Visual St ...

  2. 动态生成Table内文字换行。

    后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...

  3. WPF 获取程序路径的一些方法，根据程序路径获取程序集信息

    一.WPF 获取程序路径的一些方法方式一 应用程序域 //获取基目录即当前工作目录 string str_1 = System.AppDomain.CurrentDomain.BaseDirector ...

  4. android studio 编译加速

    1. http://www.52codes.net/article/658.html 2.http://my.oschina.net/sammy1990/blog/388846 3.http://st ...

  5. 使用PuTTY时的文件上传下载方法

    如果你是个PuTTY重度用户,在使用ssh连上一个远端机器工作了好一阵子后,发现自己需要对 当前会话 上传/下载文件,要怎样才能简单快捷呢? 最简单的方式 最简单的方法: 安装WinSCP或者File ...

  6. 优先队列求解Huffman编码 c++

    优先队列小析      优先队列的模板: template <class T, class Container = vector<T>,class Compare = less< ...

  7. Intellij IDEA IDE部署Servlet项目

    1.设置Project Structure 2.修改Modules中的Web项目文件默认class编译之后输出位置 3.给Modules中的Web项目添加Web模块 4.修改Web项目Web.xml文 ...

  8. LoadRunner11.52发布，全新的VTS

    LoadRunner11.52发布,全新的VTShttp://automationqa.com/forum.php?mod=viewthread&tid=2252&fromuid=2 ...

  9. Ubuntu进不入系统，一直停留在ubuntu图标画面(转)

    Ubuntu进不入系统,一直停留在ubuntu图标画面(转) 在VMware中对Ubuntu进行“关闭电源”后,再次进入,一直停留在ubuntu的图标画面,无法进入系统了!网上也有别的网友碰到这个问题 ...

  10. LintCode-- Remove Linked List Elements

    Remove all elements from a linked list of integers that have valueval. 样例 Given 1->2->3->3- ...