Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础flex术语-PHP培训十期线上班 学号：510251 12月23日作业
Blogger Information
Blog 119
fans 3
comment 1
visits 94386
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基础flex术语-PHP培训十期线上班 学号：510251 12月23日作业
赵大叔
Original
685 people have browsed it

默写flex6个属性及功能

CSS基础flex术语

1.flex-direction:设置容器中的主轴方向

flex-direction: row;：默认值，水平方向，行；

flex-direction: cloum;：垂直方向，列；

2.flex-wrap:设置容器是否允许换行

flex-wrap: nowrap;: 默认不换行

flex-wrap: wrap;: 换行

3.flex-flow: 1和2两个属性的简写

flex-flow: row wrap; : 水平，换行

4.justify-content:设置容器中弹性项目在主轴上的对齐方式

justify-content: flex-start;默认，左对齐

justify-content: flex-end;右对齐

justify-content: center; 居中*/

分配主轴上剩余空间
justify-content: space-between;两端对齐

justify-content: space-around;分散对齐

justify-content: space-evenly;平均对齐

5.align-items:设置项目在交叉轴上的排列方式

先增加高度
align-items:flex-start;默认，顶部
align-items:flex-end;下到上

align-items:center;居中

6.align-content:设置项目在多行容器中在交叉轴上的对齐/排列方式

align-content:space-around;分散对齐

align-content: space-between;两端对齐

align-content: space-evenly;平均对齐

分析12月20日作业

1、布局分析

2、代码分析

