Skip to content

longyiyiyu/P2-E-commerce-home-page

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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。

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

阶段题目传送门

更多项目

如果你练完本项目之后,

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

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

公众号二维码

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

About

之道前端原创项目 - 电商 PC 首页

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 57.3%
  • CSS 31.0%
  • HTML 11.7%