基础CSS实例

使用CSS设置文本样式
改变字体大小和颜色
居中文本
左对齐文本

一个外部CSS实例
设置段落背景颜色
改变边框样式
应用内联CSS样式
外链CSS样式的例子

解析CSS属性
字体家族
字体样式
字体粗细
文字阴影

文本样式实例
加粗文字
斜体文字
删除线文字
下划线文字
设置文本的对齐方式
水平居中
左对齐
右对齐
设置首行缩进
段落间距
列表样式
有序列表
无序列表
自定义列表

表格样式实例
创建一个简单的表格
设置表格的边框样式
调整单元格的大小和宽度
设置单元格内的文本对齐方式
垂直居中文本
插入标题行
应用颜色到表格行

CSS布局实例
使用 floats 实现弹性盒子模型
基本布局
响应式设计的基础理论
固定布局与流布局的区别
媒体查询在布局中的应用

实现一个下拉菜单
创建具有不同选项的下拉列表
改变下拉菜单的外观
设置事件处理器

导航菜单示例
创建水平导航菜单
垂直导航菜单示例
嵌套导航菜单应用实例
创建可折叠的导航菜单
通过CSS3动画增加菜单的动态效果

创建一个简单的表单
使用HTML创建基本的表单元素
使用CSS优化表单样式
添加表单验证脚本
实现全客户端的验证处理

图像格式与应用
图片的基本属性设置
为图片创建链接
使图片对齐到页面边缘
图片在页面的居中显示
响应式图片应用实例

网页配色与布局

网页配色原则
色彩搭配的规则
根据颜色分析网站的整体风格
使用在线工具检查网页的安全性

网页设计软件

Photoshop 在网页设计中的使用
Adobe Dreamweaver 的安装与使用
WebStorm 安装及基本操作
Sublime Text 编辑器入门教程
网页设计师必备的工具

网页制作步骤

建立一个新的HTML页面
定义页面的标题
添加段落
插入图片和链接
设置字体颜色和大小
应用CSS样式
测试和优化页面效果