CSS布局练习

你的名字 2022-05-22 11:48 287阅读 0赞

70

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Page Title</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" type="text/css" media="screen" href="test7-8.css" />
  9. </head>
  10. <body>
  11. <header>
  12. <div id="logo">
  13. <h2>Logo</h2>
  14. <div>
  15. <a>Github</a> <a>Register</a> <a>Login</a>
  16. </div>
  17. </div>
  18. </header>
  19. <div id="banner">
  20. <div id="haha">
  21. <div id="hahaha">
  22. <div class="click">1</div>
  23. <div class="click">2</div>
  24. <div class="click">3</div>
  25. <div class="click">4</div>
  26. </div>
  27. </div>
  28. </div>
  29. <nav>
  30. <div>
  31. <div>HOME</div>
  32. <div>PROFILE</div>
  33. <div>ABOUT</div>
  34. </div>
  35. </nav>
  36. <main>
  37. <div class="flex1">
  38. <div class="content">This is Content 1</div>
  39. <div class="content">MaybeContent 2</div>
  40. <div class="content">Content 3</div>
  41. </div>
  42. <div class="flex2">
  43. <div class="content">Content 4</div>
  44. <div class="content">Content 5</div>
  45. <div class="content">Content 6</div>
  46. <div class="content">Content 7</div>
  47. </div>
  48. <div class="flex1">
  49. <div class="content">Content 8</div>
  50. <div class="content">Content 9</div>
  51. <div class="content">Content 10</div>
  52. </div>
  53. </main>
  54. <footer>
  55. <div>© 2018 ife.baidu.com</div>
  56. </footer>
  57. </body>
  58. </html>
  59. * {
  60. font-family: "Microsoft YaHei";
  61. }
  62. header {
  63. width: 100%;
  64. background-color: black;
  65. }
  66. #banner {
  67. background-color: rgb(153, 204, 51);
  68. width: 100%;
  69. height: 200px;
  70. }
  71. #haha {
  72. width: 960px;
  73. height: 200px;
  74. margin: 0 auto;
  75. }
  76. #hahaha {
  77. width: 100px;
  78. height: 20px;
  79. float: right;
  80. display: flex;
  81. justify-content:center;
  82. align-items:center;
  83. margin-top: 175px;
  84. }
  85. .click {
  86. text-align: center;
  87. width: 15px;
  88. height: 20px;
  89. margin-left: 5px;
  90. border-left: 1px solid gray;
  91. border-right: 1px solid gray;
  92. background-color: rgb(208, 243, 202);
  93. }
  94. footer {
  95. width: 100%;
  96. height: 100px;
  97. background-color: gray;
  98. text-align: center;
  99. color: white;
  100. }
  101. nav {
  102. width: 100%;
  103. height: 75px;
  104. border-bottom: 1px solid gray;
  105. }
  106. nav > div {
  107. width: 960px;
  108. height: 75px;
  109. margin: 0 auto;
  110. font-size: 0;
  111. }
  112. nav div div {
  113. display: inline-block;
  114. border: 1px solid gray;
  115. border-bottom: none;
  116. height: 50px;
  117. width: 100px;
  118. text-align: center;
  119. line-height: 50px;
  120. margin-top: 25px;
  121. font-size: 16px;
  122. border-top-left-radius: 1.5em;
  123. border-top-right-radius: 1.5em;
  124. }
  125. main {
  126. width: 960px;
  127. margin: 0 auto;
  128. }
  129. .flex1 {
  130. display: flex;
  131. margin-top: 10px;
  132. margin-bottom: 10px;
  133. justify-content: space-between;
  134. }
  135. .flex2 {
  136. display: flex;
  137. margin-top: 10px;
  138. margin-bottom: 10px;
  139. justify-content: space-between;
  140. }
  141. .content {
  142. text-align: center;
  143. padding: 80px;
  144. border: 1px solid gray;
  145. flex-grow: 1;
  146. }
  147. #logo {
  148. width: 960px;
  149. height: 75px;
  150. margin: 0 auto;
  151. }
  152. header h2 {
  153. color: white;
  154. float: left;
  155. }
  156. header > div > div{
  157. color: white;
  158. float: right;
  159. }
  160. a {
  161. text-decoration: underline;
  162. }

发表评论

表情:
评论列表 (有 0 条评论,287人围观)

还没有评论,来说两句吧...

相关阅读

    相关 css布局

    默认文档流是从左到右,从上到下的排列元素。 脱离文档流会打破这种排列方式。 float和clear(浮动和清除) 浮动可以让原来上下堆叠的块级元素,变成左右并列

    相关 css 布局

    转自:https://segmentfault.com/a/1190000013565024 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中

    相关 css - 布局 - rem布局

    物理像素 物理像素是屏幕设备的尺寸单位,在不同的设备中1px里可以容纳的像素颗粒是不相同的,所以1px这个单位其实也是有N个像素颗粒填充的。同一尺寸屏幕的每个像素点所能容