【菜狗学前端】小米官网首页+千图网（HTML+CSS项目练手）

1.小米官网首页

小米官网(首页)演示地址：foxicaigou.github.io/xiaomishouye/https://foxicaigou.github.io/xiaomishouye/

小米官网github源码：https://github.com/foxicaigou/xiaomishouyehttps://github.com/foxicaigou/xiaomishouye

ps：小米官网的轮播图，用了Swiper的组件。

swigger官网：Swiper演示 - Swiper中文网

2.千图网

千图网(5个页面)演示地址：Documenthttps://foxicaigou.github.io/qiantuwang/index.html

千图网github源码：https://github.com/foxicaigou/qiantuwanghttps://github.com/foxicaigou/qiantuwang

3.练手后经验总结

其实用HTML+CSS写静态页面并不难，主要需要注意的点大概就是排版布局。

1.如何使用诸如flex弹性盒还有float浮动（还有网格布局，但我项目里没用这个布局）进行常规布局，使用层布局(定位)实现一些特殊的位置效果等等。

2.以及各种居中，行内（行内块）元素居中，水平/垂直居中；块级元素本身居中，水平/垂直居中。

3.以及margin、padding内外边距的设置，<div>区域的划分，命名之类的。

4.像一些导航栏、连着数行类似构造布局部分之类的，能用<ul>+<li>就用，当时我也不太明白为什么不直接用<div>，现在想来用列表标签不仅好使用元素选择器，而且也比无语义纯容器作用的<div>更具语义性。

当时在百度这个问题时有位网友说的话我印象深刻：万物皆可<div>难道要整个网页全都是<div>标签吗？

有点好笑，但是似乎也不无道理。

需要达到的标准，当看到一个页面时，要怎么把它实现？

• 首先如何划分区域，哪些适合在一个部分进行编写比较方便合适？
• 其次，是否有重复的部分可以抽取出来，无论是html部分还是css部分。
• 再次，每个区域布局具体如何实现，能想到几种方法，哪种更简洁更好？

慢慢加油，超爱写项目练手，会很有成就感的！