---
title: Forty页面仿写
summary: 完成 HTML、CSS 代码编写，暂无 JavaScript
created: 2022-03-10T08:38:17.227Z
preview: ''
draft: ''
tags:
  - CSS
  - HTML
lastmod: 2022-04-07T07:39:48.473Z
---

## 题目

来源：[百度前端学院｜浮动实战任务](http://ife.baidu.com/csspart/floatTask.html)

通过 HTML 及 CSS 参考[示例图](https://b.bdstatic.com/searchbox/icms/searchbox/img/task1.png)实现页面开发，要求实现效果与示例图基本一致

- 页面宽度固定（定宽）, 请应用 CSS 浮动以及前几天所学的 CSS 样式来完成页面效果
- 只需要完成 HTML、CSS 代码编写，不需要写 JavaScript

## 示例图

![](https://s2.loli.net/2022/03/10/V9ZpjQYFvxEDGXJ.jpg)

## Demo

https://forty-seviche.netlify.app/

耗时：4 小时（还没有做自适应等很多东西……╮(￣ ▽ ￣"")╭