image.png

index.html

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