第1章 CSS3设计概述
视频讲解:36分钟
1.1 认识CSS
1.1.1 CSS的发展历史
1.1.2 CSS页面优势
1.1.3 CSS在国内的早期实践
1.2 认识Web标准
1.2.1 网页结构
1.2.2 网页表现
1.2.3 网页行为
1.3 案例:初次体验CSS
1.4 CSS3简介
1.4.1 CSS3模块
1.4.2 CSS3新特性<p>第1章 CSS3设计概述</p> <p> 视频讲解:36分钟</p> <p>1.1 认识CSS</p> <p>1.1.1 CSS的发展历史</p> <p>1.1.2 CSS页面优势</p> <p>1.1.3 CSS在国内的早期实践</p> <p>1.2 认识Web标准</p> <p>1.2.1 网页结构</p> <p>1.2.2 网页表现</p> <p>1.2.3 网页行为</p> <p>1.3 案例:初次体验CSS</p> <p>1.4 CSS3简介</p> <p>1.4.1 CSS3模块</p> <p>1.4.2 CSS3新特性</p> <p>1.4.3 CSS3现状</p> <p>1.4.4 给初学者的建议</p> <p>1.4.5 浏览器支持</p> <p>1.5 案例:设计完整的CSS页面</p> <p> </p> <p>第2章 CSS3基本语法</p> <p> 视频讲解:32分钟</p> <p>2.1 CSS基本用法</p> <p>2.1.1 CSS样式</p> <p>2.1.2 CSS应用</p> <p>2.1.3 CSS样式表</p> <p>2.1.4 导入外部样式表</p> <p>2.1.5 CSS注释</p> <p>2.2 设置属性</p> <p>2.2.1 CSS属性</p> <p>2.2.2 定义属性值</p> <p>2.3 CSS特性</p> <p>2.3.1 CSS层叠性</p> <p>2.3.2 CSS继承性</p> <p>2.3.3 案例实战</p> <p>2.4 默认样式</p> <p>2.4.1 HTML4默认样式</p> <p>2.4.2 浏览器默认样式</p> <p> </p> <p>第3章 CSS3选择器</p> <p> 视频讲解:71分钟</p> <p>3.1 选择器概述</p> <p>3.1.1 为什么学习CSS3选择器</p> <p>3.1.2 CSS3选择器分类</p> <p>3.2 基本选择器</p> <p>3.2.1 标签选择器</p> <p>3.2.2 类选择器</p> <p>3.2.3 ID选择器</p> <p>3.3 组合选择器</p> <p>3.3.1 包含选择器</p> <p>3.3.2 子选择器</p> <p>3.3.3 相邻选择器</p> <p>3.3.4 兄弟选择器</p> <p>3.3.5 分组选择器</p> <p>3.4 属性选择器</p> <p>3.4.1 认识属性选择器</p> <p>3.4.2 案例:设计图片灯箱导航按钮</p> <p>3.4.3 案例:设计联系表单</p> <p>3.4.4 案例:设计超链接样式</p> <p>3.5 伪类选择器</p> <p>3.5.1 认识伪类选择器</p> <p>3.5.2 动态伪类</p> <p>3.5.3 结构伪类</p> <p>3.5.4 否定伪类</p> <p>3.5.5 状态伪类</p> <p>3.5.6 目标伪类</p> <p>3.6 综合实战:设计优雅的表格</p> <p> </p> <p>第4章 网页文本美化</p> <p> 视频讲解:82分钟</p> <p>4.1 定义字体样式</p> <p>4.1.1 设置字体类型</p> <p>4.1.2 使用通用字体</p> <p>4.1.3 设置字体大小</p> <p>4.1.4 案例:灵活配置网页字体大小</p> <p>4.1.5 设置字体颜色</p> <p>4.1.6 案例:网页配色</p> <p>4.1.7 设置字体字形</p> <p>4.2 定义文本样式</p> <p>4.2.1 文本水平对齐</p> <p>4.2.2 案例:网页居中显示</p> <p>4.2.3 案例:左右对齐栏目</p> <p>4.2.4 文本垂直对齐</p> <p>4.2.5 案例:设计**居中显示</p> <p>4.2.6 案例:优化网页居中显示</p> <p>4.2.7 设置行高</p> <p>4.2.8 案例:设计可阅读的正文行高</p> <p>4.2.9 案例:灵活设计行高</p> <p>4.2.10 案例:设计首行缩进</p> <p>4.2.11 综合案例:文字隐藏和截取</p> <p>4.3 CSS3文本样式</p> <p>4.3.1 CSS3文本模块概述</p> <p>4.3.2 设计文本阴影</p> <p>4.3.3 案例:巧用文本阴影</p> <p>4.3.4 案例:设计网站首页</p> <p>4.3.5 案例:定义溢出文本</p> <p>4.3.6 案例:文本换行</p> <p>4.3.7 案例:添加动态内容</p> <p>4.3.8 恢复默认样式</p> <p>4.3.9 自定义字体类型</p> <p> </p> <p>第5章 网页色彩和图像美化</p> <p> 视频讲解:68分钟</p> <p>5.1 定义颜色</p> <p>5.1.1 使用RGBA</p> <p>5.1.2 使用HSL</p> <p>5.1.3 使用HSLA</p> <p>5.1.4 定义opacity属性</p> <p>5.1.5 定义transparent颜色值</p> <p>5.2 定义渐变色</p> <p>5.2.1 设计Webkit渐变</p> <p>5.2.2 案例:应用渐变色1</p> <p>5.2.3 设计Gecko渐变</p> <p>5.2.4 案例:应用渐变色2</p> <p>5.2.5 设计IE渐变</p> <p>5.2.6 设计W3C渐变</p> <p>5.2.7 案例:设计精致按钮</p> <p>5.3 图像美化</p> <p>5.3.1 案例:定义照片相框</p> <p>5.3.2 案例:为图像设计阴影白边效果</p> <p>5.3.3 案例:设计水印</p> <p>5.4 图文混排</p> <p>5.4.1 案例:行内图文混排</p> <p>5.4.2 案例:设计图文环绕版式</p> <p>5.4.3 案例:设计不规则的图文环绕版式</p> <p>5.5 案例实战</p> <p>5.5.1 设计网页纹理背景</p> <p>5.5.2 设计发光的球体</p> <p>5.5.3 设计过渡色谱表</p> <p> </p> <p>第6章 网页背景和边框美化</p> <p> 视频讲解:75分钟</p> <p>6.1 设计边框样式</p> <p>6.1.1 定义多色边框</p> <p>6.1.2 定义边框背景</p> <p>6.2 设计圆角</p> <p>6.2.1 使用border-radius</p> <p>6.2.2 案例:设计椭圆图形</p> <p>6.3 设计倒影</p> <p>6.4 设计阴影</p> <p>6.4.1 使用box-shadow</p> <p>6.4.2 案例:设计Windows界面效果</p> <p>6.5 设计背景图像</p> <p>6.5.1 定义背景图像重复显示</p> <p>6.5.2 案例:设计弹性公告栏</p> <p>6.5.3 定位背景图像</p> <p>6.5.4 固定背景图像</p> <p>6.5.5 案例:使用背景图像设计圆角</p> <p>6.5.6 案例:伪列布局</p> <p>6.6 CSS3新增背景图像属性</p> <p>6.6.1 定义坐标</p> <p>6.6.2 定义裁剪区域</p> <p>6.6.3 定义大小</p> <p>6.6.4 定义循环方式</p> <p>6.6.5 定义多背景图</p> <p>6.7 案例实战</p> <p>6.7.1 设计图标按钮</p> <p>6.7.2 设计花边框</p> <p>6.7.3 设计立体文本框</p> <p> </p> <p>第7章 设计表格和表单</p> <p> 视频讲解:37分钟</p> <p>7.1 设计表格</p> <p>7.1.1 定义表格</p> <p>7.1.2 优化表格</p> <p>7.1.3 设置表格属性</p> <p>7.2 定义表格样式</p> <p>7.2.1 案例:隔行分色</p> <p>7.2.2 案例:分栏样式</p> <p>7.2.3 案例:鼠标交互样式</p> <p>7.3 设计表单</p> <p>7.4 定义表单样式</p> <p>7.4.1 设置基本样式</p> <p>7.4.2 案例:设计高亮表单</p> <p>7.4.3 案例:设计图标化表单</p> <p>7.4.4 案例:设计易用表单</p> <p>7.4.5 案例:设计反馈表</p> <p> </p> <p>第8章 设计链接、列表和菜单</p> <p> 视频讲解:60分钟</p> <p>8.1 设计超链接</p> <p>8.1.1 定义基本样式</p> <p>8.1.2 案例:设计多样超链接</p> <p>8.1.3 案例:设计按钮样式</p> <p>8.1.4 案例:设计图像化样式</p> <p>8.1.5 案例:设计滑动样式</p> <p>8.2 设计列表</p> <p>8.2.1 列表类型</p> <p>8.2.2 正确使用列表</p> <p>8.3 定义列表样式</p> <p>8.3.1 重置列表样式</p> <p>8.3.2 定义项目符号</p> <p>8.3.3 案例:自定义项目符号</p> <p>8.3.4 案例:设计并列显示的列表</p> <p>8.3.5 案例:定位列表项目</p> <p>8.3.6 案例:设计导航列表</p> <p>8.4 设计导航条</p> <p>8.4.1 案例:使用背景图设计导航条</p> <p>8.4.2 案例:设计垂直导航条</p> <p>8.4.3 案例:设计水平导航条</p> <p>8.4.4 案例:设计多级菜单</p> <p>8.4.5 案例:设计滑动门菜单</p> <p>8.5 综合案例</p> <p>8.5.1 排行榜</p> <p>8.5.2 图文列表</p> <p> </p> <p>第9章 CSS盒模型</p> <p> 视频讲解:56分钟</p> <p>9.1 CSS2盒模型概述</p> <p>9.1.1 盒模型缘起</p> <p>9.1.2 盒模型结构</p> <p>9.1.3 定义盒模型大小</p> <p>9.2 边框</p> <p>9.2.1 定义宽度</p> <p>9.2.2 定义颜色</p> <p>9.2.3 定义样式</p> <p>9.2.4 案例:设计行内元素边框</p> <p>9.3 边界</p> <p>9.3.1 定义边界</p> <p>9.3.2 案例:边界的应用</p> <p>9.3.3 案例:边界重叠现象</p> <p>9.3.4 行内元素边界</p> <p>9.4 补白</p> <p>9.5 CSS3盒模型</p> <p>9.5.1 定义盒模型显示方式</p> <p>9.5.2 定义盒模型可控大小</p> <p>9.5.3 溢出处理</p> <p>9.5.4 定义轮廓</p> <p>9.5.5 定义轮廓样式</p> <p>9.5.6 案例:改善网页布局</p> <p> </p> <p>第10章 CSS布局基础</p> <p> 视频讲解:56分钟</p> <p>10.1 盒模型**概念</p> <p>10.1.1 显示类型</p> <p>10.1.2 定位框</p> <p>10.2 CSS布局概述</p> <p>10.3 流动布局</p> <p>10.3.1 流动元素</p> <p>10.3.2 相对定位元素</p> <p>10.4 浮动布局</p> <p>10.4.1 定义浮动显示</p> <p>10.4.2 清除浮动</p> <p>10.4.3 浮动嵌套</p> <p>10.4.4 案例:混合浮动布局</p> <p>10.5 定位布局</p> <p>10.5.1 定义定位显示</p> <p>10.5.2 相对定位</p> <p>10.5.3 定位层叠</p> <p>10.5.4 案例:混合定位布局</p> <p>10.6 案例实战</p> <p>10.6.1 设计固宽 弹性页面</p> <p>10.6.2 设计两栏弹性页面</p> <p>10.6.3 设计两栏浮动页面</p> <p>10.6.4 设计3栏弹性页面</p> <p>10.6.5 设计两列固宽 单列弹性页面</p> <p>10.6.6 设计两列弹性 单列固定页面</p> <p> </p> <p>第11章 CSS3布局</p> <p> 视频讲解:79分钟</p> <p>11.1 多列布局</p> <p>11.2 定义多列样式</p> <p>11.2.1 设置列宽</p> <p>11.2.2 设置列数</p> <p>11.2.3 设置列间距</p> <p>11.2.4 设置列边框样式</p> <p>11.2.5 设置跨列显示</p> <p>11.2.6 设置列高度</p> <p>11.2.7 设置打印列</p> <p>11.3 盒布局</p> <p>11.4 定义盒布局样式</p> <p>11.4.1 设置自适应宽度</p> <p>11.4.2 设置列显示顺序</p> <p>11.4.3 设置列排列方向</p> <p>11.4.4 设置模块大小自适应</p> <p>11.4.5 消除空白</p> <p>11.4.6 设置对齐方式</p> <p>11.4.7 小结</p> <p>11.5 伸缩盒布局</p> <p>11.5.1 定义Flexbox</p> <p>11.5.2 定义伸缩方向</p> <p>11.5.3 定义行数</p> <p>11.5.4 定义对齐方式</p> <p>11.5.5 定义伸缩项目</p> <p>11.5.6 案例:设计伸缩盒菜单</p> <p>11.5.7 案例:设计自适应伸缩页</p> <p>11.5.8 案例:设计混合版伸缩页面</p> <p>11.6 案例实战</p> <p>11.6.1 设计多列首页</p> <p>11.6.2 设计HTML5应用文档</p> <p>11.6.3 设计Windows 8桌面</p> <p> </p> <p>第12章 CSS兼容技法</p> <p> 视频讲解:33分钟</p> <p>12.1 了解主流浏览器</p> <p>12.1.1 Mozilla</p> <p>12.1.2 IE</p> <p>12.1.3 Safari</p> <p>12.1.4 Opera</p> <p>12.1.5 Chrome</p> <p>12.1.6 国内浏览器市场份额</p> <p>12.1.7 IETester</p> <p>12.2 CSS兼容方法</p> <p>12.2.1 CSS过滤器</p> <p>12.2.2 显示模式</p> <p>12.3 过滤样式表</p> <p>12.4 过滤样式</p> <p>12.4.1 !important</p> <p>12.4.2 下划线属性名</p> <p>12.4.3 * html选择符</p> <p>12.5 过滤声明</p> <p>12.5.1 隐藏单个声明</p> <p>12.5.2 隐藏多个声明</p> <p>12.5.3 **过滤器</p> <p>12.6 使用检测工具</p> <p>12.6.1 W3C CSS验证服务</p> <p>12.6.2 Web Developer</p> <p>12.6.3 代码隔离与验证</p> <p>12.7 案例实战</p> <p>12.7.1 双倍显示</p> <p>12.7.2 多出3像素</p> <p>12.7.3 高度不适应</p> <p>12.7.4 多余字符</p> <p>12.7.5 定位异常</p> <p>12.7.6 捉迷藏</p> <p>12.7.7 百分比取值</p> <p>12.7.8 丢失项目符号</p> <p>12.7.9 内容溢出</p> <p> </p> <p>第13章 CSS文档统筹与编码规范</p> <p>13.1 CSS文档统筹</p> <p>13.1.1 根据页面类型分离文件</p> <p>13.1.2 根据功能模块分离文件</p> <p>13.1.3 根据标签类型分离文件</p> <p>13.1.4 根据设备类型分离文件</p> <p>13.1.5 根据代码规模分离文件</p> <p>13.2 规则组织</p> <p>13.3 属性组织</p> <p>13.3.1 按字母顺序组织</p> <p>13.3.2 按主次关系组织</p> <p>13.3.3 按优先定义组织</p> <p>13.4 CSS命名艺术</p> <p>13.4.1 经典命名三法</p> <p>13.4.2 CSS命名规则</p> <p>13.4.3 CSS命名方法</p> <p>13.5 CSS代码缩写</p> <p>13.5.1 盒模型代码简写</p> <p>13.5.2 列表和背景缩写</p> <p>13.5.3 颜色值缩写</p> <p>13.5.4 字体缩写</p> <p>13.6 CSS代码格式</p> <p>13.6.1 CSS代码常用格式</p> <p>13.6.2 CSS代码格式工具</p> <p>13.7 CSS代码注释</p> <p>13.7.1 写好注释</p> <p>13.7.2 预防Bug</p> <p>13.7.3 CSS注释清除</p> <p>13.8 CSS代码优化</p> <p>13.8.1 利用继承性优化代码</p> <p>13.8.2 利用默认值优化代码</p> <p>13.8.3 利用公共类优化代码</p> <p>13.8.4 利用选择符分组优化代码</p> <p>13.8.5 利用层叠覆盖优化代码</p> <p> </p> <p>第14章 CSS3动画</p> <p> 视频讲解:72分钟</p> <p>14.1 认识Transform</p> <p>14.2 2D变形</p> <p>14.2.1 旋转</p> <p>14.2.2 缩放</p> <p>14.2.3 移动</p> <p>14.2.4 倾斜</p> <p>14.2.5 矩阵</p> <p>14.2.6 案例:设计挂图</p> <p>14.2.7 定义变形原点</p> <p>14.2.8 案例:渐变变形</p> <p>14.3 3D变形</p> <p>14.3.1 位移</p> <p>14.3.2 缩放</p> <p>14.3.3 旋转</p> <p>14.3.4 矩阵</p> <p>14.3.5 倾斜</p> <p>14.3.6 案例:设计旋转的盒子</p> <p>14.3.7 案例:设计翻转广告牌</p> <p>14.4 过渡动画</p> <p>14.4.1 定义过渡属性</p> <p>14.4.2 定义过渡时间</p> <p>14.4.3 定义延迟</p> <p>14.4.4 定义过渡效果</p> <p>14.4.5 定义触发方式</p> <p>14.4.6 定义硬件加速</p> <p>14.4.7 案例:设计导航</p> <p>14.5 运动动画</p> <p>14.5.1 定义关键帧</p> <p>14.5.2 定义动画名称</p> <p>14.5.3 定义动画时间</p> <p>14.5.4 定义播放方式</p> <p>14.5.5 定义延迟时间</p> <p>14.5.6 定义播放次数</p> <p>14.5.7 定义播放方向</p> <p>14.5.8 定义播放状态</p> <p>14.5.9 定义播放外状态</p> <p>14.5.10 案例:设计翻转**</p> <p>14.5.11 案例:设计滑动的文字</p> <p>14.6 案例实战</p> <p>14.6.1 设计3D盒子</p> <p>14.6.2 设计可折叠面板</p> <p>14.6.3 设计滑动的DVD</p> <p>14.6.4 设计多级菜单</p> <p> </p> <p>第15章 CSS框架—Bootstrap</p> <p> 视频讲解:25分钟</p> <p>15.1 Bootstrap概述</p> <p>15.1.1 Bootstrap发展历史</p> <p>15.1.2 Bootstrap构成模块</p> <p>15.1.3 Bootstrap主要特色</p> <p>15.1.4 Bootstrap版本变迁</p> <p>15.1.5 比较Bootstrap 2和Bootstrap 3</p> <p>15.1.6 如何从Bootstrap 2升级到Bootstrap 3</p> <p>15.1.7 浏览器支持</p> <p>15.2 下载和定制Bootstrap 3</p> <p>15.2.1 下载Bootstrap 3</p> <p>15.2.2 定制Bootstrap 3</p> <p>15.3 Bootstrap 3结构</p> <p>15.3.1 源码版Bootstrap 3文件结构</p> <p>15.3.2 编译版Bootstrap文件结构</p> <p>15.4 安装Bootstrap 3</p> <p>15.4.1 本地安装</p> <p>15.4.2 在线安装</p> <p>15.5 案例:使用Bootstrap 3</p> <p>15.5.1 设计Bootstrap 3文档模板</p> <p>15.5.2 设计交互组件</p> <p>15.5.3 设计页面版式</p> <p> </p> <p>第16章 使用Bootstrap 3优化CSS</p> <p> 视频讲解:51分钟</p> <p>16.1 页面排版优化</p> <p>16.1.1 标题和字体风格</p> <p>16.1.2 文本强调风格</p> <p>16.1.3 文本对齐风格</p> <p>16.1.4 缩略语风格</p> <p>16.1.5 地址风格</p> <p>16.1.6 引用风格</p> <p>16.1.7 列表风格</p> <p>16.1.8 代码风格</p> <p>16.2 表格优化</p> <p>16.2.1 优化表格结构</p> <p>16.2.2 默认风格</p> <p>16.2.3 表格个性风格</p> <p>16.2.4 表格行风格</p> <p>16.2.5 响应式表格</p> <p>16.3 表单优化</p> <p>16.3.1 Bootstrap 3支持的表单控件</p> <p>16.3.2 默认风格</p> <p>16.3.3 布局风格</p> <p>16.3.4 外观风格</p> <p>16.3.5 状态风格</p> <p>16.4 按钮风格</p> <p>16.4.1 默认风格</p> <p>16.4.2 定制风格</p> <p>16.4.3 状态风格</p> <p>16.5 图片风格</p> <p>16.6 使用工具类</p> <p>16.6.1 小工具类</p> <p>16.6.2 响应式工具</p> <p> </p> <p>第17章 Bootstrap 3应用实战</p> <p> 视频讲解:92分钟</p> <p>17.1 下拉菜单</p> <p>17.1.1 快速体验交互组件</p> <p>17.1.2 设计下拉菜单</p> <p>17.1.3 设置下拉菜单选项</p> <p>17.2 按钮组</p> <p>17.2.1 设计按钮组</p> <p>17.2.2 设计按钮导航条</p> <p>17.2.3 设计按钮布局和样式</p> <p>17.3 按钮式下拉菜单</p> <p>17.3.1 设计按钮式下拉菜单</p> <p>17.3.2 设计分隔样式</p> <p>17.3.3 设计按钮式下拉菜单布局</p> <p>17.4 导航</p> <p>17.4.1 设计导航组件</p> <p>17.4.2 设置导航选项</p> <p>17.4.3 绑定导航和下拉菜单</p> <p>17.4.4 激活标签页</p> <p>17.5 导航条</p> <p>17.5.1 设计导航条</p> <p>17.5.2 绑定对象</p> <p>17.5.3 导航条布局</p> <p>17.6 面包屑和分页</p> <p>17.6.1 设计面包屑</p> <p>17.6.2 设计分页组件</p> <p>17.6.3 设置分页选项</p> <p>17.6.4 设计翻页组件</p> <p>17.7 标签与徽章</p> <p>17.8 缩略图</p> <p>17.8.1 关于图像占位符</p> <p>17.8.2 设计缩略图</p> <p>17.9 警告框</p> <p>17.9.1 设计警告框</p> <p>17.9.2 添加关闭按钮</p> <p>17.9.3 添加链接</p> <p>17.10 进度条</p> <p>17.10.1 设计进度条</p> <p>17.10.2 设置个性进度条</p> <p>17.11 媒体</p> <p>17.11.1 媒体版式</p> <p>17.11.2 媒体列表</p> <p>17.12 版式</p> <p>17.12.1 大屏幕区块</p> <p>17.12.2 页面标题</p> <p>17.12.3 列表组</p> <p>17.12.4 面板</p> <p>17.12.5 Well</p> <p>17.13 输入框</p> <p>17.13.1 缀饰文本框</p> <p>17.13.2 设计尺寸</p> <p>17.13.3 按钮文本框</p> <p>17.13.4 按钮式下拉菜单</p> <p>17.13.5 分段按钮下拉菜单</p> <p>17.14 字体图标</p> <p> </p> <p>第18章 CSS栅格系统</p> <p> 视频讲解:22分钟</p> <p>18.1 栅格系统概述</p> <p>18.1.1 栅格系统基础</p> <p>18.1.2 设计栅格系统</p> <p>18.1.3 栅格系统应用优势</p> <p>18.2 Bootstrap栅格系统</p> <p>18.3 案例实战</p> <p>18.3.1 设备类型</p> <p>18.3.2 设备优先化栅格</p> <p>18.3.3 固定栅格和流式栅格</p> <p>18.3.4 栅格堆叠和水平排列</p> <p>18.3.5 列偏移</p> <p>18.3.6 列嵌套</p> <p>18.3.7 列排序</p> <p> </p> <p>第19章 CSS响应式设计</p> <p> 视频讲解:28分钟</p> <p>19.1 响应式设计概述</p> <p>19.1.1 响应式设计缘起</p> <p>19.1.2 响应式设计流程</p> <p>19.2 设计响应式图片</p> <p>19.3 定义设备类型</p> <p>19.3.1 Media Queries模块概述</p> <p>19.3.2 认识@media规则</p> <p>19.3.3 使用@media规则</p> <p>19.3.4 案例:设计响应式页面</p> <p>19.4 设计响应式布局</p> <p>19.5 自适应显隐控制</p> <p>19.6 综合案例:设计响应式页面</p> <p> </p> <p>第20章 CSS动态样式</p> <p>20.1 认识LESS</p> <p>20.1.1 LESS概述</p> <p>20.1.2 LESS优势</p> <p>20.1.3 LESS参考和工具</p> <p>20.2 如何使用LESS</p> <p>20.2.1 在客户端使用LESS</p> <p>20.2.2 在服务器端使用LESS</p> <p>20.3 LESS组成</p> <p>20.3.1 LESS基本特性</p> <p>20.3.2 LESS主要功能</p> <p>20.3.3 比较LESS和SASS</p> <p>20.4 LESS动态语法</p> <p>20.4.1 变量</p> <p>20.4.2 混合</p> <p>20.4.3 参数混合</p> <p>20.4.4 模式匹配</p> <p>20.4.5 条件表达式</p> <p>20.4.6 嵌套规则</p> <p>20.4.7 运算</p> <p>20.4.8 Color函数</p> <p>20.4.9 Math函数</p> <p>20.4.10 作用域</p> <p>20.4.11 命名空间</p> <p>20.4.12 注释</p> <p>20.4.13 导入</p> <p>20.4.14 字符串插值</p> <p>20.4.15 转义字符</p> <p>20.4.16 JavaScript表达式</p> <p>20.5 综合案例:在Bootstrap 3中使用LESS</p> <p> </p> <p>第21章 企业&公司类型网站</p> <p> 视频讲解:48分钟</p> <p>21.1 产品策划</p> <p>21.2 设计图</p> <p>21.3 切图</p> <p>21.4 网站重构</p> <p>21.5 网站布局</p> <p> </p> <p>第22章 旅游休闲类型网站</p> <p> 视频讲解:47分钟</p> <p>22.1 产品策划</p> <p>22.2 设计图</p> <p>22.3 切图</p> <p>22.4 网站重构</p> <p>22.5 网站布局</p> <p> </p> <p>第23章 时尚娱乐类型网站</p> <p> 视频讲解:35分钟</p> <p>23.1 产品策划</p> <p>23.2 设计图</p> <p>23.3 切图</p> <p>23.4 网站重构</p> <p>23.5 网站布局</p> <p> </p> <p>第24章 新闻咨询类型网站</p> <p> 视频讲解:55分钟</p> <p>24.1 产品策划</p> <p>24.2 设计图</p> <p>24.3 切图</p> <p>24.4 网站重构</p> <p>24.5 网站布局</p>显示全部信息前 言前 言:

