布局实战,导航栏的制作

1. html 的结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
  <link rel="stylesheet" media="screen and(min-width: 1100px)" href="css/widescreen.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet">
  <title>铄洋在线 | 前端在线学习平台</title>
</head>
<body>
  <nav id="navbar">
    <h1 class="logo">
      <span class="text-primary">
        <i class="fas fa-book-open">
          铄洋在线
        </i>
      </span>
    </h1>
    <ul>
      <li><a>Home</a></li>
      <li><a>What</a></li>
      <li><a>Who</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>
</body>
</html>

页面文档的结构

 

 

 

2. css 的样式

/* rest */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}
a {
  text-decoration: none;
}
p {
  margin: 0.75rem 0;
}

/* utility classes */
.text-primary {
  color: #32cb52;
}

/* navbar */
#navbar {
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  background: #333;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1rem;
}

#navbar ul {
  display: flex;
  list-style: none;
  /* 以中心点进行对齐 */
  align-items: center;
}
#navbar ul li a {
  color: white;
  padding: 0.75rem;
  margin: 0 0.25rem;
}
#navbar ul li a:hover {
  background: #93cb52;
  border-radius: 5px;
}

3. 重点

去除页面的基本样式

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}
a {
  text-decoration: none;
}
p {
  margin: 0.75rem 0;
}

 

 

posted @ 2022-03-25 14:59  会前端的洋  阅读(90)  评论(0)  编辑  收藏  举报