DIV------使用 <div> 元素的网页布局

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px;}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}//注意:不是<li>
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>
</html>

时间: 2024-10-11 10:12:28

DIV------使用 <div> 元素的网页布局的相关文章

黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型

今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打奉献给各位吧! 同时也希望喜欢的朋友能够多多关注我的这个小博客,要是有什么问题的话也可以在下方的评论区留言哦! OK,接下来我就给大家直接步入正题:详解,设计师用div+css 必须知道的网页布局类型 网页布局大致可分为"国"字型.拐角型.标题正文型.左右框架型.上下框架型.综合框架型.封

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记

一.盒子模型(box model) 一个盒子又4部分组成:content(内容).padding(填充).border(边框)和margin(外边界) 盒子模型有两种: (1)标准W3C盒子模型 (2)IE盒子模型(content包含padding和border) 为了统一标准,让网页能兼容各个浏览器,必须使用标准W3C盒子模型 如何才算使用?答:在网页的顶部加上DOCTYPE声明 二.盒子模型结构详解 1.CSS边框(border)属性 border有3个属性:border-width(宽度)

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上

css+div网页布局常见错误总汇

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,体感音波通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的方式实现各种定位.应用应用DIV+CSS编码时很轻易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素标签是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查

【CSS】关于div的对齐与网页布局

div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内, 各行的规格分布根本就没法调, 例如下面的一段非常简单的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

DIV+CSS常用网页布局技巧!

以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left sidebar</div>  <div id="content">Main Content</div> CSS Code <style type="text/css"> *{    margin: 0;    paddi

[转]CSS网页布局:div水平居中的各种方法

http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一.margin:auto 0 与 text-aligh:center 上面这段代码的意思是说使wrap这个div到左右两侧的