div+css是网站标准（或称“web标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的html网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。xhtml是the extensible hypertext markup language（可扩展超文本标识语言）的缩写。xhtml基于可扩展标记语言（xml），是一种在html 基础上优化和改进的的新语言，目的是基于xml应用与强大的数据转换能力，适应未来网络应用更多的需求。在xhtml网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。
以前都是table布局。。现在已经基本不用了（table只用来显示数据）
div中文里是区域的意思，css则是层叠样式表的意思，可见核心是布局，而不是样式
在学习div+css之前，一定要熟悉html，div+css要在html的基础上学习
好了，现在是用什么工具，一般用记事本就可以了 也就是记事本+浏览器就ok，服务器都不需要，也可以用dreamweaver cs5，这个有提示，帮助文档最好下个中文版的css样式表手册，这样就齐活啦
以上东西网上很容易找到，也可以在群 web编程开发：197132320 下载，当然也欢迎热爱web编程的朋友加入
下面开始学，首先熟悉下html的基本结构，创建一个html文件test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
当然，你直接在html文件直接输入hello也能正常显示，但这不符合标准
下面认识下div，其实可以把他看作一个容器，或者一个盒子，他是专门盛放内容的
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
但是你在网页上是看不到这个div的，因为他还是透明的
我们需要给他样式让他显示，首先让他的边框显示，宽高度100px，背景色为红色
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm
width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色
如上代码在浏览器显示如下
立即学习“前端免费学习笔记（深入）”；
关闭边栏
CSS主页 > web编程 > CSS >
大中小
div+css网页布局设计新开端（1）
时间：2014-03-09 20:49 点击：709次
div+css是网站标准（或称“web标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的html网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。xhtml是the extensible hypertext markup language（可扩展超文本标识语言）的缩写。xhtml基于可扩展标记语言（xml），是一种在html 基础上优化和改进的的新语言，目的是基于xml应用与强大的数据转换能力，适应未来网络应用更多的需求。在xhtml网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。
以前都是table布局。。现在已经基本不用了（table只用来显示数据）
div中文里是区域的意思，css则是层叠样式表的意思，可见核心是布局，而不是样式
在学习div+css之前，一定要熟悉html，div+css要在html的基础上学习
好了，现在是用什么工具，一般用记事本就可以了 也就是记事本+浏览器就ok，服务器都不需要，也可以用dreamweaver cs5，这个有提示，帮助文档最好下个中文版的css样式表手册，这样就齐活啦
以上东西网上很容易找到，也可以在群 web编程开发：197132320 下载，当然也欢迎热爱web编程的朋友加入
下面开始学，首先熟悉下html的基本结构，创建一个html文件test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
当然，你直接在html文件直接输入hello也能正常显示，但这不符合标准
下面认识下div，其实可以把他看作一个容器，或者一个盒子，他是专门盛放内容的
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
但是你在网页上是看不到这个div的，因为他还是透明的
我们需要给他样式让他显示，首先让他的边框显示，宽高度100px，背景色为红色
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm
width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色
如上代码在浏览器显示如下
还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说
引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式
外部样式引入需要在head标签里加
<link rel="stylesheet" type="text/css" href="mystyle.css" />
另外还的在html文件相同目录下创建mystyle.css文件
内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入
这是内部样式
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式
如果是这种
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>两种样式你觉得它会采用哪个？
style属性这种是内联样式
这就是优先级问题，它会采用离它最近的那个，也就是style属性里的
同样，如果外部样式与内部样式相同，它会优先采用内部样式的
如果不是全部都相同，它会把不同的合并起来，相同的就优先采用内部样式的
优先级
内联》内部》外部
以上就是div+css网页布局设计新开端（1）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
