发表于： 2018-06-10 18:47:12
1 640
今天完成的事情
完成任务6
明天计划的事情
暂无
遇到的问题
1.头部按钮组通过引用btn-group和btn实现后发现无法还原设计图的样子。中间没有圆角。
解决：后实在无法遂弃btn-group只用btn解决。盒子自己编写样式。
2.通过引用dropdown实现的下拉菜单，下拉菜单宽度最小为160，无法和上面按钮对其。经检查发现原样式中有min-width=10rem;
解决：width=100%；min-width=2rem;
3.任务做完后才发现，没有达到其中一个要求。文字省略号。后百度查找到，所需属性。加入文字所在的标签。试验后发现并没有效果。我的文字居中是使用浮动定位的。删掉文字之前的标签后，省略号出现。但效果不是太理想。居中使用div外边距完成，直接计算所需的值。
收获
1.css 雪碧图的使用与制作
1.1先将任务所需的小图标通过PS切图切下来。
1.2需要用到应用cssgaga，将切好的小图标拖入cssgaga将自动合成雪碧图。
1.3用background-position定位所需要的图标。可通过transform=scale()来缩放图标。
2.bootstrap的使用（一点点吧）
2.1将引入 Bootstrap 样式表的 <link> 放到 <head> 中。
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">2.2将引入的JavaScript放到</body>标签之前。
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>2.3按照需求查找对应的class将直接引用。
3.css div多余文字用省略号代替
3.1规定段落中的文本不进行换行
white-space: nowrap
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
3.2多余文字用省略号代替
text-overflow:ellipsis;
clip 修剪文本。 ellipsis 显示省略符号来代表被修剪的文本。string 使用给定的字符串来代表被修剪的文本。
3.3文本容器设置超出隐藏属性
overflow: hidden;
返回列表
评论