CSS作为Web标准的一部分,已经成为现代网页设计中必不可少的基本语言。CSS3是在CSS2.1基础上扩展而来,可以说是众望所归,这也是技术革新的必然趋势。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断地进行着,众多浏览器厂商也在不断加快对CSS3新特性的支持。
到目前为止,CSS3还没有一套成熟的规范,其中的模块也在不断更新,特别是浏览器对CSS3特性的支持也在不断变化,同时没有足够的时间去学习和研究W3C官方文档和规范,致使我们学习CSS3变得更为困难。CSS看似简单,但真正精通CSS绝非易事。在使用CSS开发网站时,会遇到形形色色的浏览器Bug和不一致问题,而解决方案又五花八门,往往让使用者感觉千头万绪,不知从何着手。
本书将详细介绍各种有用的CSS技术,总结了CSS设计中的*佳实践,讨论了解决各种实际问题的技术。帮助***更好地掌握CSS3的特性,并且将新技术运用到实际的开发中,提高自己开发Web程序的水平。<p><b>前</b><b> </b><b>言:</b><b> </b></p> <p><b> </b></p> <p> CSS作为Web标准的一部分,已经成为现代网页设计中必不可少的基本语言。CSS3是在CSS2.1基础上扩展而来,可以说是众望所归,这也是技术革新的必然趋势。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断地进行着,众多浏览器厂商也在不断加快对CSS3新特性的支持。</p> <p> 到目前为止,CSS3还没有一套成熟的规范,其中的模块也在不断更新,特别是浏览器对CSS3特性的支持也在不断变化,同时没有足够的时间去学习和研究W<st1:chmetcnv unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</st1:chmetcnv>官方文档和规范,致使我们学习CSS3变得更为困难。CSS看似简单,但真正精通CSS绝非易事。在使用CSS开发网站时,会遇到形形色色的浏览器Bug和不一致问题,而解决方案又五花八门,往往让使用者感觉千头万绪,不知从何着手。</p> <p> 本书将详细介绍各种有用的CSS技术,总结了CSS设计中的*佳实践,讨论了解决各种实际问题的技术。帮助***更好地掌握CSS3的特性,并且将新技术运用到实际的开发中,提高自己开发Web程序的水平。</p> <h3>本书特色</h3> <p class="a"> 系统的基础知识</p> <p> 本书系统地讲解了CSS层叠样式表技术在网页设计中各个方面应用的知识,从为什么要用CSS开始讲解,循序渐进,配合大量实例,帮助读者奠定坚实的理论基础,做到知其所以然。 </p> <p class="a"> 大量的案例实战</p> <p> 书中设置大量应用实例,**强调具体技术的灵活应用,并且全书结合了作者长期的网页设计制作和教学经验,使读者真正做到学以致用。</p> <p class="a"> 深入解剖CSS布局</p> <p> 本书用相当多的篇幅**介绍了使用CSS进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS*核心的应用技术。</p> <p class="a"> **混合应用技术</p> <p> 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合,因此本书还特别讲解了CSS与JavaScript、Ajax和XML的混合应用,详细讲解了CSS3中的热点技术和应用,这些都是*新的Web技术,使读者掌握**的网页制作能力。</p> <p class="a"> 精选综合实例 </p> <p> 在本书的*后部分,还精选了4个常见类型的网页综合实例,包括企业网站、新闻网站、旅游网站、时尚网站等,帮助读者总结前面所学知识,综合应用各种技术、方法和技巧,提高读者综合应用的能力。</p> <p class="a"> 超值多媒体教学,海量资源赠送</p> <p> 本书所附光盘的内容为书中介绍的范例的同步视频讲解、源文件及大量参考素材,供读者学习时参考和对照使用。扫描图书封底的二维码,可在手机中在线学习教学视频。</p> <h3>本书内容</h3> <p> 本书共24章,具体结构划分如下。 </p> <p> 第1部分:CSS基础知识部分,包括第1章~第13章。这部分内容主要介绍了CSS的相关基础知识,包括CSS语言基础、字体和文本样式、图片样式、背景图像样式、列表样式、表格样式、表单样式、超链接样式、DIV CSS网页排版、CSS定位与网页布局、CSS常见问题与解决。 </p> <p> 第2部分:CSS3及其扩展应用,包括第14章~第20章。这部分内容主要介绍了CSS3的新特性,以及使用*新CSS3拓展技术解决复杂的网页设计问题,包括CSS动画、CSS框架、Bootstrap扩展、CSS栅格系统、响应式设计、动态样式等。</p> <p> 第3部分:典型实例,包括第21章~第24章。这部分内容主要通过对4个各具特色的网站制作过程的讲解,由浅入深地介绍了如何将层布局与层叠样式表相结合来完成不同的网页效果。即使是初学者也可以轻松掌握DIV CSS布局方式,制作出精美的网页并搭建功能强大的网站。 </p> <h3>本书读者</h3> <p class="a"> 希望系统学习网页设计、网站制作的初学者和进阶者。</p> <p class="a"><b> ·</b>从事网页设计制作和网站建设的专业人士。</p> <p class="a"><b> ·</b>各大、中专院校相关专业的老师、学生。</p> <p class="a"><b> ·</b>相关培训机构的学员。</p> <h3>本书约定</h3> <p> 为了方便阅读,本书使用了下面几个约定:</p> <p class="a"><b> ·</b>W<st1:chmetcnv unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</st1:chmetcnv>表示万维网联盟(World Wide Web Consortium),是制定Web官方标准和规范(如CSS3)的组织。 </p> <p class="a"><b> ·</b>初始值(即默认值)是用户不显示声明时元素所具有的属性值。需特别指明的是,属性是元素的本质,而不是用户自定义的属性。 </p> <p class="a"><b> ·</b>HTML指HTML和XHTML这两种语言。 </p> <p class="a"><b> ·</b>除非特别声明,CSS是指CSS2.1规范。 </p> <p class="a"><b> ·</b>IE 6及更低版本指Windows的IE 5.0~6.0。 </p> <p class="a"><b> ·</b>IE 8及以下版本代表IE 8、IE 7和IE 6。 </p> <p class="a"><b> ·</b>现代浏览器或标准浏览器是指*新版的Firefox、Safari、Opera、IE 7以及IE 7以上版本。 </p> <p class="a"><b> ·</b>Webkit引擎的浏览器是指Safari(包括移动版本和桌面版本)、Google Chrome和其他近期使用版本的Webkit页面渲染引擎的浏览器,其私有属性的前缀是-webkit-。</p> <p class="a"><b> G</b>ecko引擎的浏览器是指Mozilla,常指的是Firefox浏览器,其私有属性的前缀是-moz-。</p> <p class="a"><b> ·</b>Presto引擎的浏览器是指Opera,其私有属性的前缀是-o-。 </p> <p class="a"><b> ·</b>KHTML引擎的浏览器是指Konqueror,其私有属性的前缀是-khtml-。 </p> <p class="a"><b> ·</b>Trident引擎的浏览器是指Internet Explorer,其私有属性的前缀是-ms-。 </p> <p class="a"><b> ·</b>在没有特别声明的情况下,本书所指的浏览器仅适用于Windows系统,不适用于Mac系统和移动端。 </p> <p class="a"><b> ·</b>所有浏览器仅代表目前所有广泛使用的浏览器,而非字面意义所涵盖的那些可能仅占零星市场份额的不知名的浏览器。 </p> <p> 本书所有HTML示例都应该嵌套在一个有效文档的<body>标签中,同时,CSS包含在内部或外部样式表中。偶尔为了尽量简短,HTML和CSS放在了同一个代码示例中。但是在真实的文档中,这些代码需要放在各自的位置上才能正常工作。 </p> <p> 对于包含重复内容的HTML示例,本书可能不会列出每一行,而是适时地使用省略号表示部分代码,详细代码需要参阅本书光盘示例。</p> <p> 为了给读者提供更多的学习资源,同时弥补本书篇幅有限的遗憾,本书提供了很多参考链接,许多本书无法详细介绍的问题都可以通过这些链接找到答案。由于这些链接地址会因时间而有所变动或调整,所以在此说明,这些链接地址仅供参考,本书无法保证所有地址是长期有效的。 </p> <p> 本书所列出的插图可能与读者实际环境中的操作界面有所差别,这可能是由于操作系统平台、浏览器版本等不同而引起的,在此特别说明,读者应该以实际情况为准。 </p> <p> 本书实例设计图都是在Photoshop CC中设计制作,在学习本书实例之前需要安装Photoshop CC,如果要查看本书源代码,建议使用Dreamweaver CC。</p> <p> 本书所有案例代码都是在HTML5类型的文档中编写的。但这仅表示使用短小精悍的HTML5文档声明(!DOCTYPE html),没有使用任何HTML5的新标签,如section、header、nav和article,所以页面可以在IE 8及以下版本正常运行,可以在自己的页面中将其更换为喜欢的标签。所有示例也同样兼容HTML 4.01和XHTML 1.0。 </p> <p> 由于CSS3技术还在不断地完善与更新中,建议根据本书提供的参考地址,获取有关CSS3的*新信息与更新。 </p> <p> </p> <p align="right">编 者 </p> <p align="right"> </p> <p> </p> <p><b> </b></p>显示全部信息免费在线读13.1 CSS文档统筹
构建CSS系统的**步是要规划好CSS文件结构。一般网站CSS样式文件会被分为主文件和分类文件,在CSS主文件中可以定义所有页面公共属性,如网站默认字体、链接、页眉、页脚和公共类等,同时还会包含各种被分离的CSS文件链接。下面介绍如何合理地分离样式表文件,实现科学分类并优化CSS文件。
13.1.1 根据页面类型分离文件这种思路是根据不同类型页面分离CSS样式表文件。例如,根据网站的首页、频道页面和详细页设计不同的样式表文件。这样每个页面都会有属于自己的CSS文件。当网站页面类型比较单纯,显示样式又比较统一时,选择这种方案非常理想,它简单明了、行之有效,如一些企业网站就比较适合,基本上用几个网页模板就可以实现网站的整体建设。
当页面结构比较复杂、页面类型不统一时,例如每个频道页的样式都不尽相同,频道页、详细页显示效果千变万化,使用这种思路分离CSS文件就会很麻烦。
þ 解决途经
把不同的页面公共样式存放在主样式表文件中,然后分别为不同页面定义属于自己的样式表文件,虽然这不是*佳方案,但却比较适用。
þ 存在风险
如果网站系统庞大,这种解决途经会存在一定风险,因为系统庞大,公共样式必定很多,把如此多的样式都放在CSS主文件中,会造成主文件非常庞大,违背了CSS文件分离的初衷,当页面被加载时,会下载很多用不上的样式代码。
同时在不同类型的页面内分别编写代码,CSS文件中各放一份样式代码,也容易产生代码冗余,对后期维护不利。
13.1.2 根据功能模块分离文件 这种思路是根据页面中不同模块来分离CSS文件。例如,根据页眉、页脚、导航条、功能块、新闻块等分别设计不同的CSS文件,这样就可以根据页面模块组成分别导入不同的样式表文件,这个方法比较简单,编写的代码会很干净,导入文件时有的放矢,下载速度比较块。
但这种方法也会产生很多个很小的CSS文件。例如,导航条可能只需要十几行CSS代码,这样单**建一个样式表会显得有点多余。而且每个页面可能包含很多模块,这样就导致每个页面都包含一堆CSS文件,给管理带来一定麻烦。
13.1.3 根据标签类型分离文件这种思路是根据HTML标签的不同类型来分离CSS文件。例如,把与Form表单相关的样式代码放在一个文件中,把与a相关的链接样式放在另一个文件中,如此等等。

