这种方法的优点就是它可以在任何浏览器上运行，并且代码很简

单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

四、总结与展望

主要来说，H5用于大体界面的编写，如：需要一些基本的输入

框、单选按钮、普通按钮、以及下拉选择框等，标记的学习是一门语

言最基础的部分，熟练的使用这些标记其实不是很大的问题。

另外在CSS3中界面的排版也是一个关键的方面。屏幕大小及分

辨率的不同，会导致我们的界面在绝大部分的设备上能按照我们设计

的来正常显示。但是对于一小部分的设备来说就很有可能会导致我们

布局的设计会偏离正常的轨道。这就需要不断的调试以便更好地满足

不同的设备。

在实训中除了学到了许多新的知识，锻炼了我做项目的能力，提

高了独立思考问题、自己动手操作的能力，丰富了经验，将会有利于

我更好的适应以后的工作。最后，我要感谢这次十分有意义的实训，

使我们学到了很多，也领悟了很多。

2024年5月1日发(作者：恽慧心)

vue3低仿小米商城实训报告

一、项目简介

项目名称：实现“小米商城”页面

随着网络普及和发展，网站作为一种很强大的工具和平台越来越

融入了人们的生活，而与用户关系最密切的前端技术也逐渐得到应有

的重视。可以看到前端重构的行业发展潜力巨大，各大知名的网络公

司对前端人才的求饥若渴。近年来HTML5和CSS3的风行，还有移动

web领域的崛起，apple和google这两大巨擘都推动移动领域的发展，

而且现在的前端开发都越来越注重用户体验。相对来说，前端的人才

需求比以前有了质的飞跃。

二、项目的技术准备

此次实训主要以HTML+CSS+JavaScript三项内容开展，从中学到

了很多关键且实用的技术。

1、CSS技术

（1）组合选择器：并列关系，对多个不同选择器使用相同样式

例如：css样式：p,div{color:#FF0000;}

html代码：

P标签显示段落。

注：多个不同选择器要用逗号分隔开。

（2）伪元素选择器：在html中预先定义好的一些选择器称为伪

元素。

例如：a:link超链接未点击状态。

a:visited被访问后的状态。

a:hover光标移到超链接上的状态（未点击）。

a:active点击超链接时的状态。

使用顺序L–V–H–A

注：伪元素:hover在css1中只对a标签有效，在css2中对所

有标签有效。

①原理：元素浮动后排除到普通文档流之外；

元素浮动后在页面不占据位置(原位置不保留)；

浮动是碰到父元素的边框或者浮动元素的边框就会停止；

浮动不会重叠，只有左右浮动；

浮动后所有元素转换为块级元素；

三、关键问题的解决

1、浮动的使用

做小米网页时，遇到了这样的问题，有时盒子内部的浮动会影响

到盒子外部的浮动，遇到这样的情况可以给盒子加上overflow属性，

属性值为hidden。

2、关于块标签和内敛标签

块标签默认情况下会单独占用一行，内敛标签则是接着前面的元

素的后面不会换行，但是当我们给他定义display：block时，他就

会变得跟快标签一样，拥有快标签的各种属性。

3、关于透明的使用

透明暂时接触到两种，一种是背景和盒子里面的内容全透明，一

种是只透明背景，但是盒子里面的内容不会透明。如果只是背景透明，

那么可以给background设置rgba()的颜色属性值，其中rgb代表了

颜色，而a则代表了透明度，默认的透明度是1。全透明为0。

4、实现按压效果

主要是利用css里面的选择器active（活动链接）在选择器里

面写transfrom属性让他旋转：当transalteY(2px)表示向上移动两

个px,当点击事件结束时就会恢复原样这样就实现了按压的效果。

5、单行或多行文本的垂直居中问题

line-height的约束条件，它只适合给里面只有一行字的盒子设

置上下居中，当超过一行字时就会出现错误。

如果一段内容，它的高度是可变的，可以设定Padding，使上下

的padding值相同即可。同样的，这也是一种“看起来”的垂直居中

方式，它只不过是使文字把