发表于: 2017-03-07 17:23:50
3 715
今天完成的事情:
终于有网了,又可以愉快地学习了。
今天了解雪碧图,他是为了减少http请求数量,加速网页内容显示而存在。用ps或其他软件把小图集中做成一张图,用background-position来控制显示。
学习使用 bootstrap,主要是 栅格布局 和 下拉菜单div :
<div class="dropdown">
下拉按钮,id用来给下拉菜单指向用的
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
菜单列表,aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单,因为有可能有多个菜单
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
菜单项
<li><a href="#">HTML</a></li>
明天计划的事情:
完成任务六,学习任务七
遇到的问题:
1.列表项居中。
采用flex中的 align-item 元素。
2.点击下拉列表如何让列表项出现在不同位置。bootstrap没怎么看懂,求指点
3.单行文字省略
text-overflow: ellipsis;(省略的意思)
overflow: hidden;
white-space: nowrap;
white-space: nowrap 保证单行文字不会换行,若无此属性文字会自动换行而不会显示省略号。 overflow: hidden
则不显示超出容器的文字内容,若无此属性,文字会显示超过容器而不省略。
收获:
了解了栅格布局,文字不换行省略,footer和header固定,css sprite。
评论