发表于: 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(透明)就好了,页面中看到的还是图片,点击图片就会播放音频

收获:如上

   

                              

               

                   

       

             



返回列表 返回列表
评论

    分享到