⼩⽶商城⾸页仿写+课程总结报告
课程总结报告
这次课程的主题是⼩⽶商城，此次实训主要以 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 >12345678910111213141516171819202122232425262728293031323334353637383940414243444546