网页设计与网站制作html课件.pptx

网页设计与网站制作;关于网页设计这门课;课外阅读书籍;一：网页的构造;一个html网页包含什么;标签：元素、属性、值及其他;Html（html5）;Html的树状结构;网页内容、命名、后缀名;地址——url;html;二：处理网页文件;;;三：基本html结构;;标题;页面构成;页眉--header;标记导航--nav;标记页面的主要区域--main;创建文章--article;定义区块--section;指定附注栏--aside;创建页脚--footer;创建通用容器--div;;使用ARIA（无障碍网页访问倡议）改善访问性;为元素指定类别或者ID名称;为元素添加 title属性;添加注释;第四章;p 段落small细则;br /创建换行;span;em强调strong重要;mark突出显示文本?;time指定时间;address作者联系信息;cite引用标题、名称q 引用短语blockquote引用文本块;code标记代码;pre预定义格式;abbr缩写词;dfn定于术语;sup上标sub下标;ins?添加的内容del删除的内容;figure独立流内容;figcaption定义 figure元素的标题;img /;图像格式;Retina显示屏的图像及网站图标;其他元素;链接;;;7css构造块;css构造块;;关于“继承”; 关于“层叠”：当规则发生冲突时指定浏览器应该如何处理应用给同一个标签的多个样式的问题，以及当css属性相冲突时该做什么。 当一个标签继承多个祖先的样式时以什么方式进行格式设置？ *.直接应用于元素的样式击败所有继承来的样式； *.顺序：最近的样式胜出（最后定义的样式胜出） *.特殊性：哪种样式胜出（见下图）*.重要性：在某条规则的末尾加上!important.如：p{color:red!important;} 但不推荐使用。 ;属性的值;8 操作样式表;Css样式结构;Css样式;Css样式——外部样式表;Css样式——内联样式;Css样式表结构;使用与媒体相关的样式表;9定义选择器;;;;;;;;10 为文本添加样式;字体，文字样式，字号，行距，颜色;字/词间距，文本缩进、对齐、大小写，文字修饰线，边框;背景色，背景图;设置空白;css常用属性、值列举;11 用css进行布局;网页布局注意事项;构建页面;兼容旧版本浏览器;盒模型;盒模型;控制显示类型;控制可见性;使元素浮动;使元素浮动;浮动;Css样式——浮动的两列布局;Css样式——相对定位;Css样式——绝对定位;Css样式——固定定位;兼容问题;背景图像定位background-positioin；有三种值关键字:——水平和垂直 .两组关键字,一个控制3种水平方向的定位 (left\center\right); 另一个控制3种垂直方向的定位 (top\center\bottom); .指定关键字的顺序不重要------top center和center top的效果一样; .如果已经平铺图片,那么background-position就控制了第一张平铺图片的起点. 精确值:——左边和顶边 .可以用px值或em定位，两个值，一个值指图片的左边和容器的左边之间的距离,另一个值指图片的顶边和样式的顶边之间的距离. .可以用负值来控制显示图片的哪一部分.百分比:——指定点与对应点 .当需要把图片定位在元素宽度成比例的点时必须使用百分比.如:把图定位在标题四分之三宽的位置,而你并不知道这个元素的宽时. .要提供两个百分比,一个指水平方向的位置,另一个指出垂直方向的位置.  .百分比定位与像素值不同,它并不对背景图像的左上角进行定位，而是使用图像上一个对应点。所以，如果指定垂直和水平位置都是20%，那么实际上将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。 (图片的指定点与元素的指定点对应). 固定图像background-attachment:fixed 把图片保留在背景中的固定位置上.css允许给任何元素的样式“固定” 背景图片。 Background快捷方式： background-color || background-image || background-repeat || background-attachment || background-position