HTML-DIV布局

 1 <DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 5         <title>div布局</title>
 6         <style type="text/css">
 7             div#container
 8             {
 9             width:800px;
10             }
11             div#header
12             {
13                background-color:#99bbbb;
14             }
15             div#menu
16             {
17             background-color:#ffff99;
18             height:450px;
19             width:200px;
20             float:left;
21             }
22             div#content
23             {
24             background-color:#EEEEEE;
25             height:450px;
26             width:600px;
27             float:left;
28             }
29             div#footer
30             {
31             background-color:#99bbbb;
32             text-align:center;
33             clear:both;
34             }
35             h1
36             {
37                margin-bottom:0;
38             }
39         </style>
40     </head>
41     <body>
42         <div id="container">
43             <div id="header">
44                 <h1>Main Tilte of the web  page</h1>
45             </div>
46             <div id="menu">
47                 <h2>Menu</h2>
48                 <p>无序列表</p>
49                 <ul>
50                     <li>HTML</li>
51                     <li>CSS</li>
52                     <li>JavaScript</li>
53                     <li>Jquery</li>
54                 </ul>
55                 <p>有序列表</p>
56                 <ol>
57                     <li>电视机</li>
58                     <li>冰箱</li>
59                     <li>空调</li>
60                 </ol>
61                 <p>自定义列表</p>
62                 <dl>
63                     <dt>科目</dt>
64                     <dd>语文</dd>
65                     <dd>数学</dd>
66                     <dd>英语</dd>
67                 </dl>
68             </div>
69             <div id="content">Content goes here</div>
70             <div id="footer">Copyright W3CSchool.com.cn</div>
71         </div>
72     </body>
73 </html>

效果图：

HTML-DIV布局相关推荐

CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
图顶层CSS菜单,弹出二级菜单,二级菜单多列: 主体部分三个DIV布局: 这个是IBM官网布局的样子: 代码,拿去花吧:我的奶酪很多: 有不清楚的地方可以问我,qq 513979805 <!D ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
2017-12-04HTML布局＿div布局
HTML布局＿div布局 <!doctpye> <html> <head><meta charset = 'utf-8'><title>HT ...
css中div布局学习（1）
看完慕课网中的div布局,简单记录一下里面的内容: 1.实现效果: 上面实现效果主要是考虑如何实现块元素居中的问题,关键代码: margin: 0 auto; 实现代码: <!DOCTYPE h ...
DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码文章目录 HTML5期末大作业:仿英雄联盟网站设计- ...
div布局改进treeview导航
asp.net对新手来讲真是福音,随便拖几下就是一个网页．让我这个从asp转来的菜鸟开始兴奋不已,尤其在几个数据绑定控件还有验证控件,但两个月下来后让我对这些控件兴趣全无,尤其是数据绑定控件如grid ...
css+div布局实现简历界面
工具 IntelliJ IDEA,Photoshop CS3 材料简历(PDF) 步骤 1 根据div布局思想切分简历 2使用ps cs3将简历中出现图标合成到一张图中 3.css+div布局实现简 ...
html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
DIV布局之道一：DIV块的水平并排、垂直并排
DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code 复制内容到剪贴板 .lay1 ...
QQ相册(html)实例详述----Div布局
今天重新整理了一下前端div布局的知识,发现有了一些比较深的认识,特在此详述一下. div定义:可定义文档中的分区或节,可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式 ...

HTML-DIV布局

HTML-DIV布局相关推荐

最新文章

热门文章