南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

HTML5+CSS3网站设计基础教程

发布时间:2024-08-24

来源:


目 录 CONTENTS


第 1章 初识HTML5 1


1.1 HTML5概述 1


1.1.1 HTML5发展历程 1


1.1.2 HTML5的优势 2


1.1.3 HTML5浏览器支持情况 3


1.1.4 创建第 一个HTML5页面 4


1.2 HTML5基础 6


1.2.1 HTML5文档基本格式 6


1.2.2 HTML5语法 7


1.2.3 HTML标记 8


1.2.4 标记的属性 10


1.2.5 HTML5文档头部相关标记 12


1.3 文本控制标记 15


1.3.1 标题和段落标记 15


1.3.2 文本格式化标记 19


1.3.3 特殊字符标记 21



第 2章 HTML5页面元素及属性 37


2.1 列表元素 37


2.1.1 ul元素 37


2.1.2 ol元素 38


2.1.3 dl元素 40


2.1.4 列表的嵌套应用 41


2.2 结构元素 42


2.2.1 header元素 42


2.2.2 nav元素 43


2.2.3 article元素 44


2.2.4 aside元素 45


2.2.5 section元素 46


2.2.6 footer元素 47


2.3 分组元素 48


2.3.1 figure元素和figcaption元素 48


2.3.2 hgroup元素 49


2.4 页面交互元素 51


2.4.1 details元素和summary元素 51



第3章 CSS3入门 68


3.1 CSS3简介 68


3.1.1 CSS概述 68


3.1.2 CSS3发展历史 69


3.1.3 CSS3浏览器支持情况 70


3.2 CSS核心基础 71


3.2.1 CSS样式规则 71


3.2.2 引入CSS样式表 72


3.2.3 CSS基础选择器 77


3.3 文本样式属性 82


3.3.1 字体样式属性 82



第4章 CSS3选择器 106


4.1 属性选择器 106


4.1.1 E[att^=value]属性选择器 106


4.1.2 E[att$=value]属性选择器 108


4.1.3 E[att*=value]属性选择器 109


4.2 关系选择器 110


4.2.1 子代选择器(>) 110


4.2.2 兄弟选择器(+、~) 111


4.3 结构化伪类选择器 113


4.3.1 :root选择器 113


4.3.2 :not选择器 115


4.3.3 :only-child 选择器 116


4.3.4 :first-child和:last-child选择器 117


4.3.5 :nth-child(n)和:nth-last-child(n)


选择器 118


4.3.6 :nth-of-type(n)和:nth-last-of-type(n)



第5章 CSS盒子模型 134


5.1 盒子模型概述 134


5.1.1 认识盒子模型 134


5.1.2 

标记 136


5.1.3 盒子的宽与高 138


5.2 盒子模型相关属性 139


5.2.1 边框属性 139


5.2.2 边距属性 148


5.2.3 box-shadow属性 152


5.3.7 设置背景图像的大小 161


5.3.8 设置背景的显示区域 163


5.3.9 设置背景图像的裁剪区域 164


5.3.10 设置多重背景图像 166


5.3.11 背景复合属性 167


5.4 CSS3渐变属性 169


5.4.1 线性渐变 169


5.4.2 径向渐变 171



第6章 浮动与定位 180


6.1 元素的浮动 180


6.1.1 元素的浮动属性float 180


6.1.2 清除浮动 184


6.2 overflow属性 190


6.3 元素的定位 192


6.3.1 元素的定位属性 192


6.3.2 静态定位static 193


6.3.3 相对定位relative 193


6.3.4 定位absolute 195


6.3.5 固定定位fixed 198


6.3.6 z-index层叠等级属性 198



第7章 表单的应用 211


7.1 认识表单 211


7.1.1 表单的构成 211


7.1.2 创建表单 212


7.2 表单属性 213


7.3 input元素及属性 215


7.3.1 input元素的type属性 216


7.3.2 input元素的其他属性 224


7.4 其他表单元素 231


7.4.1 textarea元素 231


7.4.2 select元素 232



第8章 多媒体技术 249


8.1 HTML5多媒体的特性 249


8.2 多媒体的支持条件 250


8.2.1 视频和音频编解码器 250


8.2.2 多媒体的格式 251


8.3.3 音、视频中的source元素 255


8.3.4 调用网页多媒体文件 257


8.4 CSS控制视频的宽高 258


8.5 视频和音频的方法和事件 260


8.6 HTML5音、视频发展趋势 262


8.7 阶段案例——制作音乐播放界面 262



第9章 CSS3应用 269


9.1 过渡 269


9.1.1 transition-property属性 269


9.1.2 transition-duration属性 271


9.1.3 transition-timing-function属性 272


9.1.4 transition-delay属性 274


9.1.5 transition属性 274


9.2 变形 274


9.2.1 认识transform 274


9.2.2 2D转换 275


9.2.3 3D转换 282


9.3 动画 287


9.3.1 @keyframes 287


9.3.2 animation-name属性 288



第 10章 实战开发——制作电商网站首页 308


10.1 准备工作 309


10.2 首页面详细制作 314



策略思维与细节的完美结合,有效帮您减少试错成本

策略思维与细节的完美结合,有效帮您减少试错成本

立即与安优联系,开启网站设计全新体验

立即与安优联系,开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

在线咨询

品质设计 用心服务

  • 12年+定制经验

  • 600+客户选择

  • 高效售后保障

7*24小时服务热线