发表于: 2019-03-01 23:07:14

1 749


今天完成的事情:完成了任务七。

明天计划的事情:修改任务七的问题,提交任务七,开始 任务八。 

遇到的问题:自适应盒子引用雪碧图。

收获:在此熟悉了hover属性,使首页下方的小圆点,可以变色;和使投票页面上4个小图标的显示。

          学习了如何插入音频,和如何使“播放音频的按钮”出现在想要的位置。

          学习了如何半透明。使背景透明化。

           学习了超链接,将3个页面联系起来。

1 hover属性:在鼠标没有接触次元素时,此项内容不显示,或者不生效。接触该元素才显示或生效。

 例首页小圆点。

.yuandian:hover {
background-color: #69d1e9;
}

.yuandian 意义是 选择名字为yuandian的元素

.yuandian:hover 意义是 当鼠标(光标)移动到此yuandian元素上时,运行下面代码(命令)。

.yuandian:hover {background-color: #69d1e9;} 意义是当鼠标(光标)移动到此yuandian元素上时,运行背景颜色为#69d1e9。

例投票页

先将四个图标的盒子设置为隐藏(.do {display:none})

.role:hover .do{display: block}

.role 意义是 选择名字为role的元素

.role:hover 意义是 当鼠标(光标)移动到此role元素上时,运行下面代码(命令)。

.role:hover .do 意义是 当鼠标(光标)移动到此role元素上时,运行选择元素do。

.role:hover .do{display: block}意义是 当鼠标(光标)移动到此role元素上时,运行选择元素do属性block。此时do元素就显示出来。


2 如何插入音频

<div class="music">
   <audio controls="controls">
       <source src="task7-music.mp3" type="audio/mp3">
   </audio>
</div>

<div class="music">是为了再后面更好的设置播放按钮。

<audio controls="controls">是控制音乐播放。注意是闭合标签。

<source src="task7-music.mp3" type="audio/mp3">意义:src是插入什么音乐,同img;type代表类型。

如何使音频按钮和图像重叠。

第一:将播放按钮和图像重叠。采用控制audio的宽的长度,来只让现实出播放按钮。之后再调位置,使他和图片重叠。

第二:是音乐播放器隐藏。设置audio {opacity: 0;},页面就只有这个图标,但点击却可以出现音乐。


3如何半透明化

opacity:设置 div 元素的不透明级别,办透明就是opacity:0.5;

但他是对div整体透明,不满足任务要求。

之对背景颜色透明选择:rgba。

background:rgba(41,189,224,0.5) none repeat scroll !important;

rgba(41,189,224,0.5)前3个是颜色rgb,第四个是透明度。


4超链接<a></a>

<a href="网页" >点击跳转网页</a>

注意封闭标签

注意超链接默认有下划线。



返回列表 返回列表
评论

    分享到