<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. JSP 处理汉字信息

    request 对象获取客户端提交的汉字字符时,会出现乱码问题,所以对含有汉字字符的信息必须进行特殊处理.将获取的字符串用 ISO-8859-1 进行编码,并将编码存放到一个字节数组中,再将这个数组转 ...

  2. 每日英语：A Whiff Of 'Welcome Home'

    Buying real estate involves weighing a lot of factors: location, price . . . smell? Some condo devel ...

  3. .NET 4.6中的性能改进

    .NET 4.6中带来了一些与性能改进相关的CLR特性,这些特性中有一部分将会自动生效,而另外一些特性,例如SIMD与异步本地存储(Async Local Storage)则需要对编写应用的方式进行某 ...

  4. Linux之重定向

    Linux重定向是指修改原来默认的一些东西,对原来系统命令的默认执行方式进行改变,比如说简单的我不想看到在显示器的输出而是希望输出到某一文件中就可以通过Linux重定向来进行这项工作. Linux默认 ...

  5. ArcGIS Server API for JavaScript调用错误：已阻止跨源请求：同源策略禁止读取位于......

    已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...

  6. [原创]android使用代码生成LayerDrawable的方法和注意事项

    为了有更好的UI体验,一般我们会把button.textview等控件的背景设置上阴影.传统的做法是美工提供一张具有阴影效果的nine patch图,然后将其在xml文件中添加到background属 ...

  7. REST RPC架构思想

    1.REST RPC是什么? REST RPC是一个改进版的RPC架构,它是为了解决传统的RPC和REST方案的一些不足之处而生的,它结合了REST API和RPC的优点,同时又克服了REST API ...

  8. 常用的Expression调用形式

    ConstantExpression exp1 = Expression.Constant();构建常量表达式(还可以加类型) BinaryExpression exp12 = Expression. ...

  9. 可编辑的DIV -编辑器

    找了好多,没几个好用的,都或多或少有问题 目前这个最好用..  不过有一个奇葩的问题,就是要放在"<a></a>"标签里面, js或者jQuery获取  $ ...

  10. Ubuntu 14.04 安装nVidia驱动后不能进入图形界面的恢复过程

    想要解决Ubuntu14.04的风扇不停的转的问题.由于ubuntu本身不支持双显卡切换,导致集显独显都处于开启状态,发热量和耗电量居高不下. 1. 安装驱动过程 参考[1]中的步骤,做了如下的操作. ...