image.png

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,mininum-scale=1.0">
  8. <title>Document</title>
  9. <!-- 引入初始化样式 -->
  10. <link rel="stylesheet" href="css/normalize.css">
  11. <!-- 引入首页样式 -->
  12. <link rel="stylesheet" href="css/index.css">
  13. </head>
  14. <body>
  15. <header class="app">
  16. <ul>
  17. <li>123</li>
  18. <li>123</li>
  19. <li>123</li>
  20. <li>123</li>
  21. </ul>
  22. </header>
  23. </body>
  24. </html>

index.css

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

.app ul li {
  float: left;
  height: 50px;
}

.app ul li:nth-child(1) {
  width: 8%;
  background-color: #232326;
}

.app ul li:nth-child(2) {
  width: 10%;
  background-color: #232326;
}

.app ul li:nth-child(3) {
  width: 57%;
  background-color: #232326;
}

.app ul li:nth-child(4) {
  width: 25%;
  background-color: #cd2525;
}