Div+CSS布局大全
2009-02-27 22:19
225 查看
Div+CSS布局大全
XHTML下css+dir布局总结
XHTML是可扩展标识语言的缩写
CSS---是层叠样式表的缩写
1为页面添加正确DOCTYPE
DOCTYPE是document type的简写.主要用来说明你用的XHTML或者HTML是什么版本.
2设定一个名字空间
直接在DOCTYPE声明后面添加如下代码:
<html XMLns="http://www.w3.org/1999/xhtml">
3声明你的编码语言
代码如下:
<meta http-equiv="Content-Type" content="text/html;charset=GB2312"/>
简体中文---GB2312 繁体内容---BIG5
4用小写字母书写所有的标签
XML对大小写是敏感的
5为图片添加alt属性
正确写法:
<img src="logo.gif" alt="互动力工作标志,点击返回首页">
6给所有属性值加引号
7关闭所有的标签
在标签尾部使用一个正斜杠"/"来关闭它们自己.如:<br />
8收藏夹小图标
首先制作一个16X16的icon图标,命名为:favicon.ico,放在根目录下.
然后嵌入head区;
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
9 用CSS定义元素外观
css是不区别空格和大小写的.
1 颜色值
可用RGB值和十六进制写.如:color:rgb(255,0,0) color:#FF0000
2 定义字体
body {font-family:"Luciad Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
Verdana字体适合所有的Windows系统
3 群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔
p,td,li {font-size:12px;}
4 派生选择器
可使用派生器给一个元素里的子元素定义样式
li strong {font-style:italic;font-weight:normal;}
5 id选择器
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义
<div id="menubar"></div>
然后在样式表里这样定义:
#menubar {MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;}
6类别选择器
在CSS里用一个点开关表示类别选择器定义,如:
.14px{color:#f60;font-size:14px;}
在页面中,用class="类别名"的方法调用:
<span class="14px">14px大小的字体</span>
7定义链接的样式
CSS中用四个伪类来定义链接的样式,分别是:a:link a:visited a:hover和a:active
如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
上面语句分别定义了"链接 已访问过的链接、鼠标停在上方时、点下鼠标时"的样式
注意：必须按以上顺序写，否则显示可能和你预想的不一样。
它们的顺序是："LVHA"
8组合使用选择器创造精致的设计效果
9缩写是按照顺时针的顺序
10行高
line-height:150% 说明行距为正常的150%
10 结构化代码div(division)、id、class
1 结构化id标签，与class的有区别：
如果你的属性页面包含了一个div，它的id为"content"，它就不可能有另外
一个div或者其他元素拥有相同的名字。相反，class属性可以在任意
个页面中一次又一次地使用
2 id的规则
一个id值必须用一个字母或者下划线开关，它不能用一个数字进行开关
11 制作好的网站可以到w3c进行标准校正
validator.w3.org
jigsaw.w3org/css-validator/
调用样式表
外部调用样式表，通常采用2种方法使用样式表：
1 页面内嵌法：就是将样式表直接写在页面代码的head区。
如：<style type="text/css"><!-body {bockground:white;color:black;}-> </style>
2 外部调用法:将样式表写在一个独立的.css文件中，然后在页面head区用
类似以下代码调用
如：<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
为搜索引擎准备的内容
1 允许搜索机器人搜索站内所有链接。
如：<meta content="all" name="robots" />
2 设置站点作者信息
如：<meta name="author" content="ajie@asd.com,阿基米德" />
3 设置站点版权信息
如：<meta name="Copyright" content="www.w3cn.org,自由版权" />
4 站点的简要介绍
如:<meta name="description" content="新网页设计师" />
5 站点的关键词
<meta content="designing,with,web,standards,xhtml,css" name="keywords" />
代码规范
1 所有的标记都必须要有一个相应的结束标记
不成对的，在后面加斜杠。如：<br />
2 所有标签的元素和属性的名字都必须使用小写
3 所有的XML标记都必须合理嵌套
正确写法：<p><b></b></p>
4 所有的属性必须用引号“”括起来
5 把所有< 和&特殊符号用编码表示
任何小于号(<)，不是标签的一部分，必须编码为<
任何大于号(>),不是标签的一部分，必须编码为>
任何与号(&)，不是实体的一部分，都必须编码为&
6 给所有属性赋一个值
如：<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
7 不要在注释内容中使用"--"
如：用等号或者空格替换内部的虚线。
<!--这里是注释=========这里是注释->
CSS入门
css是Cascading Style Sheets(层叠样式表)的缩写，是一种对web文档添加
样式的简单机制，属于表现层的布局语言。
1.基本语法规范
典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中“p“我们称为“选择器”（selectors）,指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value).
2.颜色值
3.定义字体
4.群选择器
5.派生选择器
6.id选择器
7.类别选择器
8.定义链接的样式
CSS布局入门
1 定义DIV
分析div例子：
#sample {MARGIN:10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP:#CCC 2px solid;
BORDER-RIGHT:#CCC 2px solid;
BORDER-BOTTOM:#CCC 2px solid;
BORDER-LEFT:#CCC 2px solid;
BACKROUND:url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%; }
说明如下：
层的名称为sample,在页面中用就可以调用这个样式。
MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造
一个间距。"10px 10px 10px 10px"分别代表上右下左"(顺时针方向)
四个边框，如果一样，缩写成"MARGIN:10px;"如边距为零，写成"MARGIN:0px;"
XHTML下css+dir布局总结
XHTML是可扩展标识语言的缩写
CSS---是层叠样式表的缩写
1为页面添加正确DOCTYPE
DOCTYPE是document type的简写.主要用来说明你用的XHTML或者HTML是什么版本.
2设定一个名字空间
直接在DOCTYPE声明后面添加如下代码:
<html XMLns="http://www.w3.org/1999/xhtml">
3声明你的编码语言
代码如下:
<meta http-equiv="Content-Type" content="text/html;charset=GB2312"/>
简体中文---GB2312 繁体内容---BIG5
4用小写字母书写所有的标签
XML对大小写是敏感的
5为图片添加alt属性
正确写法:
<img src="logo.gif" alt="互动力工作标志,点击返回首页">
6给所有属性值加引号
7关闭所有的标签
在标签尾部使用一个正斜杠"/"来关闭它们自己.如:<br />
8收藏夹小图标
首先制作一个16X16的icon图标,命名为:favicon.ico,放在根目录下.
然后嵌入head区;
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
9 用CSS定义元素外观
css是不区别空格和大小写的.
1 颜色值
可用RGB值和十六进制写.如:color:rgb(255,0,0) color:#FF0000
2 定义字体
body {font-family:"Luciad Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
Verdana字体适合所有的Windows系统
3 群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔
p,td,li {font-size:12px;}
4 派生选择器
可使用派生器给一个元素里的子元素定义样式
li strong {font-style:italic;font-weight:normal;}
5 id选择器
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义
<div id="menubar"></div>
然后在样式表里这样定义:
#menubar {MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;}
6类别选择器
在CSS里用一个点开关表示类别选择器定义,如:
.14px{color:#f60;font-size:14px;}
在页面中,用class="类别名"的方法调用:
<span class="14px">14px大小的字体</span>
7定义链接的样式
CSS中用四个伪类来定义链接的样式,分别是:a:link a:visited a:hover和a:active
如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
上面语句分别定义了"链接 已访问过的链接、鼠标停在上方时、点下鼠标时"的样式
注意：必须按以上顺序写，否则显示可能和你预想的不一样。
它们的顺序是："LVHA"
8组合使用选择器创造精致的设计效果
9缩写是按照顺时针的顺序
10行高
line-height:150% 说明行距为正常的150%
10 结构化代码div(division)、id、class
1 结构化id标签，与class的有区别：
如果你的属性页面包含了一个div，它的id为"content"，它就不可能有另外
一个div或者其他元素拥有相同的名字。相反，class属性可以在任意
个页面中一次又一次地使用
2 id的规则
一个id值必须用一个字母或者下划线开关，它不能用一个数字进行开关
11 制作好的网站可以到w3c进行标准校正
validator.w3.org
jigsaw.w3org/css-validator/
调用样式表
外部调用样式表，通常采用2种方法使用样式表：
1 页面内嵌法：就是将样式表直接写在页面代码的head区。
如：<style type="text/css"><!-body {bockground:white;color:black;}-> </style>
2 外部调用法:将样式表写在一个独立的.css文件中，然后在页面head区用
类似以下代码调用
如：<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
为搜索引擎准备的内容
1 允许搜索机器人搜索站内所有链接。
如：<meta content="all" name="robots" />
2 设置站点作者信息
如：<meta name="author" content="ajie@asd.com,阿基米德" />
3 设置站点版权信息
如：<meta name="Copyright" content="www.w3cn.org,自由版权" />
4 站点的简要介绍
如:<meta name="description" content="新网页设计师" />
5 站点的关键词
<meta content="designing,with,web,standards,xhtml,css" name="keywords" />
代码规范
1 所有的标记都必须要有一个相应的结束标记
不成对的，在后面加斜杠。如：<br />
2 所有标签的元素和属性的名字都必须使用小写
3 所有的XML标记都必须合理嵌套
正确写法：<p><b></b></p>
4 所有的属性必须用引号“”括起来
5 把所有< 和&特殊符号用编码表示
任何小于号(<)，不是标签的一部分，必须编码为<
任何大于号(>),不是标签的一部分，必须编码为>
任何与号(&)，不是实体的一部分，都必须编码为&
6 给所有属性赋一个值
如：<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
7 不要在注释内容中使用"--"
如：用等号或者空格替换内部的虚线。
<!--这里是注释=========这里是注释->
CSS入门
css是Cascading Style Sheets(层叠样式表)的缩写，是一种对web文档添加
样式的简单机制，属于表现层的布局语言。
1.基本语法规范
典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中“p“我们称为“选择器”（selectors）,指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value).
2.颜色值
3.定义字体
4.群选择器
5.派生选择器
6.id选择器
7.类别选择器
8.定义链接的样式
CSS布局入门
1 定义DIV
分析div例子：
#sample {MARGIN:10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP:#CCC 2px solid;
BORDER-RIGHT:#CCC 2px solid;
BORDER-BOTTOM:#CCC 2px solid;
BORDER-LEFT:#CCC 2px solid;
BACKROUND:url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%; }
说明如下：
层的名称为sample,在页面中用就可以调用这个样式。
MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造
一个间距。"10px 10px 10px 10px"分别代表上右下左"(顺时针方向)
四个边框，如果一样，缩写成"MARGIN:10px;"如边距为零，写成"MARGIN:0px;"
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DIV+CSS布局解决方案大全
- Div+CSS 布局大全DIV+CSS布局大全
- 《Div+CSS布局大全》发布加下载
- DIV+CSS布局大全
- DIV+CSS布局教程大全与pdf电子书 下载
- css+div网页布局大全
- 《Div+CSS布局大全》发布加下载
- 学会DIV+CSS布局是否有利于找工作 可以找到什么工作？
- div+css布局技术漫谈
- HTML CSS + DIV实现整体布局
- DIV+CSS 布局学习记录
- 处理div+css布局左右浮动问题
- DIV+CSS首页布局练习
- CSS布局之div交叉排布与底部对齐--flex实现
- DIV+CSS布局下拉菜单制作
- [网摘]Div+CSS布局的扩展技巧和用法24则
- Div+CSS布局入门教程(二)
- div+css布局之固定定位布局
- CSS+DIV网页样式与布局——文字样式&段落（一）