<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. apache 80端口部属多站点配置

    1.在httpd.conf文件里启用虚拟主机功能,即去掉下面配置项前面的# #LoadModule vhost_alias_module modules/mod_vhost_alias.so 2..在 ...

  2. IE6下的效果

    1. IE6有宽度border实现透明 如果想使得边框颜色透明,在其余浏览器下比较简单,直接使用:border-color:transparent;但在IE6下这个办法不行,可以通过下面的方式实现: ...

  3. Linux之date

    近期学习需要根据不同的日期的数据,做同样的操作,如果一遍遍的手动操作,太笨重了,有些愚公的味道.所以就想着在shell下,将时间当做变量,然后重复其他的操作. 这里的需求是得到从某天(例如:2014- ...

  4. iOS 10.0 更新点（开发者视角）

    html, body {overflow-x: initial !important;}html { font-size: 14px; } body { margin: 0px; padding: 0 ...

  5. AngularJS初始化闪烁

    可以使用:ng-if和ng-cloak解决,原因见:http://www.cnblogs.com/whitewolf/p/3495822.html

  6. Web Design - The Viewport

    What is The Viewport? The viewport is the user's visible area of a web page. The viewport varies wit ...

  7. node-webkit 笔记

    NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScr ...

  8. X509证书中RSA公钥的提取与载入

    原文链接: http://blog.chinaunix.net/uid-16515626-id-2741894.html   由于项目需要,我计划利用openssl开发一个基本的CA,实现证书的发放等 ...

  9. React Native ——实现一个简单的抓取github上的项目数据列表

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...

  10. SDL安全人员角色定义

    SDL安全人员角色定义 http://www.docin.com/p-819975580.html