search

博客列表 >1104作业 线上第九期作业

1104作业 线上第九期作业

大葫芦
大葫芦原创
2019年11月12日 11:55:36531浏览

  1. 弹性容器的两种类型

    QQ截图20191112111159.png


  2. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/public.css">
    <title>弹性容器的两种类型</title>
</head>
<body>
<h3>1.块级弹性容器</h3>
<div class="container flex">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
</div>
<h3>2.行内弹性容器</h3>
<div class="container inline-flex">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
</div>
<div class="container inline-flex">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
    <div class="item">item3</div>
</div>
</body>
</html>
  3. .container{
    border: 2px dashed red;
    margin: 15px;
    background-color: #009999;

}
/*弹性元素的通用样式*/
.item{
     box-sizing: border-box;
     border: 1px solid;
     padding: 20px;
     background-color: aquamarine;
 }
/*块级盒子容器*/
.flex{
    display: flex; /*转为块级容器*/
    flex-direction: row;/*默认从左到右水平排列*/
}
/*内联盒子容器*/
.inline-flex{
    display: inline-flex;/*行内块容器（内联）*/
}

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  4. 手抄代码IMG_20191112_113513.jpg


  6. 导航

  7. 图片.png

  8. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style2.css">
    <title>弹性容器做导航</title>
</head>
<body>
<nav>
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
    <a href="">软件下载</a>
    <a href="">联系我们</a>
</nav>
</body>
</html>

/*样式*/
@import "public.css";
a{
    text-decoration: none;
    background-color: aquamarine;
    color: #000;
    border-radius: 5px 5px 0 0;
    margin: 0 5px;
    padding: 5px 10px;
}
nav{
    display: flex;
    border-bottom: 1px solid black;
}
/*hover鼠标移动到元素上  focus 获取焦点例如（tab键获取焦点） active 当鼠标点击后*/
a:hover ,a:focus, a:active{
    background-color: #ffc600;
    color: white;

}

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  9. 手抄代码

  10. IMG_20191112_113522.jpg



  1. 图片.png


  2. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style3.css">
    <title>弹性元素的主轴上的排列方向</title>

</head>
<body>
<h3>1.row:从左到右</h3>
<div class="container flex row">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>
<h3>2.row-reverse:从右到左</h3>
<div class="container flex row-reverse">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>
<h3>3.row-reverse:从上到下</h3>
<div class="container flex column">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>
<h3>4.row-reverse:从下到上</h3>
<div class="container flex column-reverse">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>

</body>
</html>


@import "public.css";
.row{
    flex-direction: row;
}
.row-reverse{
    flex-direction: row-reverse;
}
.column{
    flex-direction: column;
}
.column-reverse{
    flex-direction: column-reverse;
}

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  3. IMG_20191112_113525.jpg

  4. 网站首页

    图片.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style4.css">
    <title>网站首页</title>
</head>
<body>
<header>
    <h2>这是个博客首页</h2>
</header>
<nav>
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
    <a href="">软件下载</a>
    <a href="">联系我们</a>
</nav>
<main>
    <article>
        <img src="img/js.jpg" alt="js">
        <p> JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。</p>
        <button>立即学习</button>
    </article>
    <article>
        <img src="img/js.jpg" alt="js">
        <p> JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。</p>
        <button>立即学习</button>
    </article>
    <article>
        <img src="img/js.jpg" alt="js">
        <p> JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。</p>
        <button>立即学习</button>
    </article>

</main>
<footer>
    <p>
        Copyright © 2018 - 2021 php中文网
    </p>
</footer>

</body>
</html>


@import "style2.css";
*{
    outline: 1px solid #ccc;/*辅助线*/
    margin: 10px;
    padding: 10px;
}

