今天完成的事情:

任务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;

超出部分显示省略号。