发表于: 2018-07-12 22:23:39

2 666


    今天完成的事情:

1.写任务8.

2.学习Bootstrap轮播图



    明天计划:

1.继续完成任务8

2.巩固前面的知识


    遇到的问题:

研究使用轮播图和媒体查询时花了较长时间


    收获总结:


今天学习了display与visibility属性的差别

visibility属性:

确定元素显示还是隐藏;
visibility="visible|hidden",visible显示,hidden隐藏。

当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置

display属性:

就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。

block:
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<DIV>元素一样,它会在那个点

被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<DIV>一样工作。

inline:
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<DIV>,它也将会被组合成像<span>那样的输出流。

none:
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。


巩固知识点:css padding与margin的区别

Margin的特性:margin始终是透明的

垂直外边距合并:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。


padding的特性:padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。

行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,

从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。

不允许指定负边距值。


何时应当使用margin:

需要在盒子外侧添加空白时。

空白处不需要背景(色)时。

上下相连的两个盒子之间的空白,需要相互抵消时。如5px + 10px的margin,将得到10px的空白。

何时应当时用padding:

需要在盒子内测添加空白时。

空白处需要背景(色)时。

上下相连的两个盒子之间的空白,希望等于两者之和时。如5px + 10px的padding,将得到15px的空白。


bootstrap轮播:

应用bootstrap框架实现轮播十分方便,先引用bootstarp样式

<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
   <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="#.png" >
    </div>
    <div class="item">
            <img src="#.png" >
    </div>
    <div class="item">
            <img src="http:#.png" >          //引入做轮播图的图片
    </div>
  </div>
</div>



今天研究轮播图和媒体查询时花了比较多的时间,进度有点慢







返回列表 返回列表
评论

    分享到