1、1、 认识网页结构-兄弟关系（并列结构）-父子关系（嵌套结构）bug 八阿哥13521144697 908159007（qq）1、切片工具 c 按住 ctrl 切换切片选择工具A） 、对网页的结构进行划分a)、根据内容区域的功能-头部-banner -内容-底部b） 、一像素原则-对网页结构进行划分的时候必须精确到一个像素c） 、逐级划分-先整体-后局部-到细节先上下-再左右-从外到里B） 、图像的局部获取需要的图片用切片切出来，ctrl+shift+alt+s （存储为 web 所用格式）-jpg文件名：英文；格式：仅限图像；切片：选中的切片2、 html=超文本标记语言 -构成网页就有一些
2、语义的单词双标记 三要素：结构、样式、行为3、 文件的保存1） 、在你的存盘（d、e）新建一个文件夹-网页的站点2） 、在 DW-新建 html 文件-title 内容修改成网页的名称3） 、把 html 文件保存到文件夹中（注）:网站首页的名称-必须为 index.html4、 标记-html-标签-元素1、html 整个网页文件2、head 网页头部-除主体内容之外的信息3、title 网页的主题4、meta 声明一些标准-编码标准-utf-8 国际通用编码标准5、body 网页的主体内容-psd 效果里面内容都要写在 body 内部6、div 用来做网页框架-盒子A） 、默认的宽度-默认
3、的宽度为 100%；窗口有多大，盒子宽度就有多宽B） 、高度为自适应- 里面内容有多高，盒子就有多高C） 、独立成行-垂直显示7、 img 图片标记 单标记8、 h1-h6 标题标记一组标记 从最大到最小标题A） 、独立成行-垂直显示B） 、默认宽度为 100%，默认高度也为自适应C） 、标题标记自带间距D） 、标题文字-自带加大加粗9、 p 段落标记 -用于排版大篇文字A） 、自带间距B） 、独立成行-宽度为 100%，高度为自适应10、 ul-li 作为父子关系 列表标记A） 、宽度为 100%，高度为自适应，独立成行B） 、自带间距-自带填充11、 特殊符号 shift+7=块级标记有默
4、认的宽度，默认的宽度为 100%，独立成行-垂直显示Div,h1h6,p,ul,li,form行级标记水平显示，没有默认的宽度（css 定义是无效）Img,a，span,input,label,select,textarea导航的结构 ul-li-a导航的样式：（1）等宽度， lifloat:left;width:； 字体样式定义 a 里面（2）等间距 lifloat:left;margin 或者 padding；字体样式定义在 a 里面13、 span 万能标记文件的路径：=文件保存的位置1、 绝对路径 网址-2、 相对路径 相对一个文件夹，/回到上一级 后退一步14、 a 标记 href=
5、” target 设置是否新窗口的方式打开a) 文件b) 网址c) Mailto:d) 点击 qq 咨询 tencent:/message/?uin=908159007六、css 中的选择器-找 html 中的标记-找对象1、标记选择器 有语义的单词（网页当中的标记）div body 里面的所有的 div 都识别这里面的样式2、 id 选择器-给 div 起名字 用于一级拆分的盒 id 的名字不能重复使用-唯一性命名规范：不能为中文，不能为纯数字，名字开始不能为特殊符号在 body 给在 css 里 定义 #名字属性:值;3、 class 选择器- 用于二级或者二级以上拆分在 css 里面（点
6、）.名字属性:值；Class=名字 名字可以重复使用4、 群组选择器-把相同的样式统一定义； 选择器与选择器之间用, 隔开，最后一个没有逗号5、 * 通配符 代表的所有标记在 css 最上面*margin:0;padding:0;6、 后代选择器 祖辈选择器 子选择器文字 .box p选择器的优先级：标记选择器 1Id 选择器 100Class 选择器 107、 伪类选择器:link 鼠标未访问的状态:visited 鼠标访问过后:hover 鼠标经过的状态:active 鼠标激活 -点击L-V-H-A8、父子选择器 .boxp p 必须为.box 的儿子，不能跳级影响7、 css 属性1、w
7、idth 宽度 容器的宽度2、height 高度 容器的高度3、float 浮动 如果需要做水平布局，这时候用到 float，有几个盒做水平布局，那我就要加几个 float。加了 float 的标记（div） ，-脱离他原来的位置（不占位）-脱离正常标准文档流如果盒子没有宽度，加了 float，盒子的宽度变成自适应- 里面内容多，盒子的宽度大4、 margin：外边距-间距A） 、网页居中，margin:0 auto;一般情况给一级拆分的盒Margin:0 auto;在使用的时候需要有一个固定的宽度值 width:980px;B） 、外边距-盒子与盒子之间的距离-盒外的属性Margin-top
8、:上间距；margin-bottom:下间距 margin-left：左间距 margin-right：右间距C） margin 可以缩写 margin:20px; 四周都为 20px；margin：20px 40px； 20px 上下 40px 左右；margin：20px 40px 60px；20px 上 40px 左右 60px 下；margin：20px 40px 60px 80px；依次为上、右、下、左（注）：margin 上边会出现 bug5、 background-image: 背景图片，背景图片是起到修饰的作用A） 、默认的平铺- 盒子有多大，平铺范围就有多大Backgroun
9、d-image:url(“图片保存位置”)；B） 、背景图片默认的位置在容器的左上角6、 background-color:背景颜色； #e7e7e7 red ;设置背景颜色无：transparent（透明）7、 padding: 内填充-盒里面内容距离盒的边的位置-盒内的属性-对背景图无效当 margin 与 padding 都能达到效果图的效果，我们优先选择 padding8、 font-size:字体大小9、 color: 字体颜色10、 font-family:字库-字体11、 Line-height: 行高-一行文字所占的高度如果让一行文字在特定的容器垂直居中，line-height
10、 ：值（容器高度的值）12、 border：描边 ； 描边的粗细 描边的颜色 描边的样式（实线或者虚线）描边的样式 a） 、solid 实线b） 、dashed 条状线 dotted 点状线13、 background-repeat:背景图片是否重复；a) Repeat-x 沿水平方向重复b) Repeat-y 沿垂直方向重复c) No-repeat 不重复14、 background-position: 背景图片的位置；水平方向的位置 垂直方向的位置；水平方向的位置：left center right；为特定的值：距离左边的位置垂直方向的位置：top center bottom 为特定的值：
11、距离顶部的位置15、 text-transform：文字大小写的切换a) Capitalize 文字的首字母大写b) Lowercase 全部小写c) Uppercase 全部大写16、 text-align:文本水平对齐方式a) Left 左对齐b) Center 中间对齐c) Right 右对齐（注）:定义文字：字体大小，字体颜色，行高，文字垂直方向的位置，首先先要定义文字的行高，然后在考虑 padding 值17、 list-style:none; 在 css 的上面 lilist-style:none; 去掉列表符号18、 Font-weight:设置字体是否加粗a) Bold 加粗b
12、) Normal 字体正常19、 text-decoration:a) None 把文字的下划线去掉 用在 css 上面 atext-decoration:none;b) Underline 给文字添加下划线20、 display：显示a) Block 显示为块 如果你想行级标记定义宽度和高度，必须把它转换为块级，具有块级标记的特性b) Inline 显示为行 把块级转换为行级，具有行级标记的特性c) Inline-block d) None21、 background-color:rgba(0,0,0,1) 前面的三个值分别的 r、g 、b 的色值，a=alpha（透明度01）：0 完全透明
13、，1 完全不透明度；css3.022、 Position：位置； 网页中出现内容的覆盖关系，选择 position 属性a) Absolute 绝对定位（位置） ；覆盖内容添加一个绝对定位i. 加了绝对定位的盒是不占位的ii. 加了绝对定位的盒宽度变成自适应iii. 加了绝对定位的元素（标记）四个坐标点以浏览器窗口四个点为基准b） 、 relative 相对定位 位置不变（依然占位）width 还是 100% 覆盖关系的内容添加一个绝对定位，需呀给他的父亲盒添加一个相对定位C） 、fixed 固定定位 固定在某一个位置上不动加了固定定位的标记不占位、width 变成自适应，四个坐标点基于浏览器
14、窗口四个点- 固定头部，返回顶部23、 z-index:层级关系 值越大，层级越高24、 box-shadow: 盒子阴影 css3.0 里面的属性-阴影不占位X 轴的偏移量 y 轴的偏移量 阴影羽化值半径 阴影的颜色25、 vertical-align：垂直对齐方式用来做两个 input 的垂直对齐方式26、 background：背景颜色 背景图片Background:#f00;Background:url(背景图片的地址) no-repeat left top；Css 的精灵技术（雪碧技术）-用 background-position:改变背景图上的不同图标的位置A、把不同状态的图标按照
15、一定的规律处理到一张大画布上B、给放不同图标的容器定义有限的宽度和高度C、 通过 css 中 background-position:推出不同状态图标的显示27、 border-radius：圆角属性 css3.0 新增28、 Resize textarearesize:none;29、 Cursor：鼠标指针的形状 pointer 手型30、 white-space:nowrap; 强制不换行-文字一行显示，31、 Min-width 最小宽度32、 Max-width 最大宽度33、 Overflow:溢出a) Hidden 多余的部分隐藏b) Auto 多余的部分已滚动条的方式呈现-横向无c) Scroll 多余的部分已滚动条的方式显示34、 text-indent: 首行缩进