第1章 CSS3设计概述
视频讲解:36分钟
1.1 认识CSS
1.1.1 CSS的发展历史
1.1.2 CSS页面优势
1.1.3 CSS在国内的早期实践
1.2 认识Web标准
1.2.1 网页结构
1.2.2 网页表现
1.2.3 网页行为
1.3 案例:初次体验CSS
1.4 CSS3简介
1.4.1 CSS3模块
1.4.2 CSS3新特性

“网络开发视频大讲堂”丛书系清华社“视频大讲堂”**大系之一。该大系包括多个子系列,每个子系列的图书在其同品种的图书中销售名列前茅,其中: 4个品种荣获“全行业畅销品种” 1个品种荣获2012年清华大学出版社“专业**书”一等奖 绝大多数品种在“计算机零售图书排行榜”同品种排行中名列前茅 截至目前该大系累计销售超过55万册 该大系已成为近年来清华社计算机专业基础类零售图书**的品牌之一 “网络开发视频大讲堂”系列作为清华社“视频大讲堂”大系的子系列之一,继承和创新了清华社“视频大讲堂”大系的编写模式、写作风格和优良品质。本书突出了以下内容: 322节大型高清同步视频演示讲解,可反复观摩,让学习更为快捷、** 83个典型中小实例,通过实例学习更深入,更有趣,更有动力 4个综合实战案例,展现工作过程,积累工作经验 ★实用网页模板380套,网页配色辞典1部,协调色配色参考7套,网页色彩搭配图43张,不同色系实物配色卡540张,实用配色参考18部,网页设计素材13类 ★PS分层模板10套,PS样式8类,PS滤镜46个,PS渐变样式6类,PS笔刷样式9类,PS填充图案5类,PS字体集合1000个 ★HTML工具集6部,CSS工具集8部,JavaScript工具集16部,PS帮助手册1部 ★HTML应用案例360个,CSS3应用案例510个,JavaScript jQuery应用案例900个,网页交互设计案例1000个 ★Web前端开发规范手册1部,JavaScript知识点思维导图10张,HTML CSS面试题351道,JavaScript面试题685道,网页欣赏