当前位置 博文首页 > 无限迭代中......:《移动应用开发》实验报告——简单的品牌列表

    无限迭代中......:《移动应用开发》实验报告——简单的品牌列表

    作者:[db:作者] 时间:2021-07-19 16:26

    实验目标

    1. 熟悉Vue开发工具,学会安装Vue-CLI脚手架工具。
    2. 学会使用Vue-CLI脚手架工具在自己的电脑上建立项目,并运行调试。
    3. 品牌列表网页编程。

    实验内容

    1. Vue-CLI脚手架工具搭建一个Web项目。
    2. 使用Vue技术编写一个简单的品牌列表网页,内容及格式可自己定,效果可参照网址:
      https://blog.csdn.net/zerobaek/article/details/86567977

    实验详细过程和步骤

    截图展示

    在这里插入图片描述

    主要代码及实现方法简介

    <div class="s_content">
    		<div class="s_content_c inner_c">
    			<div class="s_info">
    				<div class="s_title">
    					<a href="#">
    						首页
    					</a>
    					&gt;
    					<span>
    						所有商品
    					</span>
    				</div>
    				<div class="screen">
    					<table>
    						<tr class = "t1">
    							<th>品牌</th>
    							<td>
    								<a href="#">无印</a>
    								<a href="#">博朗</a>
    								<a href="#">花印</a>
    							</td>
    						</tr>
    						<tr class = "t2">
    							<th>类别</th>
    							<td>
    								<a href="#">不锈钢</a>
    								<a href="#">原料水泥</a>
    								<a href="#">塑料</a>
    								<a href="#">木质</a>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<div class="fun">
    					<div class="sort">
    						<span>排序:</span>
    						<a href="#" class="s1">
    							<i></i>销量
    						</a>
    						<a href="#" class="s2">
    							<i></i>价格
    						</a>
    						<a href="#" class="s3">
    							<i></i>上架时间
    						</a>
    					</div>
    					<div class="swi">
    						<span>仅显示有货:</span>
    						<a href="#">
    							<i></i>
    						</a>
    					</div>
    					<div class="total"><span>20</span>个商品
    					</div>
    				</div>
    				<div class="s_prod">
    					<ul class = "pub_pro">
    						<li>
    							<img src="images/img47.png" alt="">
    							<div class="cont">
    								<h3>不锈钢汤勺</h3>
    								<span>¥300</span>
    							</div>
    							<div class="mask">
    								<a href="#" class="btn">查看详情</a>
    							</div>
    						</li>
    						<li>
    							<img src="images/img41.png" alt="">
    							<div class="cont">
    								<h3>不锈钢汤勺</h3>
    								<span>¥300</span>
    							</div>
    							<div class="mask">
    								<a href="#" class="btn">查看详情</a>
    							</div>
    						</li>
    						<li>
    							<img src="images/img42.png" alt="">
    							<div class="cont">
    								<h3>不锈钢汤勺</h3>
    								<span>¥300</span>
    							</div>
    							<div class="mask">
    								<a href="#" class="btn">查看详情</a>
    							</div>
    						</li>
    						<li>
    							<img src="images/img43.png" alt="">
    							<div class="cont">
    								<h3>不锈钢汤勺</h3>
    								<span>¥300</span>
    							</div>
    							<div class="mask">
    								<a href="#" class="btn">查看详情</a>
    							</div>
    						</li>
    						<li>
    							<img src