发表于: 2018-07-22 23:47:34
1 569
今天完成的事情:
任务9完成80%,还剩一些细节需要改动就可以。
明天的计划:
完结任务9,开始任务10
主要知识点CSS模拟表单元素 +继续练习响应式布局
遇到的问题:
1图片变形;解决方法-响应式图片
Bootstrap 提供了三个可对图片应用简单样式的 class:
.img-rounded:添加 border-radius: 来获得图片圆角。
.img-circle:添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。
图片将很好地扩展到父元素.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片
2换行处理
white-space 的常用属性包括: normal nowrap pre pre-line pre-wrap
normal:
自动处理换行,行中的空白符(空格、换行、TAB等)合并为1个小空格
nowrap:
不换行,行中的空白符(空格、换行、TAB等)合并为1个小空格。可以通过<br>标签在实现手动控制换行
pre:
不自动处理换行,保留原内容的所有空白符(空格、换行、TAB等)
pre-line:
自动处理换行,保留原内容的换行,其他空白符合并为1个小空格
pre-wrap:
自动处理换行,保留原内容的所有空白符。相比pre,在保留原格式基础上,会自动处理换行
收获
1 Bootstrap图片
之前在做图片自适应的时候想到的办法是把图片作为背景然后添加background-size:100%;让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形,bootstrap中有很好的解决方法
2复习了下拉菜单
3 换行,文字溢出小结
①word-wrap:break-word;
内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。
②word-break:break-all;
用于处理单词折断
③white-space:nowrap;
用于处理元素内的空白,只在一行内显示。
④overflow:hidden;
超出边界的部分隐藏。
⑤、text-overflow:ellipsis;
超出部分显示省略号。
评论