IBM 在前端 / full-stack 岗位的 OA 里会出现一类 CSS-only layout 题, 和算法题完全不同:
- 给一份已经写好的
index.html和空白src/css/style.css - read-only 文件:
app.js,src/index.html,src/index.js,test/* - 你只能改
style.css, 通过视觉对照 + Jest 截图测试
因为这类题用不上 Python/Java/C++ Tabs, 单独抽到本文件存档. 主算法库见 IBM OA.
Complete a website layout with the following components positioned correctly.
Components:
headermainfooter- Copyright text
- Social media icons (Facebook, Twitter, Instagram)
- "Back to Top" link
Requirements:
- The footer must use a dark background color
#222222. - The footer must have a fixed height of
80px. - All text inside the footer must be light green
#1ba94c. - The three footer sub-blocks (copyright / social icons / back-to-top) must sit on a single row.
- Social media icons must render at
24pxsize. - The
mainelement must be1000pxtall so the page is scrollable. - The markup is already provided. You must only modify
src/css/style.css.
Provided markup (read-only src/index.html):
<!DOCTYPE html>
<html>
<head>
<title>Footer Design Website Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<h8k-navbar header="Footer Design Website Layout"></h8k-navbar>
<main>
<h1>Home page</h1>
</main>
<footer class="footer">
<div class="copyright"> 2024 Your Company Name</div>
<div class="social-icons">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<a href="#top" class="back-to-top">Back to Top</a>
</footer>
<script src="./bundle.js"></script>
</body>
</html>解法
Single-row footer with three children: classic flexbox job. Set the footer to display: flex, align-items: center, justify-content: space-between, and fix height: 80px + background: #222222. Color #1ba94c cascades through all text and inherits to <a> (need explicit override since anchors default to blue). Icons get sized via the i.fab selector at font-size: 24px (font-awesome icons are font glyphs, not raster). Padding on the footer keeps content off the edges.
Reference src/css/style.css:
body {
margin: 0;
font-family: Arial, sans-serif;
}
main {
height: 1000px;
padding: 16px;
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
padding: 0 24px;
background-color: #222222;
color: #1ba94c;
}
.footer .copyright,
.footer .social-icons,
.footer .back-to-top {
color: #1ba94c;
}
.footer .social-icons {
display: flex;
gap: 16px;
}
.footer .social-icons i.fab {
font-size: 24px;
color: #1ba94c;
}
.footer .back-to-top {
text-decoration: none;
color: #1ba94c;
}考点: flex 容器三段式分布 (space-between), 文字颜色继承 + anchor 显式覆盖, font-awesome 图标用 font-size 控制大小, fixed height vs min-height 的区别.