发表于： 2019-07-29 19:37:07
1 975
今天完成的事情
完成任务七第二个图
关于还原ui图过程中遇到的问题如下
1.图二与图一之间的网页跳转，如下按钮需要实现跳转功能
实现方法：使用 a 标签
语法如下：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
网页跳转路径和图片的使用路径的方法是一样的
2.使用播放按钮控制音乐播放与暂停
实现方法：使用 audio 标签
原 理：首先使用ps将播放按钮
切图下来，置于右方，之后使用html中的audio标签生成一个播放器界面如下：
将audio播放器使用transform转换180度，使用固定定位将其固定在图片按钮上方，使audio的播放按钮和图片按钮重叠，
最终将audio播放器使 用 opacity设置为透明，从而造成是橙黄色图片按钮起作用的假象。
opacity：value；
value范围为0-1，从完全 透明到不透明
audio的使用：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<audio controls="controls">
<source src="horse.ogg" >
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>
属性（在controls="controls"后继续添加以下属性）：
3.非等边三角形的制作
实现方法： 盒子模型的border
原 理： 之前了解到盒子模型的border并不是一个长方形，而是如下形状
非等边三角形的实现同样使用border的这一属性，原理就是将boorder四个边取消一个，从而展现出来尖角三角形，代码如下：
效果如下
4.以下界面的还原
实现方法：:hover
原 理：以上“水民”，“1号”，“四个图标”三个子元素放在一个父盒子内，添加visibility参数设置四个图标为隐藏（visibility:hidden;)，为父盒子设置:hover属性（visibility:visible;),使其显示
代码如下（使用:hover关联父元素和子元素，从而达到点击 父盒子，子盒子可以显示效果）：
今天的收获
1.学会使用audio
2.伪元素:hover的进一步使用
明天的计划
1.完成任务七第三张图
2.将任务七三张图优化，关联起来
返回列表
评论