html+css实现静态小米商城界面的学习感受与收获

最新推荐文章于 2024-08-17 18:47:23 发布

yinjie77

最新推荐文章于 2024-08-17 18:47:23 发布

阅读量3.4k

点赞数 4

分类专栏：前端学习历程文章标签： html css

本文链接：https://blog.csdn.net/yinjie77/article/details/115444106

版权

前端学习历程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：学习了html与css的相关知识点，在学习时也能理解各个知识点的意思，但总感觉知识十分零散，让我写一个网站我也无从下手，所以为了巩固之前所学知识，先不着急看js的书，而是找了一个项目做一下，在复习的同时，查漏补缺，最重要的就是学习搭建网站的一个思路，所以在b站上找了一个小米商城的项目跟着做，以下是学习过程中的一些体会。（其中关于知识点有不对或需要改进的地方，欢迎在评论区斧正）

2021.4.5（顶部栏）

在开始写代码之前，最好先理清整个网站的架构是如何组成的。
理清架构之后，可以开始着手基础代码的编写（也可以提前准备好，因为网页的基础模板大同小异）
基础代码写完之后，可以开始着手每个部分的设计，先从大框架入手，再分为几个小框架，今天写了几个小框架的开头，其中顶部栏的设计也算是完成了，一个不起眼的顶部栏也有许多常用和我没有注意到的知识点：
（1）用div组合各个框架
（2）用span组合与分隔框架里的内容
（3）对父级class下一级样式的编写的格式：.class1 .class2（class1后必须多空格，不能连在一起，我就是没仔细看清楚，导致样式一直没有应用成功，耗费了大量时间检查）
（4）熟练了margin、float的知识点、复习了line-height、text-align、display的内容（与其说是复习，不如说没有完全掌握）

4.16（导航栏与部分主页内容）（之前写了新的代码没时间写感想，今天更新一下，再开始新的内容）

html中还是与顶部栏一样的思路，将各个部分设置一个div与对应的class
大部分内容都可以用列表表示（ul），当然遇到输入框这种必须用到表单
接下来便是css的内容：css在整个网页构造中起到至关重要的作用，代码量大，注意的细节多，我在这所花的时间最多（最好是对css的内容做备注，我就是这样做的，不然到后期想修改时十分困难，自己都要找半天找不到对应的样式）。
（1）如若需要对链接进行宽与高的设置（只有块才能设置宽高），最好用display: block;
（2）float的浮动也是一个比较常用的属性
（3）对框架的高与宽最好是进行精准的设计，因为框架决定了你里面内容是否能够存放的下，同时框架里的各部分内容也很有必要进行准确计算，否则会出现内容混乱的情况，而且如果出现混乱，最好的排除方法就是在网页中，右击混乱的部分检查一下。
（4）子元素选择器>号是很有必要的，>表示只对儿子元素起作用，并不是对所有后代都起作用。（这里的儿子是全部儿子，不是指第一个儿子，我在一开始理解时理解错误了）
（5）如果想设置一个样式跟随在另一个样式后面，用position：relative与absolute

继4.16

更新了轮播图与右下角图像选择按钮的实现，如果要实现图片轮转必须用到js的内容，所以没有进行实现。按钮的实现十分常规，就是先进行定位，移到想对应的位置，再后续实现一些小细节。
接下来便是轮播图下面的内容，分为两个板块，一个是文字加图像列表，另一个是图片链接列表。
补充：之前我都没有对某些板块进行图片设置（购物车，搜索框），但有阿里巴巴矢量图有各种图片样式，极大帮助了我们是实现图片的设置。链接：iconfont
里面有各式各样的图片，进行搜索即可

可以下载来使用，当然最推荐的还是Unicode实现，网站也有使用的教材，非常方便。

4.17

今天把主页内容与内容详情完成了，内容详情因为大多数都差不多类似，所以我只做了一个手机的部分，最后还差脚部就可以写完小米网站了
（html）主页内容里轮播图下面的左边部分主要是对iconfont的应用以及布局设置和一些图片导入，比较简单。内容详情也差不多，html中主要是起大体方向上的作用，最主要的细节都在css里
css
（1）因为很多样式都需要设置浮动，所以必须注意消除浮动的问题（不然子元素可能会使没有设置高度的父元素高度崩塌）
（2）大多数样式的设置都是高度宽度这些位置的设置，虽然简单，但是比较繁琐，很多要注意的地方，写着写着很容易脑子混乱（主要是写网站太少了），还是那一点，注释！！！，十分重要，在我回顾的时候起到了很大的帮助

4.18（完结）

今天把底部栏写完了，整个网站基本构造就全部完成了。
（html）这一部分还是与以往一样，布局都是差不多，但是新用了一个自定义列表的知识
（css）其实css也是同理，写多了之前的样式，后面就是照葫芦画瓢，很容易上手与实现。

总结：
1.我这篇博客是我第一篇正正经经写的博客，也是我学习的一个历程，一个总结，我知道这其中的很多内容对大多数想搭建网站的同学没有什么太大用处（毕竟我也是个小白），很多细节我也没有阐明，但我觉得这是一个好的开端，是我在前端这条路上第一块敲门砖。如果有感兴趣的同学也可以跟我交流交流关于这个网站的搭建，

2.刚刚学完html与css的知识的时候，总感觉什么都明白（知识点），但是什么都不明白（如何搭建网站），而且知识点十分散乱。我一开始一看小米怎么多内容，搭建起来不知如何下手，一头雾水。这种时候就很有必要学习别人的思路，试着去总结搭建网站的思路。然后在写代码的过程中，不断熟练各种标签、元素的应用，就不会因为学习过后而感到迷茫，觉得学习没有效果，同时也会感到一种成就感，看着网站一步步搭建起来，这也是不断促进学习的小动力。实践真的是不可逃避的一门课程，当你熟练之后，你对知识点便能融会贯通，有着更深的理解，才能在此基础上不断学习下去。

最终效果图
在这里插入图片描述