css弹性盒子、css多媒体查询，bootstrap轮播、bootstrap网格系统

最新推荐文章于 2024-04-21 13:20:41 发布

向阳小草.

最新推荐文章于 2024-04-21 13:20:41 发布

阅读量325

点赞数 1

分类专栏： bootstrap css 文章标签： css bootstrap css3

本文链接：https://blog.csdn.net/m0_63374484/article/details/121720447

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

一.css3弹性盒子

1.CSS3 弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        width: 100%;
        height: 300px;
        background: lightgray;
    }
    
    .flex-item {
        margin: 10px;
        background: goldenrod;
    }
    
    .flex-item-l,
    .flex-item-r {
        flex: 25%;
    }
    
    .flex-item-c {
        flex: 50%;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item flex-item-l">1</div>
        <div class="flex-item flex-item-c">2</div>
        <div class="flex-item flex-item-r">1</div>
    </div>

</body>

</html>

2.css之flex属性
flex属性可以让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    .flex-container {
        width: 100%;
        background-color: cadetblue;
        display: flex;
    }
    
    .flex-item {
        background-color: brown;
        margin: 1px;
        flex: 1;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">
            1
        </div>
        <div class="flex-item">
            2
        </div>
        <div class="flex-item">
            3
        </div>
    </div>
</body>

</html>

3.css之order属性
order属性设置弹性盒对象元素的顺序，默认值是0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    .flex-container {
        height: 200px;
        width: 300px;
        display: flex;
        border: 2px brown solid;
    }
    
    .flex-item {
        width: 40px;
        height: 40px;
    }
    
    .flex-item1 {
        order: 2;
        background-color: chartreuse;
    }
    
    .flex-item2 {
        order: 3;
        background-color: coral;
    }
    
    .flex-item3 {
        order: 1;
        background-color: darkkhaki;
    }
    
    .flex-item4 {
        order: 4;
        background-color: hotpink;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item flex-item1">
            1
        </div>
        <div class="flex-item flex-item2">
            2
        </div>
        <div class="flex-item flex-item3">
            3
        </div>
        <div class="flex-item flex-item4">
            4
        </div>
    </div>
</body>

</html>

4.flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

5.justify-content属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

justify-content: flex-start | flex-end | center | space-between | space-around

6.align-items属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

二.bootstrap网格系统
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

三.bootstrap轮播

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>轮播</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <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>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images1/3.jpg" alt="First slide" style="width: 400px;height: 300px;margin: auto;">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images1/4.jpg" alt="Second slide" style="width: 400px;height: 300px;margin: auto;">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images1/5.jpg" alt="Third slide" style="width: 400px;height: 300px;margin: auto;">
                <div class="carousel-caption"></div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <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>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</body>

</html>

四.css多媒体查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 页面宽度小于600px时盒子会隐藏 */
    
    @media screen and (max-width:600px) {
        .zz {
            display: none;
        }
    }
</style>

<body>
    <div class="zz" style="background-color: brown;height: 100px;width: 100px;">
        111
    </div>



</body>

</html>

向阳小草.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css弹性盒子、css多媒体查询，bootstrap轮播、bootstrap网格系统

一.css3弹性盒子1.CSS3 弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