本帖最后由 I1220 于 2022-11-16 23:16 编辑
今日学习内容
元素的显示与隐藏
dispaly;
block/none
dispaly来隐藏元素时，隐藏的元素不再占有原来的位置
visibility:
hidden /visibla 可视
用visibility隐藏元素之后，继续占有原来的位置
overflow
visible：不剪切内容，不显示滚动条
hidden:将超出盒子的内容给隐藏掉
scroll:无论有无溢出，都显示滚动条
auto:只有超出显示滚动条
CSS的其他技巧
精灵图
利用背景图片的方式来将精灵图插入
将精灵图移动到指定位置即可，利用的属性是bacground-position ， 一般移动的数值都是负值（X轴向右是正值，Y轴向下是正值，精灵图一般都是向上和向左进行移动，所以取负值）
鼠标样式
cursor
default:默认样式
pointer：小手
move：拖拽
text:文本
not-allowed：禁止
输入框删除外框
outline:none
文本域取消拖拽
resize:none
行内元素的对齐方式
vertical-align
top：顶线对齐
bottom:底线对齐
middle：中线对齐
baseline 基线对齐
css三角的制作
盒子的四个边框的联结处是分别平分的样式
将盒子的宽高设置为0 直接利用边框可生产四个三角形状
将边框的颜色设置为透明，需要哪个三角，单独设置哪个边框的颜色即可
CSS的省略号制作
1、让文字一行显示
2、将多余的文字隐藏掉
3、将隐藏的文字用省略号代替 text-over-flow:ellipisis
CSS的滑动门
核心思想，用a标签实现左部背景图，用哪个span实现右部的背景图
a标签转化为行内块元素，设置高度，padding-left撑开盒子右边插入背景图
span标签转化为行内块元素，设置高度，padding-right撑开盒子右边插入背景图
CSS字体图标的使用
找到字体图标将需要的字体图标添加至购物车
将购物车的字体图标下载下来
将下载的压缩包解压到项目目录下
在demo_index.html文件中查看字体图标的类名
在html文件中引入字体图标
PS的基本操作
常规操作
1、文件里打开相应的psd图片
2、Ctrl+R可以打开标尺，右击标尺可以选择单位
3、Ctrl + 加号 可以放大图片 Ctrl + 减号 可以缩小图片
4、按住空格键，可以拖动整个视图
5、用选框工具可以测量大小
切图
先选择切片工具
选择要切片的区域
点击文件进行保存
选择jpeg格式点击存储
将切片选项选择为选中的切片导出即可
图层
手动合并图层导出：
选中所需合并的图层
ctrl+e合并图层，右键点击图层导出即可
cutterman插件的使用
今日遇到的问题
给ul中某个li添加圆角边框时候 ，li里面的文字和边框一起沿着顶部对齐了
解决办法
利用优先级给该li增加权重，使得自身设置的行高显示，然后利用margin进行微调
|
