WEB前端小米商城网页制作

小飞766

已于 2022-05-24 09:31:46 修改

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： elementui vue.js 蓝桥杯

于 2022-05-23 14:30:05 首次发布

本文链接：https://blog.csdn.net/jinxiaofei8/article/details/124925782

本文档详细介绍了如何使用ElementUI组件库和Vue.js框架来制作小米商城的网页。首先，构建了HTML页面框架，包括下拉菜单和左侧的二级导航。接着，通过引入mi.css、content.css和footer.css等CSS文件，对页面样式进行了定制，实现了美观的布局和交互效果。此项目适用于前端开发实践，特别是对于参加蓝桥杯等竞赛的开发者来说，是一个很好的学习案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小米商城页面框架：

<!DOCTYPE html>
<html>
<head><title>小米商城</title></head>

<body>
<div class="box">
   <div class="header">
        <div class="header_menu"> 
            <ul class="header_left"> </ul>
            <div class="header_right"> </div> 
       </div> 
   </div>
     
    <div class="content">
            <div class="content_menu">   </div>
            <div class="content-form">   </div>
            <div class="content_pic">    </div>
            <div class="content_pic_img"></div>
            <div class="content-picli">   </div>
    </div>

    <div class="footer-top"> </div>
</div>

html

<!DOCTYPE html>
<html>
<head>
    <title>小米商城</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="img/footlogo.png" />
    <link rel="stylesheet" type="text/css" href="css/mi.css">
    <link rel="stylesheet" type="text/css" href="css/content.css">
    <link rel="stylesheet" type="text/css" href="css/footer.css">
</head>
<body>
<div class="box">
    <!-- 头部 -->
    <div class="header">
        <div class="header_menu">
            <ul class="header_left">
                <li><a>小米商城</a><span>|</span></li>
                <li><a>MIUI</a><span>|</span></li>
                <li><a>IOT</a><span>|</span></li>
                <li><a>云服务</a><span>|</span></li>
                <li><a>小爱分享平台</a><span>|</span></li>
                <li><a>金融</a><span>|</span></li>
                <li><a>有品</a><span>|</span></li>
                <li><a>企业服务</a><span>|</span></li>
                <li><a>SelectRegion</a></li>
            </ul>
            <div class="header_right">
                <ul>
                <li><a>登录</a><span>|</span></li>
                <li><a>注册</a><span>|</span></li>
                <li><a>消息通知</a></li>
               <li class="header_right_li"><i class="fa fa-shopping-cart" ></i>&nbsp; 购物车 ( 0 )
					<div>购物车中还没有商品，赶紧选购吧！</div>
				</li>
            </ul>
            </div>  
        </div> 
    </div>
    <!--   主体内容上半部分   -->
    <div class="content-top">
        <div class="content">
            <div class="content_menu">
                <div class="content_menu_pic">
                <img src="img/footlogo.png" class="content_menu_img"style="margin: 5px 0px;margin-right: 10px;">
                <img src="img/logoAD.gif" >
                </div>
            <div class="content_menu_ul">
                <ul>
					<li>小米手机</li>			
					<li>红米</li>
					<li>电视</li>
					<li>笔记本</li>
					<li>盒子</li>
					<li>新品</li>
					<li>路由器</li>
					<li>智能硬件</li>
					<li>服务</li>
					<li>社区</li>
				</ul>
            </div>
            <div class="content-form">
                <form>
                    <input type="text" name="">
                    <div class="content-form-a"><a href="">电视新品</a>   <a href="">618预热</a></div>
                    <div class="botton"><i class=" fa fa-search"></i></div>
                
                </form>
            </div>
            <div class="clear"></div>
        </div>
           <div class="content_pic">
				<div class="content_pic_menu">
					<ul class="content_pic_ul">
						<li><a href="">手机 电话卡 </a><i class="fa fa-angle-right"></i>
							
						</li>
						<li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i></li>
						<li><a href="">笔记本 </a><i class="fa fa-angle-right"></i>
							
						</li>
						<li><a href="">智能 家电 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">出行 儿童 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">路由器 手机配件 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">移动电源 插线板</a><i class="fa fa-angle-right"></i></li>
						<li><a href="">耳机 音箱 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i></li>
					</ul>	
				</div>
				<div class="content_pic_img"></div>
	        <div class="clear"></div>
			</div>
<!-- 以下部分样式见  外部样式 content.css		 -->	

<!--xin start-->
            <!--一个小导航+三个小广告-->
            <div class="content-picli">
                <div class="content-picli_1">
                    <ul>
                        <li><span class="fa fa-mobile-phone fa-2x"></span>选购手机</li>
                        <li><span class="fa fa-gift fa-2x"></span>企业团购</li>
                        <li><span class="fa fa-facebook fa-2x"></span>F码通道</li>
                        <li><span class="fa fa-file-text fa-2x"></span>米粉卡</li>
                        <li><span class="fa fa-refresh fa-2x"></span>以旧换新</li>
                        <li><span class="fa fa-credit-card fa-2x"></span>话费充值</li>
                    </ul>
                </div>
                <div class="content-picli_2"></div>
                <div class="content-picli_3"></div>