http://learning.artech.cn/category/css-div-web-design
CSS/DIV网页设计视频教程目录
2007年05月01日 星期二
欢迎您来到前沿视频教室，下面列出的是CSS/DIV网页设计视频教程列表，我们还会不断地推出相关的课程， 如果您有兴趣，欢迎您常来这里看一看！
CSS基础知识与核心概念
CSS初探 - CSS基本知识 - 第1课
CSS基本语法与核心概念 - CSS基本知识 - 第2课
设置丰富的文字效果 - CSS基本知识 - 第3课
CSS/DIV布局专题讲解
设置图片效果 - CSS/DIV专题讲解 - 第1课
设置网页背景 - CSS/DIV布局专题讲解 - 第2课
设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课
设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课
用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课
CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课
CSS排版 - CSS/DIV布局专题讲解 - 第8课
网页变幻 - CSS/DIV布局专题讲解 - 第9课
CSS与其他技术
CSS与Javascript的综合应用 - CSS与其他技术 - 第1课
CSS与XML的综合运用 - CSS与其他技术 - 第2课
CSS与AJAX的综合应用 - CSS与其他技术 - 第3课
CSS/DIV综合实践
博客设计DIY - CSS/DIV综合实践 - 第1课
小型工作室 - CSS/DIV综合实践 - 第2课
公司网站 - CSS/DIV综合实践 - 第3课
购物网站设计 - CSS/DIV综合实践 - 第4课
旅游观光网站设计 - CSS/DIV综合实践 - 第5课
css的基本语法
cascading stylesheet(级联样式表)。为网页提供外观（也就是，网页的表现形式）。将网页的外观写在一个css文件里，方便页面代码的维护（将表现与数据分离）。为方便大家学习css，我为大家分享css的基本语法如下：
css的基本语法选择器{
属性1:属性值1
属性n:属性值n
符合选择器要求的标记，会添加对应的样式。
Chrome浏览器为SVG和CSS添加GPU加速功能
互联网有消息透露，谷歌正在为Chrome浏览器增加新的GPU加速功能。Chrome18浏览器将内建开关选项，让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器，让Chrome浏览器在未来网页显示上获得突破性速度，并且达成惊人的视觉效果。
Chrome浏览器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系统，但目前这个功能仍然主要是实验性质，因为只有几个少数网站部署了SVG和CSSGPU加速。
但也有信息表示，tomshardware测试发现Chrome这项功能在显示目前网页方面，显示速度并没有出现任何显着增加，在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。
评论表示，虽然SVG和CSSGPU加速还有待完善，但是Mozilla火狐、微软IE和其他版本浏览器之间的竞争，肯定会推动这种技术快速发展和完善。
设置容器中的内容垂直居中css代码
如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。
line-height:500px
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/htmlcharset=gb2312"/>
<title>标准之路www.aa25.cn</title>
<style>
#layout{width:778pxmargin:0autotext-align:centerborder:1pxsolid#44b6dcbackground:#e1edfbheight:500pxline-height:500px}
</style>
</head>
<body><pid="layout">标准之路www.##.cn </p>
</body>
</html>
提示：可以先修改部分代码后再运行
这是一种方法，另外和种方法就是设置的`它内边距padding了，自己可以试试哟～～
CSS对不同浏览器的兼容性解决办法
CSS 对不同浏览器的兼容性解决办法由于CSS 在不同浏览器中存在兼容性问题，所以在使用 p+CSS 布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决办法。 1、页面居中问题在IE 浏览器下，可以通过定义CSS 样式body {text- align: center}来实现页面居中，但在FireFox（以下简写为FF）浏览器下此属性就失效了。解决办法：使用"margin- left: automargin- right : auto" www.diannao114.cn2、padding 属性在不同浏览器的显示问题当给p 设置padding 属性后，在FF 浏览器中会导致 width 和height 增加(p 的实际宽度=p 宽+Padding), 但在 IE 浏览器中width 和height 不会增加，这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法：给p 设定IE、FF 两个宽度，在IE 的宽度前加上IE 特有标记" * " 号。例如： #pwidth{ padding:5pxwidth:100px*width:110px} 3、奇怪的间隙问题有的时候我们明明设好了高度，可在IE6 上却看见一些奇怪的间隙。解决办法：试试在有空隙的p 上加上"font- size:0px" 4、关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS 属性cursor: hand但这于做法只适用于IE. 解决办法：cursor: pointer5、浮动在IE6 产生双倍距离问题例如： #box{ float:leftwidth:100pxmargin:0 0 0 100px} 这种情况之下IE6 会产生200px 的距离。解决办法：在以上属性的基础上，加上display:inline，使浮动忽略。6、UL 和FORM标签的padding 与margin ul 标签在FF 中默认是有padding 值的, 而在IE 中只有 margin 默认有值。FORM标签在IE 中,将会自动margin 一些边距,而在FF 中margin 则是0；解决办法：css 中首先都使用这样的样式ul,form{margin:0padding:0}。 7、截字省略号 .hh { - o- text- overflow:ellipsistext- overflow:ellipsiswhite- space:nowrapoverflow:hidden} 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但注意Firefox 并不支持。
p+CSS 网页布局的分类
p+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用 p+CSS 布局的代码如下： XHTML 代码： 一列固定宽度CSS 代码： #main1 { width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用 p+CSS 布局的代码如下： XHTML 代码： 一列自适应宽度CSS 代码： #main2 { width: 70%height: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在p+CSS 布局中采用如下代码来实现：XHTML 代码： 一列自适应宽度CSS 代码： p+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用p+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用p+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点p+CSS 布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用p+CSS 布局的代码如下：XHTML 代码： 左侧右侧CSS 代码： #left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的p 作为容器，将二列分栏的p 放置在容器中，从而就实现二列的居中显示。 p+CSS 的代码如下： XHTML 代码： 左侧右侧CSS 代码： #main{ width:554pxmargin:0px auto#left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 这里仅列举了一列、二列的布局方式，实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计，在p+CSS 网页布局中，均是以p 为基础，通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。
p+CSS网页布局技巧：设置网页整体居中的css代码
以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用p+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。
<style>
#layout { width:778pxmargin:0 autotext-align:center}
</style>
<p id="layout">标准之路www.aa25.cn</p>
请看这段代码，宽度为适合800×600分辨率浏览器的宽度，margin:0 auto这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。这样它就居中了。
那么可能你要问了，text-align:center为什么还要让内容居中呢？呵呵，别着急，这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto不能解析为居中，所以用这种方式来补救，以下在设计内容时再用 text-align:left就可以了。
注：margin和padding的值的顺序为顺时针上右下左，如margin:1px 2px 3px 4px还可以缩写为上下、左右，如本例，如果为margin:0px则是各边都为0
提示：可以先修改部分代码后再运行
过来坐坐吧，里面的东东那是相当得多http://hi.baidu.com/xzj4167/blog/item/c0ee18afbe1f16f9fbed509a.html
壹 .CSS语法有关：
一53个CSS-不可或缺的技巧
二 CSS的十八般技巧(提高版)
三 玩转CSS CSS精彩实例教程
四 CSS代码图解(转)
五CSS语法手册
六基本颜色代码+
七CSS基本语法总整理
八 百度空间模块css代码
九 百度空间 CSS更全面解释 以及 参数属性
十 CSS在线编辑器
贰，CSS技巧
一 Iframe 用法的详细讲解- -
二无缝调用不同模板CSS的办法：
下载百度默认模板
三如何让百度空间上出现日历和时钟
四QQ空间跳转百度空间
五“自定义模块”代码详解
六让空间拥有精美flash背景！
七让自己的空间下雨
八宣传百度空间的6种方法,你知道吗?(
九空间个人档案的有关设置 ：
个人档案添加图片
十 隐藏你不想显示的模块
十一给自己的主页加上漂亮的计数器
十二添加小图标，以及小图片：
1文章日期旁加小图案，
2标题栏主体加小图案，
3如何在文章标题前加图片
十三如何增加一个象spaces一样的弹出窗口
十四超链接的有关设置：
1 给超链接添加按钮效果，
2禁止选择/*鼠标触碰 按钮下陷，
3给链接添加背景色效果代码
十五友情连接的应用：
1连接邮箱；
2链接QQ；
3添加“加为好友”的链接：
十六 空间文章板块的有关设置：
1 定义阅读文章时 文章块宽度 距左长度，
2文章列表板块文章区边框的设置，
3日志背景，
4空间个性图片效果，
5图片添加灰色边框效，
6文章区的文字与边框之间的距离调整，
7去掉文章题目下划线
8文章中插入多媒体（视频）
十七空间 模板 以及 图片 的有关设置：
1/*背景设置*/
2/半透明设置*/
3/*常用插入时间图片位置的代码*/
4/*留言板添加图片*/
5/*前景图片透明设置*/
6各部分背景设置
7评论下增加背景图
8如何固定空间背景
9.如何在所有页面底部加入图片
10/*最顶部加字方法!*/
11/*空间整体宽度*/
12/*版块长度及间距*/
13/*去除模块背景即完全背景透明*/
14/*改变你的按钮和输入栏的颜色及字体*/
15/*更多文章居右*/
16*添加天气预报*/
17/*隐藏“查看该用户在百度的”分类*/
18/*添加LOGO*/
19背景色的半透明设置
20设置透明背景图
21主页的个人档案,档册,其它显示透明
22：自定义背景
23让你的百度空间里每一个连接都新窗口中打开
24：屏蔽屏蔽空间任何一个版块
25头部时间显示特效”：
26改变百度空间的模块宽度
27如何改变空间名称的效果
28如何在百度空间上显示天气预报、系统信息、日历、问候、签名。
29专栏分割线的CSS代码修改方法
十八 空间TAB菜单的有关设置：
1如何为TAB菜单加上花边
2如何改变TAB菜单栏的位置及颜色
3/*调整TAB距离*/
4如何在个人控制条中间加时钟
5竖状菜单
十九空间其他版块的有关设置：
1给其它的中间部分加图片
2/*其他模块标题添加图片*/
3教你加显示IP地址代码
4自定义显示IP的项目的颜色
5/*百度空间显示排名*/
6/*其他模块已有XXXX人次访问本空间数字字体设置 */
7在百度空间里面添加自己的特效
二十 空间字体的有关设置：
1百度空间文字发光的方法
2/*阴影效果字体阴影*/
3/*投影的代码*/
4自制闪字空间名称
二十一 空间 背景音乐 播放器 的有关设置：
1如何隐藏播放器而不影响音乐播放
2背景音乐支持多首歌曲
3/*播放器*/
4播放器大小调整
5特色播放器
6玩转百度空间的"背景音乐"板块
7如何在百度空间里添加多首背景音乐（图解）
二十二背景色的半透明设置
二十三打造一个自己的百度空间"其他板块"
二十四做分割线的方法
二十五在空间里加入滚动条：
1想添加滚动条,只需下面的代码即可
2如何让你的浏览器滚动条变色
3透明个性化滚动条
二十六 教你如何制作个性化的标题栏(转自玩转百度空间)
二十七 跟我一起玩百度空间+CSS教程+
二十八 空间评论区的有关设置
二十九给空间加点可爱的符号
三十关于空间制作的链接：
1.让你看懂css各个参数
2.百度空间CSS使用说明
3.怎样编写CSS的!
4.CSS代码解密
5.一个CSS的漏洞
6.增加自定义模块功能
7.更换主体及文章的背景
8.透明flash代码
9.百度空间十大宝藏
10.制作个性化的标题栏
11.看到更多的百度空间
12.百度空间的8个优缺点
13.专栏分割线的代码修改
14.添加自己的LOGO图片
15.宣传百度空间的方法
16.添加多首背景音乐
17.设置透明背景图
18.更改空间的鼠标样式
19.在空间里加入滚动条
20.透明的背景音乐的播放器
21.透明个性化滚动条
22.给链接添加背景色效果代码
23.显示"点击给你发消息"怎么在空间做!
24.去掉文章题目下划线
25.常用插入图片位置的代码
26.如何隐藏播放器而不影响音乐播放
27.如何有字体阴影
28.自制闪字空间名称
29.解决回车换两行的问题
30.调整一下行距
31.让空间拥有精美flash背景
32.让空间自动弹出对话框！
33.修改blog显示的文字颜色大小
34.如何让你的浏览器滚动条变色
35.为评论和链接加上图片
36.如何在"其它"下面加上图片
37.百度空间的名称如何用艺术字？
38.百度空间文字发光的方法
39.文字快速插链接
40.空间模块巧移动
41.个性化你的IP显示，自定义颜色
42.全透明
43.空间背景半透明
44.如何在百度空间的文章标题周围加花边图案？
45.关于百度空间照片大小限制的问题!!!
46.如何在百度空间发表文章时插入FLESH动画？
47.怎样换百度空间的背景
48.做分割线的方法
49.在百度空间里面添加自己的特效
50.在文章中快速插入图片
51.添加计数器的两种方法
52.如何在空间顶部加入图片
53.发表评论框的图片
54.改变空间主页名称和简介的字体大小
55.给超链接添加按钮效果
56.如何给评论框添加背景
57.Iframe 用法的详细讲解
58.背景图片素材01
59.图片素材20060929
60.我的自定义设计
61.CSS鼠标样式大全
62.跟我一起玩百度空间的音乐和视频+
63.为<好友列表>增加一个滚动条
64.空间模块巧移动 + 文字快速插链接
65.怎么去掉百度空间里模块的框框！
66.基本颜色代码+
67.在你的空间中加入幽默元素..
68.百度空间吧[精品]贴+
三十一边框风格属性(border-style)
