前端项目实战2

目录

 display:none

父元素是fixed，子元素是absolute

独自成行

@media查询（媒体查询）

标签的宽高

 做圆形  border-radius: 50%; 

---

 display:none

#menu-bar{
    color: #fff;
    border: .1rem solid #fff;
    border-radius: .5rem;
    font-size: 3rem;
    padding: .5rem 1.2rem;
    cursor: pointer;
    display: none;
}

display:none 也会脱离文档流。

如果要实现“一开始先藏起来，缩小浏览器到一定程度时，展现”可以用这个display属性。

@media(max-width:768px){
    #menu-bar{
        display: initial;
    }
}

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

<nav class="navbar">
            <a href="#">首页</a>
            <a href="#">book</a>
            <a href="#">packages</a>
            <a href="#">home</a>
            <a href="#">home</a>
            <a href="#">home</a>
        </nav>

@media(max-width:768px){
    #menu-bar{
        display: initial;
    }
    header .navbar{
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #333;
    }
}

父元素是fixed，子元素是absolute

子元素会相对父元素定位。

！所以注意，并不是所有父元素都一定要用relative！

top: 100%;——则表示在父元素header的下方，他们紧密相连。

独自成行

除了《前端项目实战1》里面的，让input元素的width：100%，让他们各自占一行

还可以让a元素转成块元素（display：block），也可以让a元素独自占一行。

@media查询（媒体查询）

1、什么是媒体查询？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2、媒体查询与弹性盒布局的适用情况

媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒

作者：molly的红草帽
链接：https://www.jianshu.com/p/516c47ef9ac0
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

/* media queries */
@media(max-width:1200px){
    html{
        font-size: 55%;
    }
}

@media(max-width:991px){
    header{
        padding: 2rem;
    }
}

@media(max-width:768px){
    #menu-bar{
        display: initial;
    }
    header .navbar{
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #333;
        border-top: .1rem solid rgba(255, 255, 255, .2);
        padding: 1rem 2rem;
        clip-path: polygon(0 0,100% 0,100% 0,0 0);
    }
    header .navbar a{
        display: block;
        border-radius: .5rem;
        padding: 1.5rem;
        margin: 1.5rem 0;
        background: #222;
    }
}

@media(max-width:450px){
    html{
        font-size: 50%;
    }
}

<video>标签的宽高

.home .video-container video{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

当设置video的宽高时，发现视频宽高并没有发生变化，因此设置 source的父元素宽高，让其填充video父元素。需要给video标签添加 height: 100%; width: 100%;object-fit: cover;样式即可。

设置z-index:-1

这里有大学问。

关于 z-index，你可能一直存在误区_程序员黑叔的博客-CSDN博客

 做圆形  border-radius: 50%; 

 <div class="controls">
            <span class="vid-btn" data-src="images/vid-1.mp4"></span>
            <span class="vid-btn" data-src="images/vid-2.mp4"></span>
            <span class="vid-btn" data-src="images/vid-3.mp4"></span>
            <span class="vid-btn" data-src="images/vid-4.mp4"></span>
            <span class="vid-btn" data-src="images/vid-5.mp4"></span>
        </div>

.home .controls .vid-btn{
    height: 2rem;
    width: 2rem;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin: 0 .2rem;
}