Posts Tagged '视频教程'

本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始…教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。在这里我就直接给出图片素材的压缩包，以及网页最终效果图：

>>>下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材

>>>点击浏览 – 朝花夕拾系列视频教程 – 最终效果图

第四集的重点主要是规划网页中左右分栏的主内容部分。把分栏的布局实现出来的方法有很多，我们这里讲解其中比较典型的一种，就是利用浮动属性来实现。

在未设定任何CSS的情况下DIV容器在浏览器中是没有任何外观视觉上的呈现的，所以为了更直观的进行布局规划，我们可以先为这些容器添加一些属性，来辅助我们观察它们在浏览器中的尺寸、位置等信息，以便我们进行深入的调整。可以用于辅助的属性有很多，应用最广泛的是边框和背景。

关于侧边栏的阴影背景，并不是一张图片简单的纵向平铺，在它的底部还有一个渐隐的效果。当然我们也不能仅用一张不平铺的大图来实现这个背景，因为它还要能根据侧边栏内容进行高度上的扩展。综合以上因素，我们可以考虑将这个背景划分成上下两块，上方部分用单像素高度的图片垂直平铺，而下方部分仅仅是一张不平铺的渐隐图片，这样一来就既能实现高度自适应，又能兼顾视觉效果上的完整。

视频录制分辨率为1024×768像素：视频截图001 视频截图002

DIV+CSS布局实战系列视频教程【Part4 – WRF格式 – 14.24MB】

重传到了Freakshare网盘上，需要倒计时90秒才能下载，需要的朋友耐心点吧…记得安装仅2MB的用于播放WRF格式视频的WebEx播放器，绝对不是广告…

博客皮肤 由我做主

博客皮肤定制服务+高清PJBlog模板皮肤制作实战视频教程

>>> PJBlog模板皮肤制作实战视频教程【全15集】的特点

1.高清实况录制，全部是1024×768分辨率的视频，下载免费试看片段看看效果；

2.细致、翔实的模板皮肤制作实况录像，快速掌握PJBlog模板个性化方法；

3.详细的CSS知识讲解，对于DIV+CSS新手也是不可多得的入门、进阶教程；

4.精选实用的网页设计辅助工具，让你的模板制作过程更方便快捷；

5.从零开始，无缝衔接，不会给你留下任何技术盲点；

6.完美搭配的软件工具，展现得心应手的综合运用能力；

7.打开思路，融会贯通，自如个性化其它博客程序皮肤和网站模板；

精华教程免费试看

担心教程不够详细？！担心视频的清晰度不够？！看了再说：

>>>博客皮肤由我做主第十集-免费试看【SWF格式 – 40MB】

视频截图（点击小图查看原始尺寸）

方便快捷的获得皮肤定制资讯服务+视频教程

免运费？！本系列全部教程都存放在付费的网盘空间中，可以通过迅雷、快车等工具高速下载，不用担心速度问题。一份详细的说明文档，让你快捷的了解下载及观看视频教程的方法！

PS：真觉得下载麻烦的话，也可以刻录成光盘邮寄，不过邮资就得另计了…
同时也欢迎其他CSS爱好者加入狂骨CSS皮肤定制服务交流群【89534947】（刚刚创建…）

如何学习PJBlog模板皮肤制作实战视频教程

获得本教程之后，只需要下面简单的三个步骤，就可以开始你的学习之旅了：

1.下载《机器码检测文件》，获取用于生成播放密码的唯一机器码；
2.通过下面的联系方式发送你的机器码，获取“一机一码”的播放密码：

3.在同一台电脑上，所有的教程都是同一个播放密码，所以尽情学习吧！

>>> 现在购买教程可获得的优惠

1.免费获得价值10元的三集PJBlog模板高阶个性化视频教程；

2.狂骨CSS将不定期推出VIP专属CSS实例视频教程，保管好你的播放密码，即可观看这些精彩的视频教程；

3.有机会免费获得CSS或网页设计相关的书籍，但数量有限，先到先选，先到先得！

Continue Reading →

CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。本课主要介绍CSS各个滤镜的使用方法，包括定义滤镜、加载滤镜、实例解析等等。

CSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单，进行滤镜操作必须先定义filter，filtername是滤镜属性名，包括alpha、blur、chroma等多种属性，parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。

滤镜分基本滤镜和高级滤镜两种，基本滤镜通常指可以直接作用在对象上，便能立即生效的滤镜，主要有以下几种：

1. Alpha 通道 ;
2. 模糊效果（Blur）;
2. 移动模糊（Motion Blur）;
3. 透明色（Chroma）;
4. 下落阴影（Drop Shadow）;
5. 对称变换（Flip）;
6. 光晕（Glow）;
7. 灰度（Grayscale）;
8. 反色（Invert）;
9. 遮罩（Mask）;
10. 阴影（Shadow）;
11. X光效果（X－ray）;
12. 浮雕（Emboss、Engrave）;
13. 波浪（Wave）;

高级滤镜指需要配合javascript等脚本语言，能产生更多变幻效果的滤镜，主要包括BlendTrans（渐隐变换）、RevealTrans（变换）、Light（灯光）等。本课主要介绍CSS的基本滤镜，高级滤镜将在“CSS与Javascript的综合应用”一课中继续介绍。

本节配套视频下载地址【九】【FLV格式 – 9.48MB】

>>>千脑下载 : 信步拈花 – 【DIV+CSS教程精讲及配套视频下载（九）】

>>>Ziddu下载 : 信步拈花 – 【DIV+CSS教程精讲及配套视频下载（九）】

作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍相关的项目列表、菜单变幻、导航栏等的内容。

1. 项目列表

传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无顺序列表 ul 标记等等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进、位置等等。希望大家能够掌握以下几个方面的内容：

1）列表的符号 ;
2）图片符号 ;

2. 无需表格的菜单

当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。

3. 菜单的横竖转换

导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示：

4. 菜单实例一：百度导航条

打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。

5. 菜单实例二：流行的Tab菜单

Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。

本节配套视频下载地址【八】【FLV格式 – 9.98MB】

>>>千脑下载 : 信步拈花 – 【DIV+CSS教程精讲及配套视频下载（八）】

>>>Ziddu下载 : 信步拈花 – 【DIV+CSS教程精讲及配套视频下载（八）】