web编程基础精通cssdiv网页与布局

1、WEB 编程基础HTML-页面中的内容CSS-控制HTML的样式JAVASCRIPT-增加动态效果注：以上均为浏览器识别的语言，客户端的语言以上可以做出有内容、布局、样式的静态页面；结合服务器端技术实现动态页面；精通CSS+DIV网页样式与布局第一课 初探CSS1.1 CSS的概念1.2 使用CSS控制页面1.1 CSS的概念CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。标记的概念, , , , , etc.HTML的缺陷代码的重复不便于做大量修改 1-2.htmlCSS的引用 1-3.html1.2

2、 使用CSS控制页面1.2.1 行内样式 (1-5.html)1.2.2 内嵌式 (1-6.html)1.2.3 链接式 (1-7.html)1.2.4 导入样式 (1-8.html)第二课 CSS基本语法2.1 CSS选择器2.2 选择器的声明2.3 CSS的继承2.1 CSS选择器即定义CSS的方式2.1.1 标记选择器2.1.2 类别选择器2.1.3 ID选择器2.1.1 标记选择器h1color:red;font-size:25px;h1 color: red;font-size: 25px;选择器属性值声明1声明22.1.2 类别选择器例：2-1.html .class color:

3、 green;font-size: 25px;类别选择器属性值声明1声明2自定义 类别名称2.1.3 ID选择器例：2-2.html 如果一个ID出现在2个相同的标签中，会导致JavaScript语法混乱。#id color: yellow;font-size: 25px;ID选择器属性值声明1声明2自定义 ID名称2.2 选择器的声明2.2.1 集体声明 (2-6.html)2.2.2 选择器的嵌套 (2-8.html)2.3 CSS的继承2.3.1 父子关系 (2-9.html)标签1 标签2 （注意此处的空格）例如：p span标签1.任意类别例如：span.myclassname12.

4、3.2 CSS继承的运用 (2-10.html)第三课 CSS文字效果3.1 CSS文字样式3.2 文字实例：模拟Google公司logo3.3 CSS段落文字3.4 段落实例：百度搜索3.1 CSS文字的样式3.1.1 字体例：font-family: 黑体,幼圆3.1.2 文字大小例：3-2.html3.1.3 文字颜色例：3-5.html3.1.4 文字粗细例：3-6.html3.1.5 斜体例：3-7.html3.1.6 下划线、顶划线、删除线 3-8.html3.1.7 英文字母大小写 3-9.html3.2 模拟Google公司logoGoogle3.3 CSS 段落文字3.3.1

5、 段落水平、垂直对齐方式text-align: left | right | center | justifyvertical-align: top | bottom | middle3.3.2 行间距、字间距、词间距line-height: 1cmletter-spacing: 1cmword-spacing: 1cm3.3.3 首字放大float: left; (漂浮位置)padding-right: 5px (与右边的间隔)3.3.4 页面背景色background-color: black3.3.5 边距与间隙margin,padding (各带四个方向)3.4 实战：百度搜索 3-1

6、9.html中国春节网欢迎光临中国春节网，中国古代历法发展春节：传统和现代 元宵 灯节 百度快照春节 TOM新闻春节流行三类“拜年短信”；春节期间电视节目早知道；TOM游戏与大家同过快乐春节 /hot/2008 百度快照第四课 CSS 图片效果4.1 图片样式4.2 图片对齐4.3 图文混排4.4 图文实例：八仙过海4.1 图片样式4.1.1 图片边框 4-1.html4.1.2 图片缩放 4-1.html4.2 图片的对齐4.2.1 横向对齐4-2.html4.2.2 纵向对齐vertical-align:baseline; 基线对齐vertical-align:middle;中部对齐ver

7、tical-align:sub;文本下标vertical-align:super;文本上标vertical-align:top;顶端对齐vertical-align:text-top;顶端对齐vertical-align:bottom;底端对齐vertical-align:text-bottom;底端对齐4.3 图文混排4.3.1 文字环绕 (4-9.html)4.3.2 图片和文字的间距 (4-9.html)4.4 实战 八仙过海学生根据作业要求，利用CSS制作网页。第五课 CSS 页面背景5.1 背景颜色5.2 背景图片5.3 古词念奴娇赤壁怀古5.1 背景颜色5.1.1 页面背景颜色 5

8、-1.htmlbackground-color: 颜色代码5.1.2 用背景色给页面分块 5-2.html5.2 背景图片5.2.1 页面的背景图 5-3.htmlbackground-image:url(图片地址);5.2.2 背景图片的重复 5-5.html5.2.3 背景图片的位置 5-8.html5.2.4 固定背景图片 5-10.html5.3 古词实战 念奴娇赤壁怀古5-13.html第六课 CSS设置表格和表单样式6.1 控制表格6.2 表格实例一：隔行变色6.3 CSS与表单6.4 CSS制作实用菜单 （附加）6.1 控制表格6.1.1 表格中的标记 6.1.2 表格的颜色 6

9、-2.html6.1.3 表格的边框 6-3.html6.2 表格实例一：隔行变色6-4.html6.3 CSS与表单6.3.1 表单中的元素 6-7.html6.3.2 巧妙的运用CSS“文字按钮” 6-9.html“多彩下拉菜单”6-10.html“类似EXCEL的表格” 6-11.html6.4 CSS制作实用菜单 （附加）菜单的切换显示 6-12.html经典标签式TAB菜单 tab1.html第9课 CSS滤镜的使用CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。CSS滤镜的标识符是“filter”，例如：Filter:filtername(parameters);滤镜实例蒙版遮罩效果9-3.html模糊效果9-5.html图片的翻转效果9-10.html阴影的制作9-16.html波浪形文字9-20.ht