作品简介

基于“响应式内容”的本质,页面应该在任何合理屏幕大小的设备上看上去都很舒服,我们做设计的就应该站在用户的角度考虑,一切设计都应该看上去很美、很实用。本书的响应式设计正是基于这一理念,从小到一个图标,大到完整的页面布局,都从响应式UI设计入手,适合所有响应式设计的入门人员和中小企业的网站搭建人员学习。

杨旺功,男,毕业于重庆邮电大学,硕士。现任北京印刷学院设计艺术学院教师,主要研究方向是信息与交互设计产品创新设计,具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。在数字化艺术与设计领域成果显著,发表多篇数字化艺术与设计的论文,对信息与交互设计有深入的研究。

赵荣娇,女,毕业于中国传媒大学,硕士。中国传媒大学新媒体研究院主办《信息科技周刊》总编辑,《新媒体技术动态》发起人。目前就职于阿里去啊,担任前端开发工程师,曾参与旅游特卖首页、1688订单等项目开发。热爱技术,喜欢分享。

作品目录

  • 前言
  • 第1章 传说中的响应式设计
  • 1.1 支持跨平台设备的响应式设计
  • 1.1.1 什么样的设计是响应式的
  • 1.1.2 响应式设计坚守的4大原则
  • 1.2 响应式设计与其他页面设计的对比
  • 1.2.1 固定布局
  • 1.2.2 流式布局
  • 1.3 实战:创建一个响应式网页
  • 1.3.1 设置HTML文档的Meta标签
  • 1.3.2 设计HTML文档结构
  • 1.3.3 使用CSS 3媒介查询
  • 1.3.4 运行第一个响应式页面
  • 1.4 小结
  • 第2章 响应式网页中的元素
  • 2.1 文字
  • 2.2 表单
  • 2.2.1 自定义Radiobox
  • 2.2.2 自定义Checkbox动画
  • 2.2.3 美化输入框
  • 2.2.4 下拉框
  • 2.3 框架
  • 2.3.1 传统的iFrame框架
  • 2.3.2 响应式的iFrame框架
  • 2.4 实战:实现一个响应式登录表单
  • 2.4.1 设置登录表单的HTML结构
  • 2.4.2 设计登录表单的通用样式
  • 2.4.3 使用CSS 3媒介查询实现响应式登录表单
  • 2.5 小结
  • 第3章 响应式布局
  • 3.1 布局切换
  • 3.2 侧边栏
  • 3.3 宽高等比例变化
  • 3.4 列表
  • 3.4.1 定义列表分级菜单
  • 3.4.2 列表切换效果
  • 3.5 表格
  • 3.5.1 简单自适应表格
  • 3.5.2 翻转滚动表格
  • 3.5.3 隐藏表格栏目
  • 3.6 实战:响应式商品展示列表
  • 3.7 小结
  • 第4章 响应式导航
  • 4.1 响应式导航菜单设计五大原则
  • 4.1.1 按照优先级显示内容
  • 4.1.2 用创造力来处理有限的空间
  • 4.1.3 下拉菜单
  • 4.1.4 给导航菜单换位置
  • 4.1.5 放弃导航菜单
  • 4.2 导航类型
  • 4.2.1 单层导航
  • 4.2.2 多层导航
  • 4.2.3 面包屑导航
  • 4.3 页码设计
  • 4.4 小结
  • 第5章 响应式多媒体
  • 5.1 图标的响应式
  • 5.2 图像
  • 5.2.1 可适配的图像
  • 5.2.2 图像网格
  • 5.3 视频
  • 5.3.1 内嵌视频响应式的难点
  • 5.3.2 从其他网站中手动嵌入视频
  • 5.4 响应式图表
  • 5.4.1 一款响应式图表库
  • 5.4.2 带Tooltip提示的线形图
  • 5.4.3 简单的饼图
  • 5.5 小结
  • 第6章 Bootstrap入门
  • 6.1 初次接触Bootstrap
  • 6.1.1 Bootstrap的优势
  • 6.1.2 下载Bootstrap
  • 6.2 在网站中引入Bootstrap
  • 6.3 调用Bootstrap的样式
  • 6.4 调用Bootstrap的组件
  • 6.5 调用Bootstrap的js特效
  • 6.6 实战:一个Bootstrap实现的响应式页面V1.0
  • 6.7 小结
  • 第7章 Bootstrap的样式设计
  • 7.1 字体
  • 7.1.1 标题
  • 7.1.2 全局字体和段落
  • 7.2 表格
  • 7.2.1 基本用法
  • 7.2.2 表格的附加样式
  • 7.2.3 为表格行或单元格添加状态标识
  • 7.2.4 响应式表格
  • 7.3 表单
  • 7.4 按钮
  • 7.4.1 按钮的基本样式
  • 7.4.2 调节按钮大小
  • 7.4.3 块级按钮
  • 7.4.4 为按钮设置不可点击样式
  • 7.5 图片
  • 7.5.1 图片类
  • 7.5.2 响应式图片
  • 7.6 Bootstrap工具类
  • 7.6.1 响应式工具 
  • 7.6.2 工具类
  • 7.7 实战:Bootstrap响应式页面V2.0
  • 7.8 小结
  • 第8章 Bootstrap的组件设计
  • 8.1 下拉菜单
  • 8.2 按钮组
  • 8.2.1 垂直排列的按钮组
  • 8.2.2 两端对齐的按钮组
  • 8.2.3 嵌套按钮组
  • 8.3 input控件组
  • 8.3.1 最常见的搜索框
  • 8.3.2 带提示的搜索框
  • 8.4 导航
  • 8.4.1 胶囊式导航
  • 8.4.2 面包屑导航
  • 8.4.3 头部导航
  • 8.5 列表组
  • 8.6 分页
  • 8.6.1 普通的分页
  • 8.6.2 上一页/下一页
  • 8.7 标签
  • 8.8 面板
  • 8.9 进度条
  • 8.10 缩略图
  • 8.11 实战:Bootstrap响应式页面V3.0
  • 8.12 小结
  • 第9章 Bootstrap的特效设计
  • 9.1 模态对话框
  • 9.2 标签页切换
  • 9.3 Tootip
  • 9.4 弹出框
  • 9.5 折叠
  • 9.6 幻灯片
  • 9.7 实战:Bootstrap响应式页面V4.0
  • 9.8 小结
  • 第10章 使用Bootstrap实现一个百度贴吧后台
  • 10.1 确定后台管理的需求
  • 10.2 设计页面布局
  • 10.2.1 引入Bootstrap 3框架
  • 10.2.2 实现页面布局代码
  • 10.3 设计导航栏
  • 10.3.1 构建导航的整体架构
  • 10.3.2 设计标题和导航链接
  • 10.3.3 实现搜索框和通知系统
  • 10.3.4 实现管理员的登录信息
  • 10.3.5 构建响应式导航
  • 10.4 设计左侧边栏
  • 10.5 设计主功能部分
  • 10.5.1 主功能的头部
  • 10.5.2 主功能的帖子列表
  • 10.6 小结
  • 第11章 使用HTML 5设计扁平化的公司主页
  • 11.1 响应式设计的关键
  • 11.2 导航栏的设计
  • 11.2.1 列表的实现
  • 11.2.2 弹出式菜单的实现
  • 11.3 主功能部分的设计
  • 11.3.1 什么是视差滚动效果
  • 11.3.2 视差效果的实现
  • 11.3.3 图文列表的实现
  • 11.4 小结
  • 附录 CSS 3选择器使用一览
  • f1.1 标签选择器
  • f1.2 类选择器
  • f1.3 id选择器
  • f1.4 通配符选择器
  • f1.5 子元素选择器
  • f1.6 后代元素选择器
  • f1.7 相邻元素选择器
  • f1.8 属性选择器
  • f1.9 组选择器
  • f1.10 复合选择器
  • f1.11 结构化伪类
  • f1.12 目标伪类:target
  • f1.13 状态伪类
  • f1.14 否定伪类:not(S)
展开全部