Day 36 task8-4

今天完成的事情

      基本完成task8-1

遇到的问题

      1.【solved】搞定了换行但右侧标签布局乱了

将右侧的span标签设置成行内块元素

利用flex调整内部布局

      2.【solved】按道理小箭头每行最后一行是没有的，如果隐藏起来，例如hidden-md，会打乱布局，不能与其他步骤对齐。如果设置opacity，就需要设置媒体查询，懒癌晚期实在懒得动手，有个思路就ok

      3.【solved】轮播图一系列样式的修改及各类代码间的关联，比较乱，不写了

      4.【solved】给图片四周设置box-shadow，但左侧图片的右边框被右侧图片遮挡

将每个图片div设为position：absolution;或 position：relative，再将：active状态下的图片设为z-index:100;

搞掂~

      5.【solved】战略合作企业里一共有五张图片，然而栅格布局一共分为十二列，本想将每张图片设为col-md-3然后将col-md-3的宽度设为20%（原25%），操作结束才发现上面用到布局的部分不对劲，想了半天才搞明白，虽说只设置了某个部分下的栅格布局，但调用的时候调用的同一个col-md-3,所以整个页面的.col-md-3都是20%的宽度了，而不是bs默认定义的25%。

解决办法：直接在css样式表中定义五分之一行宽的列

.col-xs-1-5,

.col-sm-1-5,

.col-md-1-5,

.col-lg-1-5 {

position: relative;

min-height: 1px;

padding-right: 10px;

padding-left: 10px;

}

.col-xs-1-5 {

width: 20%;

float: left;

}

@media (min-width: 768px) {

.col-sm-1-5 {

width: 20%;

float: left;

}

}

@media (min-width: 992px) {

.col-md-1-5 {

width: 20%;

float: left;

}

}

@media (min-width: 1200px) {

.col-lg-1-5 {

width: 20%;

float: left;

}

}

      6.【unsolved】友情链接部分

链接的下划线距离字体太近，达不到psd图中又间距的效果

但设置boder之后 这些链接又会出现边框然后浮起来 导致其他的链接布局乱掉

收获

      1.关于换行

a. 强制换行符号<br />换行。(标签内可用);或&#10；

b. 使用CSS设置宽度自动换行。

c. 连续英文字母及数字换行使用CSS换行。用word-wrap: break-word属性及值。

CSS设置不转行CSS属性标签:
overflow:hidden 隐藏——css 隐藏

white-space 属性值

normal      默认。空白会被浏览器忽略。

pre       空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap      文本不会换行，强制在同一行内显示所有文本，直到遇到 <br> 标签为止。

pre-wrap    保留空白符序列，但是正常地进行换行。

pre-line    合并空白符序列，但是保留换行符。

inherit     规定应该从父元素继承 white-space 属性的值。

      2.利用选择器选择类名内元素

[class*="col-"]

选择所有类名中含有"col-"的元素
与此类似的还有：
[class^="col-"]
选择所有类名中以"col-"开头的元素
[class$="-col"]
选择所有类名中以"-col"结尾的元素

      3.对bootstrap的轮播图有了更深刻的理解

      4.box-shadow

box-shadow的基础语法：给块元素设置阴影。 

（1）h-shadow为负值代表左边框设置阴影；若为正值代表右边框设置阴影；若为0则代表左右两边都设置阴影。 

（2）v-shadow为负值代表顶部设置阴影；若为正值代表底部设置阴影；若为0则代表顶部和底部两边都设置阴影。 

（3）blur：只能取非负值，取值为0时代表阴影不具有模糊效果，取值越大代表代表阴影边缘越模糊。 

（4）spread：意思是可扩展半径。取值为正时，值越大代表扩展范围越大；取值为负值时代表阴影缩小。 

（5）inset：代表块元素里面设置阴影。 

（6）outset：代表块元素外面设置阴影，默认值。

       5.bootstrap五列布局

明天计划学习

         继续完成task8

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决