|
一、今日学习内容： 元素的显示与隐藏 display 显示与隐藏 display:block; 除了转化为块元素的功能外，还能将元素给显示出来 dispaly:none; 隐藏对象 dispaly来隐藏元素时，隐藏的元素不再占有原来的位置，一般会和js在一起进行搭配使用。 visibility 显示隐藏 visibility:visible;元素可视 visibility:hidden;元素隐藏 用visibility隐藏元素之后，继续占有原来的位置 如果隐藏元素之后不占位置就用display，如果要占位置就用visibility。 overflow 溢出的显示与隐藏 overflow: visible;不剪切内容，也不添加滚动条。 overflow:hidden; 将超出盒子的内容给隐藏掉 overflow: scroll; 不管盒子里的内容有没有超出盒子的范围，都显示滚动条 overflow:auto; 内容超出盒子的话就显示滚动条，不超出盒子就不显示。 CSS的其他技巧 精灵图 为什么要使用精灵图 将多张小图片整合到一张大的图片中返回给浏览器，可以减少对服务的重复请求，以减轻服务器的压力 使用方法： 利用背景图片的方式来将精灵图插入 将精灵图移动到指定位置即可，利用的属性是bacground-position ，一般移动的数值都是负值（X轴向右是正值，Y轴向下是正值，精灵图一般都是向上和向左进行移动，所以取负值） 鼠标样式 属性cursor 属性值 • default 默认的鼠标样式 • pointer 小手的鼠标样式 • text 文本鼠标样式 • move拖动时的鼠标样式 • not-allowed 禁止鼠标样式 输入框删除外框 outline:none 文本域取消拖拽 resize:none; 行内元素的对齐方式 属性 vertical-align • 属性值： • top 顶线对齐 • middle 中线对齐 • baseline 基线对齐（默认值） • bottom 底线对齐 CSS的三角制作 原理 盒子的四个边框的联结处是分别平分的样式 将盒子的宽高设置为0 直接利用边框可生产四个三角形状 将边框的颜色设置为透明，需要哪个三角，单独设置哪个边框的颜色即可 CSS的省略号制作 步骤 1、让文字一行显示 2、将多余的文字隐藏掉 3、将隐藏的文字用省略号代替 CSS的滑动门 核心思想，用a标签实现左部背景图，用哪个span实现右部的背景图 CSS字体图标的使用 1、登录阿里字体图标库 2、找到字体图标将需要的字体图标添加至购物车 3、将购物车的字体图标下载下来 4、将下载的压缩包解压到项目目录下 5、在demo_index.html文件中查看字体图标的类名 6、在html文件中引入字体图标 7、改变字体图标大小要注意权重问题，字体属性默认的权重是10 PS的基本操作 常规操作 1、文件里打开相应的psd图片 2、Ctrl+R可以打开标尺，右击标尺可以选择单位 3、Ctrl + 加号可以放大图片 Ctrl + 减号 可以缩小图片 4、按住空格键，可以拖动整个视图 5、用选框工具可以测量大小 切图 1、先选择切片工具 2、选择要切片的区域 3、点击文件进行保存 4、选择jpeg格式点击存储 5、将切片选项选择为选中的切片导出即可 图层 手动合并图层导出 1、选中所需合并的图层 2、ctrl+e合并图层，右键点击图层导出即可 cutterman插件的使用 1、先安装cutterman插件 2、重启ps，找到cutterman插件 3、使用cutterman进行图层合并导出 二、今日问题：无 三、解决方案：无
| 
