小米商城首页仿写+课程总结报告

课程总结报告

这次课程的主题是小米商城，此次实训主要以 HTML+CSS+Vue+Swiper 四项内容开展，从中学到了很多关键且实用的技术。
小米商城首页，有头部、logo、横幅、购物车、搜索框、轮播图和商品分类、底部组成，在这次实训中进行了详细的学习，通过老师的精心全面的讲解，对简易小米首页的制作，我学到了许多，虽然时间不长，但学的东西很全面，有很大的收获，在这里总结一些心得体会。
小米商城搭建的细节:
1、清楚整个页面的整体布局，先整体再局部，先把整体内容规划好，再自上而下的布置每一块内容。
2、明确每个模块要实现怎样的效果，并且自外而内的设置好每个标签的样式。
3、不清楚某个样式怎么设置，可以去浏览器控制台中做相应的调整，调整合适后将样式写到文件中。
主要来说，H5 用于大体界面的编写，如：需要一些基本的输入框、单选按钮、普通按钮、以及下拉选择框等，标记的学习是一门语言最基础的部分，熟练的使用这些标记其实不是很大的问题。
而 CSS 则是主要用于对整体界面细节化的修饰。比如：一个普通按钮，输入框边角默认是直角，可以用CSS 来改变其形状。还可以用来设置不同的样式。盒子模型则是在网页设计中经常用到的 CSS 技术，每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；边框有大小和颜色之分，边界就是该盒子与其它东西要保留多大距离。
Vue.js 通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件中，我们只要先在父级应用中写好各种组件标签，并且在组件标签中写好要传入组件的参数，然后再分别写好各种组件的实现，然后整个应用就算做完了。

1. 样式展示

2. 部分代码展示

 - 头部

<div id="head">
			<div class="head_box">
				<div class="left">
					<a href="#">小米商城</a>
					<span>|</span>
					<a href="#">MIUI</a>
					<span>|</span>
					<a href="#">IoT</a>
					<span>|</span>
					<a href="#">云服务</a>
					<span>|</span>
					<a href="#">天星数科</a>
					<span>|</span>
					<a href="#">有品</a>
					<span>|</span>
					<a href="#">小爱开放平台</a>
					<span>|</span>
					<a href="#">企业团购</a>
					<span>|</span>
					<a href="#">资质证照</a>
					<span>|</span>
					<a href="#">协议规则</a>
					<span>|</span>
					<a href="#">下载app</a>
					<span>|</span>
					<a href="#">智能生活</a>
					<span>|</span>
					<a href="#">Select Location</a>
				</div>
				<div class="right">
					<ul>
						<li><a href="#">登录</a></li>
						<li>|</li>
						<li><a href="#">注册</a></li>
						<li>|</li>
						<li><a href="#">消息通知</a></li>
						<li>
							<a href="#"><i class="icon-xiaomigouwuche iconfont"></i>购物车(<span>0</span>)</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

觉得有用的话点个 👍🏻 呗。 本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