2020年的第一篇博客--2020 2 21

最新推荐文章于 2021-01-13 00:23:59 发布

对不起我眼睛进沙子了

最新推荐文章于 2021-01-13 00:23:59 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/u014584271/article/details/104436931

版权

这个周学习了bootstrap的栅格系统了解了媒体查询等功能的使用方法,下面让我来介绍一下

bootstrap相关内容

准备工作

首先要使用bootstrap,要为页面的内容包裹一个.container的布局容器(或.container-fluid宽度占满viewport)
接着在网站下载bootstrap的相关文件,进行<link style="xx" src="">等处理

栅格系统

创建一个<div class="row">的"行"让其包含在.container或.container-fluid中
这时候.row会在水平方向创建一组"列"(这个列被划分成十二份)
接着在.row之下创建类名为.col-xx-x元素

栅格参数

	<768px	>=768px	>=992px	>=1200px
排列方式	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	同上	同上
类名	`.col-xs-$`	`.col-sm-$`	`.col-md-$`	.`col-lg-$`

在ViewPort尺寸变化后,栅格的排列方式也将变化,如表格所示

           <div class="row">
                <div class="col-sm-4">
                    <img src="../Bootstrap_index/img/sass-less.png" alt="sass&less logo">
                    <h3>预处理脚本</h3>
                    <p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - <a href="../css/#less">Less</a> 和 <a href="../css/#sass">Sass</a> 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。
                </div>
                <div class="col-sm-4">
                    <img src="./img/devices.png" alt="页面适应">
                    <h3>一个框架、多种设备</h3>
                    <p>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。</p>
                </div>
                <div class="col-sm-4">
                    <img src="./img/components.png" alt="特性介绍">
                    <h3>特性齐全</h3>
                    <p>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
                </div>
            </div>

上述代码加css实现的样式(这是仿写Bootstrap的页面)

在这里插入图片描述
可以看到,这里使用的.col-sm-4的类名.在.row中刚好排为三列,撑满了十二列.

当屏幕像素小于768时,就会出现媒体查询的效果,
在这里插入图片描述
变成了一行.

这样我就写完了,可是到头来我根本没有自己用到媒体查询,学姐也说让我写自己写一个,于是我就写了一个页面,还加了一点看到的c3里面好玩的东西进去.
这个页面写的很简单,想法是这样的,页面的上方有个导航栏,在视口尺寸缩小到一定值的时候导航栏消失被一个按钮取代位置,按钮点击之后让导航栏重新出现.
页面结构很简单

<body>
    <div class="container">
        <nav>
            <input type="checkbox" id="nav" class="hidden">
            <label for="nav" class="nav-btn">
                <i class="st"></i>
                <i class="ed"></i>
                <i class="rd"></i>
            </label>
            <div class="logo"><a href="#">MINECRAFT</a></div>
            <div class="nav-wrapper">
                <ul>
                    <li class="st"><a href="#">GAMES</a></li>
                    <li class="ed"><a href="#">COMMUNITY</a></li>
                    <li class="rd"><a href="#">MERCH</a></li>
                    <li class="last"><a href="#">SUPPORT</a></li>
                </ul>
            </div>
        </nav>
    </div>
</body>

创建了一个input元素来当按钮,关联一个label下面放三个子元素用来当按钮的样式
然后一个logo
一排导航信息就这个亚子
首先普通页面的导航栏就设置一下li的margin a的字体什么的等参数就能做出来.很简单
在这里插入图片描述
然后就开始媒体查询了!

@media screen and (max-width:768px)

至于为什么是768呢,陪我最长时间的那台显示器就是768的,情有独钟,而且栅格的分界也有个768嘛

然后就开始了!首先让导航信息的父元素透明化,就隐藏了,其次我想做一个按钮点击之后出现一个蒙层的效果,就让这个父元素大小是窗口大小,让它
代码写出来是这样的.然后别忘记定位,后面要用z-index让它到所有元素最上面

.nav-wrapper{
        position: fixed;  //开一波定位,后面要用z-index
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;      //透明化
        transition: all 0.2s ease;
    }

然后把导航栏里面元素的样式也设置一下

.nav-wrapper ul li{
        display: block;      //变成block
        float: none;         //本来是添加了浮动,现在关掉,就可以让选项竖排显示
        width: 100%;		 //父元素的窗口就是100%宽,结合下面的效果刚好就可以让文字居右
        text-align: right;   //做一个让导航文字靠右的效果
        margin: 0;
    }

接下来就是按钮的设计了
按钮采用input+label元素,利用了css3的checked选择
首先这个input选框太丑,直接隐藏掉
rh12s1

.hidden{
	display: none;
}
.nav .nav-btn{
	position: fixed;
        right: 10px;
        top: 10px;
        display: block;
        width: 48px;
        height: 48px;
        cursor: pointer;
        z-index: 9999;
        border-radius: 50%;
}

之后再设置label下面的三个i元素,这三个i元素想让它们变成三条竖线的按钮代码也很简单

.nav-btn i{
        display: block;
        width: 20px;
        height: 2px;
        background-color: #000;
        border-radius: 2px;
        margin-left: 14px;
    }

接着再单独设置每个i的margin-top就行了

效果图: 在这里插入图片描述

接着就开始利用checked选择了
在label被点击之后就让导航栏显示出来
改一个opacity: 1;
接着就做一个网上学的小动画效果
让中间的i元素隐藏,让下边和上面的i元素移到中间,然后进行旋转,最后把整个label也旋转做出来一个x的效果在这里插入图片描述
代码:

#nav:checked + .nav-btn{
    transform: rotate(45deg);  //先让label旋转45°
}
#nav:checked + .nav-btn i{
    transition: transform 0.2s ease; //让所有的i标签动画效果持续0.2s,看到变换的感觉
}
#nav:checked + .nav-btn i.st{
    transform: translateY(6px) rotate(180deg);//向下移动6像素,i元素宽是2px m-t设的是4px刚好到中间,然后让元素旋转,不旋转也可以看到x.但是画动画效果看着会不舒服
}
#nav:checked + .nav-btn i.ed{
    opacity: 0;    
}
#nav:checked + .nav-btn i.rd{
    transform: translateY(-6px) rotate(90deg);//和上面一样啦
}

每个导航栏元素动画延续,加上一个transition,时间就0.2s吧
接着用transition-delay让每个元素属性变化推迟0.2s,依次递增,这样就能做出动画的效果

.nav-wrapper ul li.st a{
        transition-delay: 0.2s;
    }
    .nav-wrapper ul li.ed a{
        transition-delay: 0.4s;
    }
    .nav-wrapper ul li.rd a{
        transition-delay: 0.6s;
    }
    .nav-wrapper ul li.last a{
        transition-delay: 0.8s;
    }
    .nav-wrapper ul li a{
        transition: all 0.2s ease;
    }

接着就是一开始不设置导航栏元素的边距,在checked之后加上边距,就会产生很美观的动画效果
在这里插入图片描述

然后就是logo在透明蒙层下不美观直接

display: none;

就这样了

对不起我眼睛进沙子了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020年的第一篇博客--2020 2 21

这个周学习了bootstrap的栅格系统了解了媒体查询等功能的使用方法,下面让我来介绍一下bootstrap相关内容准备工作首先要使用bootstrap,要为页面的内容包裹一个.container的布局容器(或.container-fluid宽度占满viewport)接着在网站下载bootstrap的相关文件,进行<link style="xx" src="">等处理栅格...
复制链接

扫一扫