body,nav,main,article{
    display: flex; /*把所有元素转换为 块级容器*/
}
/*这里垂直排列的容器是 头部 导航  内容 跟底部文件 需要垂直排列*/
body,article{
    flex-direction: column;
}
footer{
    border-top:1px solid #ccc;
}
img{
    width: 550px;
}
nav{
    padding-bottom: 0;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

IMG_20191112_113530.jpg

IMG_20191112_113541.jpg

图片.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style5.css">
    <title>弹性元素溢出与创建多行容器</title>
</head>
<body>
<h2>以主轴水平方向为例进行演示</h2>
<h3>1.nowrap;默认不换行，元素自动缩小到最小值</h3>
<div class="container flex row nowrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
<h2>以主轴水平方向为例进行演示</h2>
<h3>2.wrap;换行，元素超过宽度自动换行</h3>
<div class="container flex row wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
<h2>以主轴水平方向为例进行演示</h2>
<h3>2.wrap;换行，元素超过宽度自动换行</h3>
<div class="container flex row wrap-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
</body>
</html>



@import "public.css";
.container{
    width: 500px;
}
.nowrap{
    flex-direction: row;
    flex-wrap: nowrap;/*默认不换行*/
}
.wrap{
    flex-direction: row;
    flex-wrap: wrap;/*换行*/
}
.wrap-reverse{
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

IMG_20191112_113556.jpg

图片.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style6.css">
    <title>弹性元素溢出与创建多行容器</title>
</head>
<body>
<h2>以主轴水平方向为例进行演示</h2>
<h3>1.nowrap;默认不换行，元素自动缩小到最小值</h3>
<div class="container flex row nowrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
<h2>以主轴水平方向为例进行演示</h2>
<h3>2.wrap;换行，元素超过宽度自动换行</h3>
<div class="container flex row wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
<h2>以主轴水平方向为例进行演示</h2>
<h3>3.wrap;换行，元素超过宽度自动换行反序排列</h3>
<div class="container flex row wrap-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
</body>
</html>

@import "public.css";
.container{
    width: 500px;
}
.nowrap{

    flex-flow: row nowrap;/* 第一个值是主轴方向  第二个是换行方式 */

}
.wrap{
   /* flex-direction: row;
    flex-wrap: wrap;!*换行*!*/
    flex-flow: row wrap;
}
.wrap-reverse{
   /* flex-direction: row;
    flex-wrap: wrap-reverse;!* 元素超过宽度自动换行 反序排列*!*/
    flex-flow: row wrap-reverse;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style7.css">
    <title>弹性元素在主轴上的分布</title>
</head>
<body>
<h2>弹性元素在主轴上的分布</h2>
<p>单行</p>
<div class="container flex flex-start space-around">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
</div>
<h2>2.弹性元素在主轴上的分布</h2>
<p>多行</p>
<div class="container flex center wrap space-evenly">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
</div>
</body>
</html>

@import "public.css";
.wrap{
    flex-wrap: wrap;/*换行*/
}
/*左中右空间排列属性justify-content:*/
.flex-start{
  justify-content: flex-start;/*从起点开始 起点是左边*/
}

.flex-end{
    justify-content: flex-end;/*从终点开始  终点是从右边*/
}
.center{
    justify-content: center;   /*居中开始 就像文字的居中显示一样*/
}
/*剩余空间分配方案*/
/*空间都是以space开始的*/
.space-between{
    /*紧贴两边 剩余空间中间分配*/
  justify-content: space-between;
}
.space-around{
    /*两边空间是里面空间的一般 */
    justify-content: space-around;
}
.space-evenly{
    /*所有空间平均分布*/
    justify-content: space-evenly;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

IMG_20191112_113601.jpg

图片.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style8.css">
    <title>使用弹性元素改写导航</title>
</head>
<body>
<nav>
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
    <a href="">软件下载</a>
    <a href="">联系我们</a>
</nav>
</body>
</html>

@import "public.css";
a{
    text-decoration: none;
    background-color: aquamarine;
    color: #000;
    border-radius: 5px 5px 0 0;
    margin: 0 5px;
    padding: 5px 10px;
}
nav{
    display: flex;
    border-bottom: 1px solid black;
}
/*hover鼠标移动到元素上  focus 获取焦点例如（tab键获取焦点） active 当鼠标点击后*/
a:hover ,a:focus, a:active{
    background-color: #ffc600;
    color: white;

}
nav{
     justify-content: flex-start;/*居左显示*/
 }
nav{
    justify-content: center;/*居左显示*/
}
nav{
    justify-content: flex-end;/*居左显示*/
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style9.css">
    <title>弹性元素在垂直方向（交叉轴）上的对齐方式</title>
</head>
<body>
<div class="container flex wrap center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<div class="container flex wrap flex-center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
<div class="container flex wrap wrap-flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>

<div class="container flex wrap wrap-flex-center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
<h2>5.垂直多行空间分配</h2>
<div class="container flex wrap wrap-flex-center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
</body>
</html>

@import "public.css";
.container{
    width: 500px;
    height: 300px;
}
.wrap{
    flex-wrap: wrap;/*换行*/
}
.stretch{
    /*专用于设置单行容器中元素在垂直轴上的排列方向*/
    align-items: stretch;/*stretch 是默认值是从上往下并且充满整个单元格*/
}
/*单行*/
.flex-start{
    /*元素紧贴起点开始显示*/
    align-items: flex-start;
}
.flex-end{
    /*元素紧贴终点开始显示*/
    align-items: flex-end;
}
.center{
    /*元素中间排列*/
    align-items: center;
}



/*设置多行容器中弹性元素的对齐方式和空间分配方案*/
.wrap-stretch{
    align-content: stretch; /*stretch 是默认值是从上往下*/
}
.wrap-flex-stretch{
    align-content: flex-start;/*多行从上往下*/
}
.wrap-flex-end{
    align-content: flex-end; /*多行从底部向上*/
}
.wrap-flex-center{
    align-content: center;
}
.wrap-space-between{
    align-content: space-between;
}
.wrap-space-around{
    align-content: space-around;
}
.wrap-space-evenly{
    align-content: space-evenly;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

IMG_20191112_113623.jpg

上一条：PHP基础环境搭建，PHP基础总结，第九期线上班20191112下一条：我是如何理解 PHP 的？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多