<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. iphone/ipad/ipod设置VPN(pptp连接方式)

    一.点击桌面上的-设置-图标进入设置(如图) 二.点击-通用-进入通用设置 三.点击-VPN-进入VPN设置(如图) 四.点击添加VPN设置进行设置 五.选择并连接

  2. jenkins svn E175002错误

    JENKINS_JAVA_OPTIONS="-Djava.awt.headless=true -Dsvnkit.http.sslProtocols='SSLv3' -Dsvnkit.http ...

  3. 【转帖】四种BI 开源工具介绍-SpagoBI,openI,JasperSoft,Pentaho

    四种BI 开源工具介绍-SpagoBI,openI,JasperSoft,Pentaho 1 BI系统的简述 从技术角度来说 BI 包含了 ETL.DW.OLAP.DM等多环节.简单的说就是把交易系统 ...

  4. JavaScriptSerializer 中的匿名类型 转json

    二:JavaScriptSerializer 中的匿名类型 这个类型我想大家都清楚,不过性能更高的方式应该是用JsonConvert吧,但这个不是本篇讨论的话题,我们重点来看看匿名类型的Json序列化 ...

  5. 使用PopupWindow实现Menu功能

    参考:http://www.cnblogs.com/sw926/p/3230659.html 注意: PopupWindow会给PopupView设置Padding,会导致ContentView的左右 ...

  6. 疑难杂症 - SQL语句整理

    一.关联子查询-查日期最新列 前天在工作中遇到一条非常有用的SQL语句,想了好久愣是没搞出来.今天将这个问题模拟出来:先看表 需求是,对于每个人,仅显示时间最新的那一条记录. 答案如下: select ...

  7. 使用SQL联合查询来构建临时vo对象的应用

    联合查询: 表1: team球队表 表2:schedule 赛程表 需要数据: 球队名称.主队ID.主队名称.客队ID.客队名称.胜负情况 方法1. Object数组取出列和数值 import jav ...

  8. ThoughtWorks 2016年第1期DNA活动总结

    今天受邀参加了2016年ThoughtWorks公司成都分公司的2016年第一期DNA活动. 什么是DNA? DNA 即 Design And Analysis.设计与分析.这个活动主要是针对产品经理 ...

  9. Ubuntu下PHP的扩展

    Ubuntu版本:14.04 1. 下载php-5.5.10.tar.bz2,并解压. 2.  终端进入解压后的目录php-5.5.10,运行configure.(输入命令./configure) 3 ...

  10. 让C程序更高效的10种方法（转）

    原文:http://blog.jobbole.com/1198/ 代码之美,不仅在于为一个给定问题找到解决方案,而且还在代码的简单性.有效性.紧凑性和效率(内存).代码设计比实际执行更难 .因此,每一 ...