[散修弟子]CSS-8175|2019年08月11日的日报-技能树.IT修真院

发表于： 2019-08-11 20:15:24

1 835

今天完成的事情：

任务7改错的日报忘记写了，今天补上。

1、图片控制音频播放

刚开始用embed嵌入音频后设置了自动播放，师兄说不行，得点击图片控制播放和暂停，我以为这是需要js才可以完成得事情。

后来经过师兄的指点实现了css和html的控制。

embed嵌入音频时，有一个默认的音频控制面板。

长这样

用播放图片控制音频的播放暂停

就是将控制面板的播放按钮重合在图片上，造成达到目的的假象。

在embed元素中，width和height控制面板的大小

缩短到这个长度，如果宽度再小chrome中播放按钮可能会被音量控制按钮挤出面板，难以控制。

放到播放按钮的位置上，并修改z-index，使面板处于上层。

使面板透明，露出下层的播放图片。opacity=0；（截图中是0.1）

但是面板播放按钮在左边，如果对齐图片会影响布局。

所以要水平翻转面板，让播放按钮和图片重叠实现代码：transform:rotate(180deg);

2、解决iphone5大小的屏幕中hover的4个元素高度塌陷问题

刚开始的时候为了使图标在白框中居中，通过设置图标元素的margin值。但即使是vw单位，也无法保证在任何屏幕尺寸中都保持居中。

于是将白框修改为弹性盒子。

align-items和justify-content均设置为center，使图标水平垂直居中。

当鼠标移至角色方块区域时4个白框均显示。展示方式为flex

3、footer元素不能挡住文字

底部添加一个白色的与footer同高的div

4、今天继续做任务8

完成了首页的轮播图

明天计划的事情：

完成任务8的首页。

实现首页布局，为其添加样式；

优秀学员展示做成轮播图

战略合作企业hover时添加效果

实现底部网站、链接为超链接形式

制作任务8职位列表的雪碧图

遇到的问题：

1、bootstrap轮播图

昨天做到轮播图的时候，添加了图片但是左右图片纵向排列。今天找到了原因并解决。

轮播图是bootstrap框架中的js插件

因此除了css样式要导入html头部，还要导入jQuery和JavaScript。

如果只用到bootstrap的css样式，大多数情况下只导入第一行就够了。

昨天我的图片纵向排列的原因就是，只导入了第一行，如果jquery没有导入，图片会停留在第一张，无法切换其他图片。

静态轮播图由如下几个部分组成

轮播图容器：通常是div元素，需要应用.carousel样式

轮播图指示器：通常是ol或ul列表，每个列表项对应一个轮播图，该指示器需要应用.carousel-indicators样式

轮播图主体：就是包含多张图片的部分，一个div元素应用carousel-inner样式，role=“listbox”，其中的每个元素放在指定了clas=“item”的div元素中，如果需添加说明，通过应用carousel-caption样式的div添加。

轮播图控制按钮：应用.carousel-control样式，role=“button”，左边的指定.left样式，右边的指定.right样式

官网给出的html如下：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
   <ol class="carousel-indicators">
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>
   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
     <div class="item active">
       <img src="..." alt="...">
       <div class="carousel-caption">
         ...
       </div>
     </div>
     <div class="item">
       <img src="..." alt="...">
       <div class="carousel-caption">
         ...
       </div>
     </div>
     ...
   </div>
   <!-- Controls -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
 </div>