— / 2已做
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>Pro解法 · 三语代码 · 复杂度分析
边界讨论 + 面试官追问 · $98 / 一年解锁
Pro 会员
解锁全部 1 道题的解法
题面你已经看到了 — 解法 + 三语代码 + 复杂度推导 + 边界讨论, Pro 解锁.
Pro 解锁全部
- 📚1000+ 道真实北美 OA, Python / Java / C++ 三语题解
- 📊个人 dashboard + 进度可视化 + 14 天活跃图
- 📝题目笔记跨设备同步 + 个人复盘库
- 🔓随时取消下次续费, Stripe Customer Portal 自助管理