flex写一个简单导航, 以及实例演示课堂中学到的

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

通过学习,熟悉flex弹性盒子布局方式.以及了解了几个grid的几个属性.

1.通过flex弹性盒子布局设计一个简单的导航

html代码如下:

  1.      <header>
  2.         <nav>
  3.             <a href="">首页</a>
  4.             <a href="">男装</a>
  5.             <a href="">女装</a>
  6.             <a href="">家居</a>
  7.             <a href="">手机</a>
  8.             <a href="">食品</a>
  9.             <a href="">帮助中心</a>
  10.         </nav>
  11.         <button>登录</button>
  12.     </header>

css代码如下:

  1. header{
  2.             background-color: brown;
  3.             height: 50px;
  4.             padding: 0px 2em;
  5.             /* 设置header为弹性盒子 */
  6.             display: flex;
  7.             /* 整体两端对齐 */
  8.             place-content: space-between;
  9.         }
  10.         nav{
  11.             line-height: 50px;
  12.             /* 设置nav为弹性盒子 */
  13.             display: flex;
  14.         }
  15.         nav>a{
  16.             /* 父级变成弹性盒子后,项目为变成行内块inline-block */
  17.             text-decoration: none;
  18.             color: rgb(243, 236, 233);
  19.             padding: 0px 20px;
  20.         }
  21.         nav>a:hover{
  22.             background-color: lightpink;
  23.             color: rgb(189, 71, 106);
  24.             transition: 0.3s;
  25.         }
  26.         header>button{
  27.             background-color: bisque;
  28.             border: none;
  29.             width: 100px;
  30.         }
  31.         header>button:hover{
  32.             background-color: lightslategray;
  33.             cursor: pointer;
  34.             transition: 0.3s;
  35.         }

执行效果:

2.实例演示课堂中学到的Grid的属性
  1.    <div class="container">
  2.         <div class="item">文本内容</div>
  3.    </div>
  1.     .container{
  2.             width: 400px;
  3.             height: 200px;
  4.             /* 将元素设置成grid容器 */
  5.             display: grid;
  6.             /* 显式网格 */
  7.             /* grid-template-columns: 100px 100px 100px; */
  8.             /* grid-template-rows: 50px 50px 50px; */
  9.               /* 语法糖 */
  10.             /* grid-template-columns: repeat(4,100px);*/
  11.             /* grid-template-rows: repeat(4,50px);  */
  12.             /* 如果容器的宽高写死的话,可以直接做比例划分 */
  13.             /* fr:比例 ,因为确定了宽和高,可以用fr参数等分*/
  14.             grid-template-columns: repeat(4,1fr);
  15.             grid-template-rows: repeat(4,1fr);
  16.         }

效果如下:

  1.     /* grid-row:起始行号/结束行号
  2.        grid-cloumn:起始列号/结束列号 */
  3.        grid-row:2 /3 ;
  4.        grid-column: 2 / 3;

执行结果:

  1. /* 斜杠前只写出起始列号和行号,/后写跨越的列数和行数 */
  2.           grid-column:2 / span 2;
  3.           grid-row:2 / span 2;

执行效果如下:

  1. /* 网格区域:grid-area:行开始 / 列开始 / 行结束 / 列结束 */
  2.           grid-area:3/3/4/4;

执行效果如下:

  1.  /* 从第二行第二列开始跨越1行和1列 */
  2.           grid-area:2/2/span 1 /span 1;
  3.  /* 如果只跨越1行和1列,可以省略后面的跨越参数 */
  4.           grid-area:2/2;

执行效果如下:

  1. /* 如果跨越不是一行和一列就不能省略 */
  2.     grid-area:2/2/span 2 /span 2;

执行效果如下:

  1.  /* 项目占据最后一行 */
  2.    grid-area:4/1/span 1 /span 4;

执行效果如下:

  1.  /* 占据第一行 */
  2.     grid-area:1/1 /span 1/span 4;

执行效果如下:

经过上面的实操,基本上掌握了目前所学的grid网格布局的几个基础属性的用法.

【文章转东台网页制作公司 http://www.1234xp.com/dongtai.html 网络转载请说明出处】
更多阅读