发表于: 2018-07-29 21:27:59
0 684
任务七完成的事情:
1.为三个页面需要的图片切图,生成sprites
2.搭建bootstrap框架 下载bootstrap文档,在head头标签中加入:
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
框架是搭起来了,不过没有用bootstrap中的类名控制样式,类名各种属性还不太熟悉,用的是自定义样式控制css样式,打算有空挖一下bootstrap框架
3.完成第一个页面:版本选择 用到的还是很基础的东西,float、盒子、div+css排版,用定位position固定header和图标
4.完成第二个页面:投票 用的还是前面任务所学习到的东西,有不一样的是要增加一个音频播放功能,学习到了<audio>标签,
<audio>标签:用于在文档中表示音频内容。
src属性:定义音频的文件地址
control属性:对音频文件进行控制,操作它的进度、暂停播放、音量等(不同的浏览器会显示不同的样式模板) chrome浏览器的control样式:
其他属性:
声明音频<audio>有两种格式: 格式1:<audio src="音频的路径">
</audio>
格式2:<audio>
<source src="音频的路径"></source>
</audio>
5.完成第三个页面:结果 做这个页面get到一个知识点,关于透明和半透明,有两种方式:
方式一:<opacity>属性
opacity属性设置元素的不透明级别,属性值value从0.0(完全透明)到1.0(完全不透明)
方式二:background-color:rgba(0-255,0-255,0-255,0.0-1.0),前三个数字是RGB定义的颜色,最后面一个数字定义透明 度(0.0(完全透明)到1.0(完全不透明))
页面其他部分用的还是盒子,定位,浮动等知识点。
6.给几个页面之间加上链接跳转
先将要跳转的div盒子做成按钮,然后用<a>标签包覆在盒子上,<a>标签中加入链接;可以实现各个页面之间的跳转。
还有一种方式就是表单输入input属性,将它的type设置成button,然后在herf中加入点击按钮后要跳转的链接。
7.理解【深度思考】中的问题
(1)什么是css sprites?
css sprites也被称为css精灵,它是一种网页图片处理方式,它允许将一个页面中所要使用的零星图片放到一张大图中去,主要是为了减少http的访问数量,防止页面加载延迟;
css sprites实现的原理是:把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
参考:https://baike.baidu.com/item/css%20sprite/1139316?fr=aladdin
(2)什么是浮动,有哪些清除浮动的方法?
浮动float属性:定义元素(盒子)在哪个方向浮动;浮动的框可以向左或向右移动,直到它的边缘碰到包含框或另一个浮动框为止,由于浮动框不在文档的普通流中,所以文档的普通流中的块框就像浮动框不存在一样。
float属性值:left:元素向左浮动 right:元素向右浮动 none:元素不浮动
清除浮动的方法:<1> clear:none(允许两边都有浮动)|left(不允许左边有浮动)|right(不允许右边有浮动)|both(不允许有浮动对象)
<2>给父元素设置overflow:hidden,有缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素 参考:https://blog.csdn.net/sinat_36533893/article/details/69668622
(3)rgba和opacity的透明效果有什么不同?display和visiblity有什么区别?
background-color:rgba()和opacity都可以对元素进行透明度的设置,但不同的是:
opacity除了对背景生效外,对应用元素的内容也会继承透明度的设置,
background-color:rgba()只作用于元素的颜色或者背景色
display和visiblity都可以将元素隐藏,但不同的是:
display设置为none时,元素会被隐藏掉,并且当前的位置不再占据,
visiblity设置为hidden时,元素会被隐藏,但是当前的位置还是会被占据
(4)描述一下z-index和叠加上下文是如何形成的?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
层叠上下是基于z轴的一个环境,这个环境一直存在,它默认的层叠顺序的原则是:·同级元素中,后面的元素会覆盖前面的元素
·父子元素中,子元素覆盖父元素;层叠顺序:就是层叠上下文元素在层叠上下文中的顺序
参考:https://blog.csdn.net/cat_sky/article/details/80302245
https://blog.csdn.net/chen1057376155/article/details/51933665
(5)如果在手机上查看投票页,没有hover效果时怎么办?
:hover元素定义为用于选择鼠标指针浮动在上面的元素
在移动端没有鼠标,所以移动端没有hover特效,但是点击的时候会触发click,再次点击就会消失
解决方法:使用触摸事件(touch),触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。
明天计划的事情:因为要回趟家(大概得近1-2周),带不了电脑,所以暂停,不过会总结下前面学到的东西,重点是bootstrap框架
遇到的问题:
1.设置投票页面<audio>的时候,control的控制样式有一长串,页面中只需要暂停播放的按钮,而且control样式也需要隐藏?
问了下师兄,先将control暂停播放按钮的位置调整到页面中暂停播放图片的位置上,然后把control样式设置为opacity:0(透明)就好了,页面中看到的还是图片,点击图片就会播放音频
收获:如上
评论