Div+CSS 网页样式与布局从入门到精通

Div+CSS 网页样式与布局从入门到精通

暂无评价综合评分的显示会考虑用户真实性等多项因素,每部作品出现综合评分的时间不定。

作品简介

全书分为 16 章,内容包括:网站设计基础知识;HTML5基础知识;CSS基本语法知识;CSS选择器;使用CSS设置文本和段落样式、设置图片样式、控制列表样式、设计表单样式、表格样式、定义链接样式;CSS滤镜;认识盒模型、外边距、内边距、边框;CSS布局理念;绝对定位、固定定位、相对定位、浮动定位和常见布局类型;CSS3新增功能;JavaScript概述、基本语法、程序语句;JavaScript事件;JavaScript浏览器的内部对象;企业网站和移动网站的制作过程实战。

作者:刘西杰 夏晨。

作品目录

  1. Div+CSS 网页样式与布局从入门到精通
  2. 前言
  3. 第1章 怎样开发设计网站
  4. 1.1 网站开发设计需要什么
  5. 1.1.1 需要HTML文件
  6. 1.1.2 需要Div来布局
  7. 1.1.3 需要CSS来定义样式
  8. 1.1.4 需要JavaScript
  9. 1.2 通过Dreamweaver开发Div+CSS
  10. 1.2.1 通过Dreamweaver在HTML页面里插入Div
  11. 1.2.2 Dreamweaver的CSS代码支持
  12. 1.3 一个简单的网页需要包含什么
  13. 1.3.1 head部分
  14. 1.3.2 body部分
  15. 1.3.3 编写注释
  16. 第2章 HTML入门基础
  17. 2.1 HTML 标签
  18. 2.1.1 段落标签
  19. 2.1.2 文本标签
  20. 2.1.3 超链接标签
  21. 2.1.4 图像标签
  22. 2.1.5 表格标签
  23. 2.2 HTML5简介
  24. 2.2.1 HTML5基础
  25. 2.2.2 向后兼容
  26. 2.2.3 更加简化
  27. 2.2.4 HTML 5语法中的3个要点
  28. 2.3 新增的主体结构元素
  29. 2.3.1 实例应用——article元素
  30. 2.3.2 实例应用——section元素
  31. 2.3.3 实例应用——nav元素
  32. 2.3.4 aside元素
  33. 2.4 新增的非主体结构元素
  34. 2.4.1 实例应用——header元素
  35. 2.4.2 实例应用——hgroup元素
  36. 2.4.3 实例应用——footer元素
  37. 2.4.4 实例应用——address元素
  38. 第3章 CSS样式设计基础
  39. 3.1 初识CSS
  40. 3.1.1 CSS基本语法
  41. 3.1.2 添加CSS的方法
  42. 3.1.3 设计第一个实例
  43. 3.2 CSS选择器
  44. 3.2.1 CSS选择器概述
  45. 3.2.2 标签选择器
  46. 3.2.3 类选择器
  47. 3.2.4 ID选择器
  48. 3.2.5 伪类选择器和伪元素
  49. 3.2.6 群组选择器
  50. 3.2.7 相邻选择器
  51. 3.2.8 通用选择器
  52. 3.3 CSS属性和属性值
  53. 3.3.1 CSS属性
  54. 3.3.2 CSS单位
  55. 3.3.3 设置颜色
  56. 第4章 使用CSS设置文本和段落样式
  57. 4.1 字体属性
  58. 4.1.1 字体font-family
  59. 4.1.2 字号font-size
  60. 4.1.3 字体风格font-style
  61. 4.1.4 字体加粗font-weight
  62. 4.1.5 字体变形font-variant
  63. 4.2 段落属性
  64. 4.2.1 单词间隔word-spacing
  65. 4.2.2 字符间隔letter-spacing
  66. 4.2.3 文字修饰text-decoration
  67. 4.2.4 垂直对齐方式vertical-align
  68. 4.2.5 文本转换text-transform
  69. 4.2.6 水平对齐方式text-align
  70. 4.2.7 文本缩进text-indent
  71. 4.2.8 文本行高line-height
  72. 4.2.9 处理空白white-space
  73. 4.2.10 文本反排unicode-bidi、direction
  74. 4.3 实例应用
  75. 4.3.1 控制文本的行高和间隔
  76. 4.3.2 实现文本垂直居中
  77. 第5章 使用CSS设置图片和背景样式
  78. 5.1 图片样式设置
  79. 5.1.1 定义图片边框
  80. 5.1.2 文字环绕图片
  81. 5.2 背景样式设置
  82. 5.2.1 设置页面背景颜色
  83. 5.2.2 定义背景图片
  84. 5.2.3 背景图片的重复
  85. 5.2.4 背景关联
  86. 5.2.5 定义背景图片的位置
  87. 5.3 实例应用
  88. 5.3.1 鼠标经过图片显示文字
  89. 5.3.2 鼠标移上改变图片透明度
  90. 5.3.3 将正方形图片显示为圆形图片
  91. 5.3.4 多图排列展示放大特效
  92. 第6章 使用CSS控制列表样式
  93. 6.1 有序列表
  94. 6.1.1 有序列表标签<ol>
  95. 6.1.2 有序列表的序号类型type
  96. 6.1.3 有序列表的起始数值start
  97. 6.2 无序列表
  98. 6.2.1 无序列表标签<ul>
  99. 6.2.2 无序列表的类型type
  100. 6.2.3 目录列表标签<dir>
  101. 6.2.4 定义列表标签<dl>
  102. 6.2.5 菜单列表标签<menu>
  103. 6.3 实例应用
  104. 6.3.1 设计背景变换的导航栏目
  105. 6.3.2 设计横向导航菜单
  106. 6.3.3 竖排导航
  107. 6.3.4 设计网页下拉菜单
  108. 6.3.5 商品列表分类可右侧展开详细分类
  109. 6.3.6 CSS网页导航条
  110. 第7章 使用CSS设计表单样式
  111. 7.1 表单form
  112. 7.1.1 程序提交action
  113. 7.1.2 表单名称name
  114. 7.1.3 传送方法method
  115. 7.1.4 编码方式enctype
  116. 7.1.5 目标显示方式target
  117. 7.2 插入表单对象
  118. 7.2.1 文字字段text
  119. 7.2.2 密码域password
  120. 7.2.3 单选按钮radio
  121. 7.2.4 复选框checkbox
  122. 7.2.5 普通按钮button
  123. 7.2.6 提交按钮submit
  124. 7.2.7 重置按钮reset
  125. 7.2.8 图像域image
  126. 7.2.9 隐藏域hidden
  127. 7.2.10 文件域file
  128. 7.3 菜单和列表
  129. 7.3.1 下拉菜单
  130. 7.3.2 列表项
  131. 7.4 表单样式实例
  132. 7.4.1 定义背景样式
  133. 7.4.2 设置输入文本的样式
  134. 7.4.3 下画横线代替文本框特效
  135. 7.4.4 随鼠标单击换色的输入框
  136. 7.4.5 文本框中只能输入数字
  137. 第8章 使用CSS设计表格样式
  138. 8.1 创建表格
  139. 8.1.1 表格的基本构成table、tr、td
  140. 8.1.2 设置表格的标题caption
  141. 8.2 设置表格基本属性
  142. 8.2.1 设置表格宽度width
  143. 8.2.2 设置表格高度height
  144. 8.2.3 设置表格对齐方式align
  145. 8.3 设置表格的属性
  146. 8.3.1 表格的边框宽度border
  147. 8.3.2 表格边框颜色bordercolor
  148. 8.3.3 设置表格阴影
  149. 8.3.4 设置表格的渐变背景
  150. 8.4 实例应用
  151. 8.4.1 变换背景色的表格
  152. 8.4.2 表格隔行换色特效
  153. 8.4.3 dl dt dd实现表格布局
  154. 8.4.4 鼠标经过时改变表格行的颜色
  155. 8.4.5 CSS用虚线美化表格的边框
  156. 第9章 使用CSS定义链接样式
  157. 9.1 链接样式设置基础
  158. 9.1.1 光标属性cursor
  159. 9.1.2 定义下画线样式text-decoration
  160. 9.1.3 未访问过的链接a:link
  161. 9.1.4 鼠标悬停时状态a:hover
  162. 9.1.5 已访问超链接样式a:visited
  163. 9.1.6 超链接的激活样式a:active
  164. 9.2 实例应用
  165. 9.2.1 不同的鼠标显示样式
  166. 9.2.2 向链接添加不同的样式
  167. 9.2.3 按钮式超链接
  168. 9.2.4 翻转式超链接
  169. 9.2.5 设计导航菜单
  170. 第10章 CSS中的滤镜
  171. 10.1 滤镜概述
  172. 10.2 动感模糊
  173. 10.3 对颜色进行透明处理
  174. 10.4 设置阴影
  175. 10.5 对象的翻转
  176. 10.6 发光效果
  177. 10.7 X光片效果
  178. 10.8 波形滤镜
  179. 10.9 遮罩效果
  180. 第11章 Div+CSS布局入门
  181. 11.1 认识盒模型
  182. 11.2 外边距
  183. 11.2.1 上外边距margin-top
  184. 11.2.2 右外边距margin-right
  185. 11.2.3 下外边距margin-bottom
  186. 11.2.4 左外边距margin-left
  187. 11.3 内边距
  188. 11.3.1 上内边距padding-top
  189. 11.3.2 右内边距padding-right
  190. 11.3.3 下内边距padding-bottom
  191. 11.3.4 左内边距padding-left
  192. 11.4 边框
  193. 11.4.1 边框样式border-style
  194. 11.4.2 边框宽度border-width
  195. 11.4.3 边框颜色border-color
  196. 11.4.4 边框属性border
  197. 11.5 CSS 布局理念
  198. 11.5.1 将页面用Div分块
  199. 11.5.2 设计各块的位置
  200. 11.5.3 用CSS定位
  201. 第12章 用CSS定位控制网页布局
  202. 12.1 position定位
  203. 12.1.1 绝对定位absolute
  204. 12.1.2 固定定位fixed
  205. 12.1.3 相对定位relative
  206. 12.2 浮动定位
  207. 12.2.1 float属性
  208. 12.2.2 浮动布局的新问题
  209. 12.2.3 清除浮动clear
  210. 12.3 定位层叠
  211. 12.3.1 层叠顺序
  212. 12.3.2 简单嵌套元素中的层叠定位
  213. 12.3.3 包含子元素的复杂层叠定位
  214. 12.4 常见布局类型
  215. 12.4.1 一列固定宽度
  216. 12.4.2 一列宽度自适应
  217. 12.4.3 两列固定宽度
  218. 12.4.4 两列宽度自适应
  219. 12.4.5 两列右列宽度自适应
  220. 12.4.6 三列浮动中间宽度自适应
  221. 12.5 实例应用
  222. 12.5.1 带有边框和边界的图像浮动于文本右侧
  223. 12.5.2 创建水平菜单
  224. 第13章 移动网页设计基础CSS3
  225. 13.1 边框
  226. 13.1.1 圆角边框border-radius
  227. 13.1.2 边框图片border-image
  228. 13.1.3 边框阴影box-shadow
  229. 13.2 背景
  230. 13.2.1 背景图片尺寸background-size
  231. 13.2.2 背景图片定位区域background-origin
  232. 13.2.3 背景绘制区域background-clip
  233. 13.3 文本
  234. 13.3.1 文本阴影text-shadow
  235. 13.3.2 强制换行word-wrap
  236. 13.3.3 文本溢出text-overflow
  237. 13.3.4 文字描边text-stroke
  238. 13.3.5 文本填充颜色text-fill-color
  239. 13.4 多列
  240. 13.4.1 创建多列column-count
  241. 13.4.2 列的宽度column-width
  242. 13.4.3 列的间隔column-gap
  243. 13.4.4 列的规则column-rule
  244. 13.5 转换
  245. 13.5.1 移动translate()
  246. 13.5.2 旋转rotate()
  247. 13.5.3 缩放scale()
  248. 13.5.4 扭曲skew()
  249. 13.5.5 矩阵matrix()
  250. 13.6 过渡
  251. 13.7 动画
  252. 13.7.1 @keyframes规则声明动画
  253. 13.7.2 animation使用动画
  254. 13.8 用户界面
  255. 13.8.1 box sizing
  256. 13.8.2 resize
  257. 13.8.3 outline offset
  258. 13.9 实例应用
  259. 13.9.1 鼠标放上去显示全部内容
  260. 13.9.2 美观的图片排列
  261. 第14章 CSS与JavaScript应用
  262. 14.1 JavaScript概述
  263. 14.1.1 JavaScript简介
  264. 14.1.2 JavaScript放置位置
  265. 14.2 JavaScript基本语法
  266. 14.2.1 变量
  267. 14.2.2 数据类型
  268. 14.2.3 表达式和运算符
  269. 14.2.4 函数
  270. 14.2.5 注释
  271. 14.3 JavaScript程序语句
  272. 14.3.1 if…else语句
  273. 14.3.2 for语句
  274. 14.3.3 switch语句
  275. 14.3.4 while循环
  276. 14.3.5 break语句
  277. 14.3.6 continue语句
  278. 14.4 JavaScript的事件
  279. 14.4.1 onClick事件
  280. 14.4.2 onChange事件
  281. 14.4.3 onSelect事件
  282. 14.4.4 onFocus事件
  283. 14.4.5 onLoad事件
  284. 14.4.6 onUnload事件
  285. 14.4.7 onBlur事件
  286. 14.4.8 onMouseOver事件
  287. 14.4.9 onMouseOut事件
  288. 14.4.10 onDblClick事件
  289. 14.4.11 其他常用事件
  290. 14.5 浏览器的内部对象
  291. 14.5.1 navigator对象
  292. 14.5.2 document对象
  293. 14.5.3 windows对象
  294. 14.5.4 location对象
  295. 14.5.5 history对象
  296. 14.6 实例应用
  297. 14.6.1 显示当前时间
  298. 14.6.2 当鼠标指针经过图像时图像震动效果
  299. 14.6.3 自动切换图像
  300. 第15章 企业网站设计
  301. 15.1 企业网站设计概述
  302. 15.1.1 企业网站分类
  303. 15.1.2 企业网站主要功能栏目
  304. 15.2 网站内容分析
  305. 15.3 HTML结构设计
  306. 15.4 方案设计
  307. 15.5 定义整体样式
  308. 15.6 制作页面顶部
  309. 15.6.1 页面顶部的结构
  310. 15.6.2 定义页面顶部的样式
  311. 15.7 制作左侧导航
  312. 15.7.1 制作左侧导航部分的结构
  313. 15.7.2 定义左侧导航的样式
  314. 15.8 制作联系我们部分
  315. 15.8.1 联系我们部分的结构
  316. 15.8.2 定义联系我们内容的样式
  317. 15.9 制作企业介绍部分
  318. 15.9.1 制作企业介绍部分结构
  319. 15.9.2 定义企业介绍部分的样式
  320. 15.10 制作图片展示和新闻动态
  321. 15.10.1 制作页面结构
  322. 15.10.2 定义页面样式
  323. 15.11 制作订购部分
  324. 15.11.1 制作页面结构
  325. 15.11.2 定义样式
  326. 15.12 制作底部部分
  327. 15.13 网站的上传
  328. 第16章 移动网站设计
  329. 16.1 移动网站设计概述
  330. 16.1.1 什么是移动网站设计
  331. 16.1.2 移动网站设计的原则
  332. 16.1.3 怎样开始移动网页设计
  333. 16.2 移动网站设计的注意事项
  334. 16.3 制作网站页面
  335. 16.3.1 网页HTML整体结构
  336. 16.3.2 新建手机网页
  337. 16.3.3 新建CSS样式表
  338. 16.3.4 制作header部分
  339. 16.3.5 制作about部分
  340. 16.3.6 制作工程案例部分
  341. 16.3.7 制作设计师部分
  342. 16.3.8 制作联系我们部分
  343. 16.3.9 制作底部部分
  344. 16.4 维护网站
  345. 16.5 网站的推广
  346. 16.5.1 登录搜索引擎
  347. 16.5.2 交换广告条
  348. 16.5.3 登录网址导航站点
  349. 16.5.4 通过BBS宣传
  350. 16.5.5 聊天工具推广网站
  351. 16.5.6 使用博客推广
  352. 16.5.7 使用传统方式推广
  353. 附录 CSS浏览器兼容性与常见技巧解答
  354. 问题1 上下margin 重合
  355. 问题2 margin加倍的问题
  356. 问题3 浮动IE 产生的双倍距离
  357. 问题4 超链接访问后hover样式不出现
  358. 问题5 IE6 对png的透明度支持问题
  359. 问题6 行内元素上下margin 及padding 不拉开元素间距
  360. 问题7 浮动背景
  361. 问题8 如何正确对齐文本
  362. 问题9 超链接访问过后hover样式就不出现的问题
  363. 问题10 list-style-image 无法准确定位的问题
  364. 问题11 如何垂直居中文本
  365. 问题12 为什么无法定义1px 左右高度的容器
  366. 问题13 怎样使一个层垂直居中于浏览器中
  367. 问题14 能给某部分内容加边框吗
  368. 问题15 如何去掉下画线
  369. 问题16 如何垂直居中文本
  370. 问题17 如何让Div 横向排列
  371. 问题18 怎样设置滚动条颜色
  372. 问题19 字体大小定义不同
  373. 问题20 innerText在IE 中能正常工作,但在FireFox中却不行
  374. 问题21 ul和ol列表缩进问题
  375. 问题22 IE 与宽度和高度的问题
  376. 问题23 Div 浮动,IE 文本产生3px 的bug
载入中