发表于： 2019-08-11 14:11:38
1 843
今天完成的事情[190810]：完成任务6(昨天弄到太晚，日报到今天才写)
明天计划的事情：开始任务7
遇到的问题：
1.制作雪碧图及雪碧图缩放
切片制作完成后，若是手动将其制成雪碧图，花的时间太长，使用雪碧图生成网站
https://www.toptal.com/developers/css/sprite-generator 自动生成图片和css代码，效率很高
同时，雪碧图的图标太大，需要缩小尺寸，将div的宽高、背景图的宽高以及图标在雪碧图的偏移量都等比例缩小即可
width: 21px; /* 六个参数都等比缩小为一半*/
height: 22px;
background: url('img/task6.png') -62px -5px;
background-size: 119px 87px;
2.页脚的图片按钮
给button添加背景图片，去除边框效果，即可把图片作为按钮。
但目前还不知道图片和文字如何放在同一个按钮中？
3.用css模拟下拉框
用<span>, a或<button> 元素来做下拉菜单的标题内容和hover效果，
:hover 选择器用于在用户将鼠标移动到下拉菜单的标题上时显示下拉菜单。
使用容器元素div 来创建下拉菜单的内容，最后使用 <div> 元素来包裹这些元素。
下拉菜单的样式，包括宽度和下拉框位置都可以通过css调整。
4.设置左边的文字被截断出现”…”省略号
需要加上宽度限定(按百分比来才可自适应)、超出隐藏（overflow:hidden;）、强制在同一行显示（white-space: nowrap;）、省略号（text-overflow:ellipsis;）
5.搜狗浏览器不兼容flex盒子的竖向居中，也就是align-item:center不生效
没搞明白搜狗浏览器为什么不生效，chrome可以正常垂直居中。
后面改成负margin的方式来做。两个浏览器都ok
收获：
1. pc浏览器与移动端浏览器的最小字体区别
浏览器字体最小12px，调小也显示不出来但手机端会显示，需要改大
2.添加居中的按钮组，居右的图标按钮
引入bootstrap实现基本样式，再添加自定义样式进行微调，有些需要增加！importan来提高优先级
3.页面中间内容container自适应高度
用calc计算，百分百减去页眉和页脚的高度，剩下的就是页面容器的高度，可以自适应。
但是要注意表达式中有“+”和“-”时，其前后必须要有空格
4.去除图片底部留白
通过给图片添加垂直对齐方式来解决底部留白
vertical-align: middle
返回列表
评论