Skip to content

Latest commit

 

History

History
77 lines (46 loc) · 2.34 KB

README.md

File metadata and controls

77 lines (46 loc) · 2.34 KB

P2 电商 PC 首页

项目简介

项目介绍

本项目是 CSS 实践的第一个项目,我们随大众,选择了电商 PC 首页。

为什么这么选择?主要有以下原因:

  • 传统的 PC web 会更加基础,没有移动端的响应式那么复杂
  • PC web 比较适合练习基础布局技巧
  • 电商首页足够复杂,包含很多常见的模块,如果你可以完成电商首页的话,大部分的样式问题都不成问题

核心练习知识点

本项目主要核心是练习 HTML & CSS,掌握常用的 PC web 样式实现技巧。

本项目适合重复练习和琢磨,不断优化你的 HTML & CSS 代码。

这样你才会有更深层次的收获。

练习本项目你会收获什么?

  • 学会正确使用 HTML 实现复杂的 PC web 页面
  • 学会正确使用 CSS 实现复杂的 PC web 页面
  • 【进阶】学会如何应用 HTML 语义化合理架构复杂页面
  • 【进阶】深刻理解 CSS 三大特性
  • 【进阶】深刻理解 HTML 和 CSS 的边界,以及它们两者如何配合
  • 【进阶】学会如何编写更有语义的 HTML & CSS 代码
  • 【进阶】逐渐形成自己的代码风格

如果只实践一次,那就只会有基础收获

只有不断练习、思考、优化,才会有进阶收获

本项目适合的同学

  • 处于 L0&L1 水平的同学
  • 对 HTML & CSS 还不熟练的同学
  • 还没深刻理解 HTML & CSS (语义化、边界、配合)的同学
  • 还没形成自己的 HTML & CSS 编码风格的同学
  • 没怎么写过 C 端页面,大部分时间在做 admin 系统的同学

项目大纲

s1 淘宝登录页

按照设计稿实现淘宝登录页

阶段题目传送门

s2 天猫首页

按照设计稿实现天猫首页

阶段题目传送门

s3-o 无限轮播 banner

用纯 css 实现一个无限轮播的 banner。

本阶段是可选的,如果你想挑战这个难题的话,那就来吧!

阶段题目传送门

更多项目

如果你练完本项目之后,

有所收获,却觉得不过瘾,还想练习更多项目的话,

就点击加入 之道前端 吧,海量原创项目和众多学习伙伴在等着你!

公众号二维码

学前端,来之道 —— 陪伴式自学前端圈子