Blogger Information
Blog 7
fans 0
comment 1
visits 1890
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1.flex导航 2.grid简单演示
PHP中文网用户-6406556
Original
215 people have browsed it

代码演示

  1. <div class="box">
  2. <nav class="nav1">
  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. <a href="">下载app</a>
  11. </nav>
  12. <div class="nav2">
  13. <a href="">登录</a>
  14. <a href="">注册</a>
  15. </div>
  16. </div>
  17. <div class="grid">
  18. <div class="item">111</div>
  19. </div>
  20. <style>
  21. body {
  22. margin: 0;
  23. padding: 0;
  24. box-sizing: border-box;
  25. }
  26. .box {
  27. display: flex;
  28. height: 50px;
  29. padding: 0 400px;
  30. background-color: lightcyan;
  31. box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
  32. flex-flow: row nowrap;
  33. place-content: space-between;
  34. /* place-items: center; */
  35. }
  36. .nav1 {
  37. display: flex;
  38. text-align: center;
  39. }
  40. .nav2 {
  41. display: flex;
  42. text-align: center;
  43. }
  44. .nav1 a {
  45. color: rgb(150, 150, 150);
  46. text-decoration: none;
  47. min-width: 5em;
  48. line-height: 50px;
  49. }
  50. .nav2 a {
  51. color: rgb(150, 150, 150);
  52. text-decoration: none;
  53. min-width: 3.5em;
  54. line-height: 50px;
  55. }
  56. a:hover {
  57. color: black;
  58. transition: 0.1s;
  59. }
  60. .grid {
  61. margin-top: 2em;
  62. width: 20em;
  63. height: 10em;
  64. background-color: #ccc;
  65. display: grid;
  66. grid: repeat(4, 1fr) / repeat(4, 1fr);
  67. }
  68. .item {
  69. background-color: lightgreen;
  70. grid-area: 2/2/5/5;
  71. }
  72. </style>

Correcting teacher:PHPzPHPz

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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!