web前端开发大纲.pptxVIP

《web 前端开发》教学大纲;/2 97;/3 97;/4 97;/5 97;/6 97;/7 97;/8 97;/9 97;单标记 必须属性：src 行内元素 常用属性：width,height 例如：img width=”100” src=”images/rose.jpg”/ 17.掌握链接元素a 作用：创建一个超链接 a href=”” target=“”文本/a 3）href 属性：链接的地址 空链接设为# 4）target 属性：目标，可取值为 _blank、_self 等 18.掌握表格的创建方法 1）定义表格：table/table 2）创建表行：tr/tr 3）创建表列：td/td 例如：创建一个两行三列的表格 table border=”1” tr td第一行，第一列/td td第一行，第二列/td td第一行，第三列/td /tr tr td第二行，第一列/td td第二行，第二列/td td第二行，第三列/td /tr /table ;1）有序列表 ol li科比/li li詹姆斯/li li库里/li /ol ;; ;3.项目 3 执行步骤: ; ; ;1/ 797;1/ 897;1/ 997;4）如：h1 style=background-color:yellow;color:red;我是一号标题 /h1 ;;h1{color:blue;} h2{color:red;} 10.掌握类选择器 1）语法：.classname{} 2）类名称不能以数字开头 3）所有有 class 属性的元素都可以使用此样式声明 4）如： ;;body ; 14.掌握框模型 ;③padding:value value value; ---- 上 左 右 下 ④padding:value value value value; ---- 上 右 下 左 如：padding:10px 20px 30px 40px; 19.掌握背景属性 1） 背 景 色 ---- background-color 2）背景图片 ---- background-image 3）背景重复 ---- background-repeat 4）背景图片尺寸 ---- background-size 20.了解几种定位方式 普通流定位 浮动定位 相对定位 绝对定位 掌握浮动定位 ---- float 将元素排除在普通流之外，元素将不在页面占用空间 将浮动元素放置在包含框左边或者右边 浮动元素依旧位于包含框之内 浮动元素不会互相重叠 浮动元素不会上下浮动 左浮: float:left; 右浮： float:right; 22.掌握相对定位 ---- relative 元素原本所占的空间仍保留 元素仍保持其未定位前的形状 3）语法：position:relative; 使用 left 和 right 设置水平方向的偏移量；使用 top 和 bottom 设置垂直 方向的偏移量 如：position:relative; top:10px; left:20px; ;掌握堆叠顺序 ---- z-index 值为数值 数值越大表示堆叠顺序更高，即离用户更近 可以设置为负值，表示离用户更远 4）如： z-index:999; 掌握固定定位 元素从普通流中完全移除，不占用页面空间 当用户向下滚动页面时元素框并不随着移动 3）语法： position:fixed; 4）使用 left 和 right 设置水平方向的偏移量；使用 top 和 bottom 设置垂直 方向的偏移量 1.项目 1 及步骤 ; .red{ color:#da4530;} .yellow{ color:#ffb800;} .green{ color:#009756;} 2.项目 2 执行步骤: 向网页中插入标签div/div 在头部插入style/style标签 设置 div 的尺寸属性：宽 200 像素，高 100 像素 利用 border 复合属性设置 div 的四周的 5px、红色的实线边框 将下边框 border-bottom 改写为：3px、绿色的虚线(dashed)边框 代码为： Html 代码： div/div Css 代码： div{ width:200px; height:100px; border:5px #FF0000 solid; border-bottom:3px #00FF00 dashe