博客列表 >12.23作业

12.23作业

-   迷舍人
- 迷舍人原创
2019年12月25日 18:00:24708浏览

先说一下总结把

12.20的导航作业 一开始觉得挺难的 然后第一次做的时候不知道谁和谁定位,然后自己看了别的同学的代码做参考 定位不准确 然后就是在浏览器审查元素中添加 样式 来看看效果 , 现在可以用,但是还是欠佳

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex</title>
  6. <style>
  7. .container{
  8. border: 1px dashed;
  9. /*只要加了padding border 必须要加box-sizing*/
  10. box-sizing: border-box;
  11. background-color: #b3d4fc;
  12. }
  13. .item{
  14. width: 100px;
  15. height: 50px;
  16. background-color: #63a35c;
  17. border: 1px red dashed;
  18. }
  19. .container{
  20. /*转为弹性盒子*/
  21. display: flex;
  22. /*子元素全部转为行内块元素,水平排列可以设置宽和高*/
  23. }
  24. .container{
  25. /*1设置容器中的主轴方向* 水平 垂直 */
  26. /*flex-direction: row;*/
  27. /*flex-direction: column;*/
  28. /*2是否允许创建多个容器 一行排不下 是否允许换行显示*/
  29. /*不允许换行*/
  30. /*flex-wrap: nowrap;*/
  31. /*允许换行*/
  32. /*flex-wrap: wrap;*/
  33. /*3 flex-flow是上面两个的简写 第一个是主轴的方向 第二个是是否换行显示*/
  34. flex-flow: row wrap;
  35. /*4设置容器中的项目在主轴上的对齐方式 左对齐 右对齐 居中对齐*/
  36. /*justify-content: flex-start;*/
  37. /*justify-content: flex-end;*/
  38. /*justify-content: center;*/
  39. /*分配主轴上的剩余空间 两端对齐 分散对齐 平均对齐*/
  40. /*justify-content: space-between;*/
  41. /*justify-content: space-around;*/
  42. justify-content: space-evenly;
  43. /*5项目在交叉轴上的排列方式*/
  44. height: 200px;
  45. /*在上部显示*/
  46. /*align-items: flex-start;*/
  47. /*在底部显示*/
  48. /*align-items: flex-end;*/
  49. /*在居中显示*/
  50. /*align-items: center;*/
  51. /*6设置项目在多行容器交叉轴上的对齐方式*/
  52. /*两端对齐*/
  53. /*align-content: space-between;*/
  54. /*分散对齐*/
  55. /*align-content: space-around;*/
  56. /*平均对齐*/
  57. align-content: space-evenly;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="container">
  63. <span class="item">1</span>
  64. <span class="item">2</span>
  65. <span class="item">3</span>
  66. <span class="item">4</span>
  67. <span class="item">5</span>
  68. <span class="item">6</span>
  69. <span class="item">7</span>
  70. <!-- <span class="item">8</span>-->
  71. <!-- <span class="item">9</span>-->
  72. <!-- <span class="item">10</span>-->
  73. <!-- <span class="item">11</span>-->
  74. </div>
  75. </body>
  76. </html>




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议