发表于: 2018-07-16 23:50:29

1 665


今天完成的事情

任务8进行中

学习了图片轮播

师兄小课堂知识分享(媒体查询)

媒体查询@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

@media 媒体类型and (媒体特性){你的样式}

主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。例如:

(max-width:----px)

十种媒体类型<其中ScreenAllPrint为最常见的三种媒体类型>13种媒体特性,将其组合就类似于不同的CSS集合.

媒体特性是通过min/max来表示大于等于或小于做为逻辑判断

使用关键词"and"将多个媒体特性结合在一起

 

not”是用来排除某种制定的媒体类型

 only用来指定某种特定的媒体类型

Media Query中如果没有明确指定Media Type,那么其默认为all

明天计划的事情

1熟悉网格系统

2继续任务8

遇到的问题

在引入bootstrap 轮播(carousel)没有搞清楚属性含义,导致没有引用成功,后来发现错误纠正后可以引用

使用 data-slide-to 来向轮播传递一个原始滑动索引

属性 data-slide 接受关键字 prev next,用来改变幻灯片相对于当前位置的位置

<div id="myCarousel" class="carousel slide">



<
ol class="carousel-indicators">
    <
li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <
li data-target="#myCarousel" data-slide-to="1"></li>
    <
li data-target="#myCarousel" data-slide-to="2"></li>
</
ol>

<
div class="carousel-inner">
    <
div class="item active">
        <
img src="../image/task8/work.png" alt="First slide">
    </
div>
    <
div class="item">
        <
img src="../image/task8/work.png" alt="Second slide">
    </
div>
    <
div class="item">
        <
img src="../image/task8/work.png" alt="Third slide">
    </
div>
    <
a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <
span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <
span class="sr-only">Previous</span>
    </
a>

 

收获:

1搞清了媒体查询是什么。(明天尝试用一下)

2引用bootstrap 中的carousel,高效方便。(属性含义要理解正确)



返回列表 返回列表
评论

    分享到