3、代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="static/font/iconfont.css">
  6.     <title>12月20作业</title>
  7.     <style>
  8.         * { /*初始化*/
  9.             margin:0; /*内边距*/
  10.             padding: 0; /*外边距*/
  11.             font-size: 13px; /*字体*/
  12.             /*outline: 1px dashed red; !*轮廓线条*!*/
  13.         }
  15.         a { /*字体初始化*/
  16.            color: #555;
  17.             font-size: 13px;
  18.             text-decoration: none; /*下划线去掉，decoration修饰*/
  19.         }
  20.          /*设置容器样式，少用ID，框架才用ID*/
  21.         .index-header { /*.index-header 选择器*/
  22.             width: 1200px;
  23.             min-height: 300;
  24.             margin:30px auto; /*居中*/
  25.         }
  27.         .index-header > .top{ /* >：子元素； 空格：所有后代元素*/
  28.             height: 70px;
  29.             position: relative; /*转为定位父级，relative相对定位*/
  30.         }
  32.         .index-header > .top * { /*统一样式，*表示所有*/
  33.             height: inherit;  /*inherit继承*/
  34.             line-height: 70px; /*垂直居中，设置行高*/
  35.         }
  37.         /*设置logo*/
  38.         .index-header > .top > .logo {
  39.             width: 176px;
  40.             position: absolute; /*绝对定位*/
  41.             top:0; /*logo相对top，左上0*/
  42.             left: 0;
  44.         }
  45.         /*设置搜索框*/
  46.         .index-header > .top > .search{
  47.             width: 330px;
  48.             position: absolute;
  49.             top: 0;
  50.             right: 350px; /*6个图标，占300px*/
  51.         }
  52.         /*设置图标*/
  53.         .index-header > .top > .quick-start{
  54.             width: 300px;
  55.             position: absolute;
  56.             top: 0;/*quick-start相对top，右上0*/
  57.             right: 0;
  58.         }
  60.         .index-header > .top > .logo img{
  61.             height: 100%;
  62.             display: block; /*清除下边框*/
  63.         }
  64.         /*搜索框*/
  65.         .index-header > .top > .search >input[type="search"]{ /*选择：input标签+属性*/
  66.             width: 330px;
  67.             height: 36px;
  68.             border-radius: 10px; /*设置圆角*/
  69.             padding: 10px;
  70.         }
  71.         /*放大镜*/
  72.         .index-header > .top > .search >input[type="search"]+label{ /*+号表示选择相临元素*/
  73.            font-size: 23px;
  74.             margin: -30px; /*移动放大镜，支持负值*/
  75.             position: relative;
  76.             top: 5px;
  77.         }
  78.         /*鼠标停留：hover*/
  79.         .index-header > .top > .search >input[type="search"]:hover{ /*阴影*/
  80.             box-shadow: 0 0 5px #888888; /*665，66有偏移*/
  81.         }
  82.         /*快速入口*/
  83.         .index-header > .top>.quick-start>span{
  84.             font-size: 33px;
  85.             margin-right: 6px;
  86.         }
  88.         .index-header > .top>.quick-start>span:hover{
  89.             color: red;
  90.             cursor:pointer;
  91.         }
  92.         /*导航区*/
  93.         .index-header >.nav{
  94.             height: 44px;
  95.         }
  97.         .index-header >.nav> .nav-item{
  98.             width: 300px; /*1200/4=300*/
  99.             height: inherit; /*继承*/
  100.             position: relative; /*转为定位元素*/
  101.             float: left; /*左右浮动*/
  102.         }
  104.         .index-header >.nav> .nav-item>.iconfont{
  105.             font-size: 40px;
  106.             color: red;
  107.             position: absolute;
  108.             /*top: ;
  109.             left: ;*/
  110.         }
  111.         .index-header >.nav> .nav-item>.tag{
  112.             width: 40px;
  113.             position: absolute;
  114.             left: 45px; /*5像素间隙*/
  115.             border-right: 1px solid #cccccc;  /*右边框*/
  116.         }
  117.         .index-header >.nav> .nav-item>.links{
  118.             width: 160px;
  119.             position: absolute;
  120.             left:95px;
  121.         }
  122.         .index-header >.nav> .nav-item>.links>a{
  123.             margin: 4px;
  124.         }
  125.         .index-header >.nav> .nav-item>.links>a:hover{
  126.             color: red;
  128.         }
  130.         .index-header>.slider-ads{
  131.             height: 320px;
  132.             position: relative;
  133.         }
  135.         .index-header>.slider-ads>.slider{
  136.             width: 900px;
  137.             position: absolute;
  139.         }
  140.         .index-header>.slider-ads>.ads{
  141.             width: 295px;
  142.             position: absolute;
  143.             right: 0; /*从右边开始*/
  145.         }
  147.         .index-header>.slider-ads img{
  148.             height: 100%;
  149.             display: block;
  151.         }
  152.         .index-header>*{
  153.             margin: 20px 0; /*紧*/
  154.         }
  155.     </style>
  156. </head>
  157. <body>
  159. <div class="index-header">
  160. <!--    上：logo+search+incon-->
  161.     <div class="top">
  162.         <div class="logo">
  163.             <a href=""><img src="static/images/logo.png" alt=""></a> <!--链接里放图片-->
  164.         </div>
  165.         <div class="search">
  166.             <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  167. <!--            阿里图标一定要放内联框架里显示，label，class，放大镜图标-->
  168.         </div>
  169.         <div class="quick-start"> <!--快速入口-->
  170.             <span class="iconfont icon-huiyuan1"></span>
  171.             <span class="iconfont icon-charutupian"></span>
  172.             <span class="iconfont icon-shangyibu"></span>
  173.             <span class="iconfont icon-icon_tianjia"></span>
  174.             <span class="iconfont icon-huiyuan2"></span>
  175.             <span class="iconfont icon-html"></span>
  176.         </div>
  178.     </div>
  180. <!--    中：导航，nav-->
  181.     <div class="nav">
  182.         <div class="nav-item" >
  183.             <span class="iconfont icon-DOC"></span> <!--图标；iconfont基础样式-->
  184.             <div class="tag">
  185.                 <span>资讯</span>
  186.                 <span>学习</span>
  187.             </div>
  188.             <div class="links">
  189.                 <a href="">器材</a> <!--ctrl+d,复制-->
  190.                 <a href="">器材</a>
  191.                 <a href="">器材</a>
  192.                 <a href="">器材</a>
  193.                 <a href="">器材</a>
  194.                 <a href="">器材</a>
  195.                 <a href="">飞机</a>
  196.                 <a href="">其它</a>
  197.             </div>
  198.         </div>
  199.         <div class="nav-item" >
  200.             <span class="iconfont icon-DOC"></span>
  201.             <div class="tag">
  202.                 <span>资讯</span>
  203.                 <span>学习</span>
  204.             </div>
  205.             <div class="links">
  206.                 <a href="">器材</a>
  207.                 <a href="">器材</a>
  208.                 <a href="">器材</a>
  209.                 <a href="">器材</a>
  210.                 <a href="">器材</a>
  211.                 <a href="">器材</a>
  212.                 <a href="">器材</a>
  213.                 <a href="">器材</a>
  214.             </div>
  215.         </div>
  216.         <div class="nav-item" >
  217.             <span class="iconfont icon-DOC"></span>
  218.             <div class="tag">
  219.                 <span>资讯</span>
  220.                 <span>学习</span>
  221.             </div>
  222.             <div class="links">
  223.                 <a href="">器材</a>
  224.                 <a href="">器材</a>
  225.                 <a href="">器材</a>
  226.                 <a href="">器材</a>
  227.                 <a href="">器材</a>
  228.                 <a href="">器材</a>
  229.                 <a href="">器材</a>
  230.                 <a href="">器材</a>
  231.             </div>
  232.         </div>
  233.         <div class="nav-item" >
  234.             <span class="iconfont icon-DOC"></span>
  235.             <div class="tag">
  236.                 <span>资讯</span>
  237.                 <span>学习</span>
  238.             </div>
  239.             <div class="links">
  240.                 <a href="">器材</a>
  241.                 <a href="">器材</a>
  242.                 <a href="">器材</a>
  243.                 <a href="">器材</a>
  244.                 <a href="">器材</a>
  245.                 <a href="">器材</a>
  246.                 <a href="">器材</a>
  247.                 <a href="">器材</a>
  248.             </div>
  249.         </div>
  250.     </div>
  252. <!--    下：轮播，slider+广告，ads-->
  253.     <div class="slider-ads">
  254.         <div class="slider">
  255.             <a href=""><img src="static/images/1.jpg" alt=""></a>
  256.         </div>
  257.         <div class="ads">
  258.             <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
  259.         </div>
  260.     </div>
  262. </div>
  264. </body>
  265. </html>

4、效果图

分析12月20日作业总结

第一眼看到这题作业真的是两眼一抹黑，没的丝毫头绪。在此先要感谢网友的博客让我有了初部的布局思路。
经过老师课堂讲解以后思路就更加明了的，但是小白的我还是看了好几遍视频才搞清楚。
现在的我也可以做到自己独立完成这个作业了。
最后感谢同学的分享，感谢老师的耐心教导。

知识总结：
Html标签要熟悉，做到看到效果图能马上想到该用什么标签。
CSS布局定位要十分熟练。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：标签的使用场景 , 在布局时要注意, 一些规范要灵活运用, 不能太死板
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post