今天完成的事情：

1、轮播图的自动播放

<div id="carousel-ad" class="carousel slide" data-ride="carousel">

应用于轮播图容器的属性data-ride是用来激活轮播图容器

此外，还有其他一些属性：

data-interval：设置轮播图开始自动轮播的间隔时间，单位为毫秒，如设置为1000，则每隔1秒换一次图片，当设置为false时，不会自动轮播

data-pause：支持hover和null值，默认hover。指的是鼠标停留在轮播图上时将停止自动轮播，鼠标离开后立刻开始轮播

data-wrap：轮播到最后一张图时是否重新开始

下面时应用于显示器的列表项：

data-target：用于指定它们所控制的轮播图

data-slide-to：应用于轮播显示器内的列表项，指定单击该列表项时轮播跳转到第第几张图片，0代表第一张

data-slide：用于前后控制按钮，支持prev和next，分别表示显示上一张图和下一张图

2、更换轮播图样式

在优秀学院展示部分，同样应用到轮播图，但指示器样式不同

对其进行修改

#carousel-elite .carousel-indicators { /*carousel-elite是轮播图的id*/

    bottom: 0px;  /*更改指示器位置，默认是20px*/

}

#carousel-elite .carousel-indicators li {

    background-color: #fff;

    box-shadow: 0 2px 2px #dedede;

}

#carousel-elite .carousel-indicators .active{

    background-color: #29b078;

    box-shadow: none;

    border: none; 

}

3、边框阴影

UI图中圆形div的立体效果，通过为边框加阴影实现。

用到box-shadow

box-shadow: 0 1px 5px #dedede;

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需。水平阴影的位置。允许负值。

v-shadow：必需。垂直阴影的位置。允许负值。

blur：可选。模糊距离。

spread：可选。阴影的尺寸。

color：阴影颜色

inset：外部阴影改为内部阴影。

4、战略合作企业部分的边框效果

box-shadow的效果是应用于整个边框的，但是战略合作企业中衔接处没有边框

所以改为边框的内阴影inset

border-bottom-style: inset;

明天计划的事情

完成合作企业的页面

遇到的问题

1、战略合作企业部分hover时部分边框缺失

当鼠标悬浮在logo区域时右边边框缺失，只有最右边图片可以显示完整边框

猜测原因是图层顺序从左到右递增，导致左图的右边框被右图遮挡

因此，解决方法是，在hover选择器中设置z-index

.substrate:hover {

    z-index: 5;

    box-shadow: 0 0 5px #dedede;

}

可以解决这个问题

2、友情链接部分

将ul中的li横向排列

在导航栏设置中，把display改为inline-block可以横向。

但是无序列表项前的小黑点会消失，因为小黑点的存在是由于列表的默认display：list-items

因此保留list-items样式的同时，横向排列。可以在li选择器中添加float：left

然而观察ui图，超链接的横向划在小黑点和文字的底部

只为li添加超链接不能在小黑点下划线。

所以，取消了list的样式，通过伪元素的方式自行添加黑点。

.links ul li::before {

    content: "";

    display: inline-block;

    margin-right: 7px;

    width:5px;

    height:5px;

    background-color: #999;

    vertical-align: middle;

    border-radius: 100%;

}

效果如下图

收获

弹性盒子真的太好用了！

对bootstrap的轮播图更加熟悉

熟悉了边框样式的更改

了解了无序列表中小黑点的来源，如果为一个span设置display：list-items也会在前面显示小黑点

*了解一下伪类和伪元素*

伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after

正确的利用伪元素和伪类能够让我们的html结构更清晰合理，也能在一定程度上减少js对dom的操作！

伪类用于向某些选择器添加特殊的效果。

1.用于链接的几个伪类元素

:link            用这个可以设置未被访问的链接的样式

:visited        用这个设置已经被访问的链接的样式

:hover          用于设置将鼠标悬浮在链接上的样式

:active          用于设置鼠标点击链接时到鼠标松开时的样式

:focus           用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）

2.常用于列表元素<i>的几个伪类

:first-child                  选中列表中的第一个元素

:last-child                   选中列表中的最后一个元素

:nth-child()                 括号里面的取值可以为三类：1)数字   :nth-child(3)表示选中父元素的第三个子元素

                                                                                 2)自变量为n的表达式     :nth-child(3n)代表选中父元素的第3,6,9.....3n的子元素

                                                                                 3)even或者odd     分别代表选中父元素的奇数或者偶数个子元素

:nth-last-child()         与 :nth-child()的不同点在于，这个是从最后一个元素开始计算，取值都是一样的。 

原文链接：https://blog.csdn.net/allenyhy/article/details/81565989

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：

::first-letter 选择元素文本的第一个字（母）。

::first-line 选择元素文本的第一行。

::before 在元素内容的最前面添加新内容。

::after 在元素内容的最后面添加新内容。

原文链接：https://www.cnblogs.com/zhangchs/p/11056833.html