第6章+补充CSS样式表演示文稿.PPTVIP

* ④．方框样式的定义 属性名 作用 属性名 作用 Width 定义网页容器对象的宽度 Padding|Bottom 定义网页容器对象的底部内补丁 Height 定义网页容器对象的高度 Padding|Left 定义网页容器对象的左侧内补丁 Float 定义网页容器对象的浮动方式 Margin|Top 定义网页容器对象的顶部外补丁 Clear 定义网页容器对象的禁止浮动方式 Margin|Right 定义网页容器对象的右侧外补丁 Padding|Top 定义网页容器对象的顶部内补丁 Margin|Bottom 定义网页容器对象的底部外补丁 Padding|Right 定义网页容器对象的右侧内补丁 Margin |Left 定义网页容器对象的左侧外补丁 * ⑤．边框样式的定义 属性名 作用 典型属性值及解释 Style 定义边框线的样式 none（默认值，无边框线）、dotted（点划线）、dashed（虚线）、solid（实线）、double（双实线）、groove（3D凹槽）、ridge（3D凸槽）、inset（3D凹边）、outset（3D凸边） Width 定义边框线的宽度 由浮点数字和单位组成的长度值，默认值为0 Color 定义边框线的颜色 以16进制数字为基础的颜色值。可通过颜色拾取器进行选择。 * ⑥．列表样式的定义 属性名 作用 典型属性值及解释 List-style-type 定义列表的项目符号类型 disc（实心圆项目符号，默认值）、circle（空心圆项目符号）、square（矩形项目符号）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）以及none（无项目列表符号） List-style-image 自定义列表的项目符号图像 none（默认值，不指定图像作为项目列表符号），url(file)（指定路径和文件名的图像地址） List-style-position 定义列表项目符号所在位置 outside（将列表项目符号放在列表之外，且环绕文本，不与符号对齐，默认值）、inside（将列表项目符号放在列表之内，且环绕文本根据标记对齐） * ⑦．定位样式的定义 【定位】规则多用于CSS布局的网页，可设置各种AP元素、层的布局属性。 属性名 作用 Position 定义网页容器对象的定位方式 Visibility 定义网页容器对象的显示方式 Z-Index 定义网页容器对象的层叠顺序 Overflow 定义网页容器对象的溢出设置 Placement Top 定义网页容器对象与父容器的顶部距离 Right 定义网页容器对象与父容器的右侧距离 Bottom 定义网页容器对象与父容器的左侧距离 Left 定义网页容器对象与父容器的底部距离 Clip Top 定义网页容器对象顶部剪切的高度 Right 定义网页容器对象右侧剪切的宽度 Bottom 定义网页容器对象底部剪切的高度 Left 定义网页容器对象左侧剪切的宽度 * 8．扩展样式的定义 【扩展】规则的作用是设置一些不常见的CSS规则属性，例如打印时的分页设置以及CSS的滤镜等。 练习 1 制作多种超链接样式 2 制作div+css板块（css方框、边框、定位练习） 3 主题网站制作练习（网站至少包含3个网页） 个人介绍类 家乡介绍类 体育类 游戏介绍类 电子竞技大赛 网络课程 容器 216网页安全色 216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。 1 配色技巧 网页的配色方案中，体现基色调主要依靠以下几个部分： Banner 超链接 板块边框 文字 其中，banner的制作技巧主要使用图像处理 超链接的CSS制作技巧：背景颜色(图片)、文字颜色、下划线(有/无)、行高 板块的CSS制作技巧：h5的背景、行高、字体大小/颜色；边框颜色； CSS技巧 2 布局技巧 目前主流的网页设计方案是：div+CSS方案，div完成板块(容器)设定，利用CSS对其进行修饰。 Div的基本布局：一个div占据一整行 多个板块(div)并排一行：使用浮动(float) 且多个div的宽度总和网页总宽度 设置板块(div)的常用属性： 方框：宽度、高