前端面试入坑指南：HTML & CSS 篇

前端

2023-02-11 03:58:38

前端面试必备神器：HTML和CSS

HTML：网页骨架，坚实基础

作为前端开发的基石，HTML（超文本标记语言）构筑了网页的结构。面试中，你可能会遇到有关HTML的基础问题，例如：

HTML的结构组成：标签、属性、值
HTML常用标签：<div>, <p>, <a>, <img>等
HTML布局：float, position, flexbox, grid等
HTML语义化：正确使用标签网页内容

CSS：锦上添花，展露风采

CSS（层叠样式表）负责网页的视觉呈现。面试官可能深入询问其进阶知识，如：

CSS选择器：类、ID、伪类等
CSS布局：float, position, flexbox, grid等
CSS动画：创建生动效果
CSS预处理器（如Sass、Less）：提高开发效率

高频面试题：检验真功夫

1.自适应布局：HTML+CSS实现

给定一个HTML结构，请用CSS实现自适应布局。

<div class="container">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

2.导航栏下拉菜单：HTML+CSS构建

创建一个带有下拉菜单的导航栏。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style-type: none;
  display: flex;
}

nav ul li {
  padding: 0 1rem;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  background-color: #fff;
}

3.表单设计：HTML+CSS创建

创建一个包含各种输入控件的表单。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">

  <label for="email">Email:</label>
  <input type="email" id="email">

  <label for="message">Message:</label>
  <textarea id="message"></textarea>

  <input type="submit" value="Send">
</form>

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

form label {
  margin-bottom: 0.5rem;
}

form input, form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
}

form input[type="submit"] {
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

4.表格排序和分页：HTML+CSS实现

创建一个表格，支持数据排序和分页。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <!-- ... more rows -->
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

table thead th {
  cursor: pointer;
}

table tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

5.图片画廊：HTML+CSS展示

创建一个图片画廊，支持图片放大和缩小。

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- ... more images -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.gallery img {
  object-fit: contain;
  cursor: pointer;
}

.gallery img:hover {
  transform: scale(1.1);
}