仿小米商城

已于 2022-03-06 09:58:04 修改
阅读量464 收藏 4
点赞数 1
分类专栏： 项目 文章标签： css html
于 2022-03-05 17:00:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l2423282916/article/details/123295412
版权

仿小米商城（1）——导航条

文章目录

一、页面分析

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

从整体来看

主要有以下特点：
1.页面样式重复部分多
2.不同的页面含有公共部分的内容——>创建style.css来放公共部分

从局部（导航条）来看

登录前：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

登录后：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
未登录前分为top-lt和top-gt两个部分
未登录前导航条

导航条pub-top
左侧top-lt右侧top-gt
超链接a登录login购物车car-box
下载二维码div（登录注册消息）超链接a购物车超链接a购物车空提示信息div
登录后导航条： 左侧无变化，右侧发生了改变
导航条pub-top
左侧top-lt右侧top-gt
超链接a用户信息userinfo购物车car-box2
下载二维码divuser下拉列表gt-tit消息提醒，我的订单购物车超链接apop购物车商品详细信息

二、代码部分

index.html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="小米官网直营小米公司旗下所有产品，包括Xiaomi手机系列Xiaomi 11 Ultra、MIX FOLD，Redmi 红米系列Redmi Note 9、Redmi K40 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
    <meta name="keywords" content="Xiaomi,redmi,Xiaomi11 Ultra,Redmi Note 9,Xiaomi MIX Alpha,小米商城">
    <title>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 公共部分 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 首页样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入网页标题图标 -->
    <link rel="shortcut icon" href="img/icons/favicon.ico" type="image/x-icon" />
    <!-- 引入向下箭头、购物车等图标 -->
    <link rel="stylesheet" href="img/icons/font_3218970_7whji418qhl/iconfont.css">

</head>

<body>
    <div class="pub-top">
        <div class="container">
            <div class="top-lt">
                <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="#" class="download">
                    下载app
                    <div class="down-box">
                        <b></b>
                        <img src="img/download.png" alt=""><i>小米商城APP</i>
                    </div>
                </a><span>|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="top-gt">
                <!-- <div class="car-box">
                  <a href="" class="car-tit"><span class="icon-gouwuche"></span>购物车(0)</a>
                    <div class="car-info"><span>购物车中还没有商品，赶紧选购吧！</span></div>
                </div> -->
                <div class="car-box2">

                    <a href="" class="car-tit2"><span class="icon-cart-full"></span>购物车(1)</a>
                    <div class="pop">
                        <ul>
                            <li>
                                <div class="one">
                                    <img src="img/a.png" alt="">
                                    <span class="one-produce">Redmi K50电竞<br>版
                                        12GB+256GB</span>
                                        <span class="one-price">3899元 * 1
                                    </span><span class="icon-qingchu"></span>
                                </div>
                            </li>
                        </ul>
                        <div class="price">
                            <p class="total-produce">共1件商品</p>
                            <h4 class="total-price">3899元</h4>
                        </div>
                        <a href="" alt="btn" class="buy">去购物车结算</a>
                    </div>
                   
                </div>

                <!-- <div class="login">
                    <a href="#">登录</a><span>|</span>
                    <a href="#">注册</a><span>|</span>
                    <a href="#">消息通知</a>
                </div> -->
                <div class="userinfo">
                    <div class="user">
                        <a href="" class="user-tit">用户
                            <span class="icon-xiangxiajiantou"></span></a>
                        <ul>
                            <li><a href="">个人中心</a></li>
                            <li><a href="">评价晒单</a></li>
                            <li><a href="">我的喜欢</a></li>
                            <li><a href="">小米账户</a></li>
                            <li><a href="">退出登录</a></li>
                        </ul>
                    </div>
                    <div class="gt-tit">
                        <span>|</span>
                        <a href="" >消息通知</a>
                        <span>|</span>
                        <a href="" >我的订单</a>
                    </div>
                </div>
            </div>
            
           
        </div>
    </div>
    
</body>

</html>

重置默认样式 reset.css代码

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin:0;padding:0;
}
body,button,input,select,textarea{
    font:12px/1.5tahoma,arial,\5b8b\4f53;
}
h1,h2,h3,h4,h5,h6{
    font-size: 100%;
}
address,cite,dfn,em,var{
    font-style: normal;
}
code,kbd,pre,samp{
    font-family: 'Courier New', Courier, monospace;
}
small{
    font-size: 12px;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration:none;
    color: inherit;
}
sup{
    vertical-align: text-top;
}
sub{
    vertical-align:text-bottom;
}
legend{
    color:#000;
}
fieldset,img{
    border: 0;
}
button,input,select,textarea{
    font-size: 100%;
}
table{
    border-collapse: collapse;border-spacing: 0;
}

公共部分style.css代码：

/* 公共部分 */
/* 顶端公共部分 */
body{
    font-size: 14px;
    color: #333333;
}
.container{
    /* 版心宽 ，设置居中*/
    width: 1290px;
    margin-left: auto;
    margin-right: auto;
}
.pub-top{
    /* 导航栏高，颜色 */
    height: 42px;
    background-color: #333333;
    font-size: 5px;
}
.pub-top .top-lt{
    color: #b0b0b0;
    line-height: 42px;
    float: left;
    display: inline;
}
.pub-top .top-lt span{
    color: #424242;
    /* 设置|的左右边距 */
    padding: 0 3px;
}
.pub-top .top-lt a{
    /* 设置a为内联块状元素 */
    display: inline-block;
}
.pub-top .top-lt a:hover{
    color: #fff;
}
.pub-top .top-lt .download{
    position: relative;
}

.pub-top .top-lt .down-box{
    /* 设置相对于父元素居中 */
    width: 130px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -65px;
    top: 42px;
    padding-top: 20px;
    /* 图片阴影 */
    box-shadow: 0 1px 5px #aaa;
    text-align: center;
    /* 隐藏二维码 */
    display: none;
}
.pub-top .top-lt .download:hover .down-box{
    display: block;
}
.pub-top .top-lt .down-box img{
    width: 88px;
    height: 88px;
    display: block;
    margin: 0 auto;
}
.pub-top .top-lt .down-box b{
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    margin-left:-9px;
    background-image: url(../img/sjx.png);
    top: -18px;
}
.pub-top .top-lt a.download i{
    font-style: normal;
    color: #333333;
}
.pub-top .top-lt a.download:hover i{
    color: #333333;
}
.pub-top .top-gt {
    float: right;
    line-height: 42px;
}
.pub-top .top-gt .login{
    color: #b0b0b0;
    height: 42px;
    line-height: 42px;
    float:right;
}
.pub-top .top-gt .login span{
    color: #424242;
    padding: 0 3px;
}
/* 购物车空 */
.pub-top .top-gt .car-box{
    width: 128px;
    height: 42px;
    background-color: #424242;
    color: #333333;
    float: right;
    margin-left: 20px;
    text-align: center;
    position: relative;
}
.pub-top .top-gt .car-box .car-tit{
    height: 42px;
    color: #b0b0b0;
}

.pub-top .top-gt .car-box .car-tit .icon-gouwuche{
    font-family: iconfont;
    content: "\e602";
    color: #b0b0b0;
}
.pub-top .top-gt .car-box .car-info{
    display: none;
    height: 105px;
    width: 332px;
    text-align: center;
    line-height: 105px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0px;
}
.pub-top .top-gt .car-box:hover .car-info{
    display: block;
}
.pub-top .top-gt .car-box:hover .car-tit{
    color: #ff6700;
}
.pub-top .top-gt .car-box:hover .icon-gouwuche{
    color: #ff6700;
}

.pub-top .top-gt .userinfo {
    float: right;
    /* margin-right: 20px; */
}
.pub-top .userinfo .user{
    display: inline-block;
    width: 120px;
    position: relative;
    text-align: center;
    /* left: 60px; */
}
.pub-top .top-gt span{
    padding: 0 3px;
    color: #424242;
}
.pub-top .userinfo .user-tit{
    line-height: 42px;
    color: #b0b0b0;
    display: block;
}
.pub-top .userinfo .user-tit img{
    width: 12px;
    height: 8px;
    
}
.pub-top .userinfo .gt-tit{
    line-height: 42px;
    color: #b0b0b0;
    float: right;
}
.pub-top .userinfo .gt-tit span{
    color: #424242;
}
.pub-top .userinfo .user ul a{
    display: block;
}
.pub-top .userinfo .user ul{
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    width: 120px;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.pub-top .userinfo .user li{
    line-height: 30px;
    padding: 4px 0;
}
.pub-top .userinfo .user .icon-xiangxiajiantou{
    color: #b0b0b0;
    font-family: iconfont;
    content: "\e65e";
}
.pub-top .userinfo .user li:hover{
    background-color: #f5f5f5;
    color: #ff6700;
}
.pub-top .userinfo .user:hover .icon-xiangxiajiantou{
    color: #ff6700;
}
.pub-top .userinfo .user:hover{
    background-color: #fff;
}
.pub-top .userinfo .user:hover .user-tit{
    color: #ff6700;
}

.pub-top .userinfo .user:hover ul{
    display:block;
    padding: 3px 0px;   
}
/* 购物车含有商品 */
.pub-top .top-gt .car-box2{
    width: 128px;
    height: 42px;
    background-color: #ff6700;
    color: #fff;
    float: right;
    margin-left: 20px;
    text-align: center;
    position: relative;
}
.pub-top .top-gt .car-box2 .car-tit2 .icon-cart-full{
    font-family: iconfont;
    content: "\e65e";
    color: #fff;
}
.pub-top .top-gt .car-box2 .pop .icon-qingchu{
    position: absolute;
    font-family: iconfont;
    content: "\e606";
    color: #000;
    right: 10px;
    padding-top: 20px;

}
.pub-top .top-gt .car-box2 .pop{
    display: none;
    height: 150px;
    width: 332px;
    text-align: center;
    padding: 20px 20px 30px 25px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0px;
}
.pub-top .top-gt .car-box2:hover .pop{
    display: block;
}
.pub-top .top-gt .car-box2:hover{
    color: #ff6700;
    background-color: #fff;
}
.pub-top .top-gt .car-box2:hover .icon-cart-full{
    color: #ff6700;
}
.pub-top .top-gt .car-box2 .pop img{
    width: 88px;
    height: 88px;
    float: left;
}
.pub-top .top-gt .car-box2 .pop .one{
    position: relative;
}
.pub-top .top-gt .car-box2 .pop .one-produce{
    position: absolute;
    float: left;
    text-align: left;
    height: 28px;
    line-height: 28px;
    padding-top: 15px;
    right: 130px;
}
.pub-top .top-gt .car-box2 .pop .one-price{
    position: absolute;
    float: left;
    padding-top: 20px;
    padding-left: 20px;
}
.pub-top .top-gt .car-box2 .pop .icon-qingchu:hover{
    
    color: #000;
    float: left;
    font-size: 10px;

}

.pub-top .top-gt .car-box2 .pop .total-produce{
    position: absolute;
    margin-top: 100px;
    left: 30px;
    color: #b0b0b0;
    float: left;
    font-size: 18px;
}
.pub-top .top-gt .car-box2 .pop .total-price{
    color: #ff6700;
    float: left;
    position: absolute;
    margin-top: 130px;
    left: 30px;
    font-size: 20px;
}
.pub-top .top-gt .car-box2 .pop .buy{
    background-color: #ff6700;
    position: absolute;
    padding: 8px 20px;
    font-size: 17px;
    color: #fff;
    float: left;
    width: 150px;
    margin-left: 10px;
    margin-top: 100px;
    right: 30px;
}

个人心得总结

涉及方法及重点：
1.字体图标的使用方法
2.hover伪类的使用
3.元素居中

离殇人一曲
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】仿小米商城系统（一）
前端学习博客
05-10 7877
【Vue】仿小米商城系统（一） 文章目录【Vue】仿小米商城系统（一）前言一、项目概述项目介绍商城页面与组件技术栈商城各页面展示商品首页产品站商品详情登录页面：账号 jack 密码 jack订单确认购物车页面订单支付页面支付宝支付微信支付订单列表项目源码：二、项目开发前准备跨域解决jsonpnginx项目目录结构Storage封装接口错误拦截Mock设置集成Mock API（本地集成Mock.js） 前言 本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻 【Vue】仿小米商城系统（一）
Vue2实现仿小米商城练手项目前端篇(1-项目介绍)
qq_39064418的博客
03-06 1009
基于Vue2实现仿小米商城练手项目
仿小米商城html网页源码(1)
最新发布
2401_84413180的博客
05-01 134
米兔智能故事机.小米一如既往的好前天下单今天就到了，送货到家很细心的…小米一如既往的好前天下单今天就到了，送货到家很细心的…小米一如既往的好前天下单今天就到了，送货到家很细心的…小米一如既往的好前天下单今天就到了，送货到家很细心的…
基于javaweb+mysql的springboot仿小米商城系统(前后端分离+java+vue+springboot+ssm+mysql+maven+redis)
m0_71097188的博客
08-22 144
基于javaweb+mysql的springboot仿小米商城系统(前后端分离+java+vue+springboot+ssm+mysql+maven+redis)基于javaweb+mysql的SpringBoot仿小米商城系统(前后端分离+java+vue+springboot+ssm+mysql+maven+redis)项目技术： Springboot + Maven + Mybatis + Vue + Redis, B/S 模式+ Maven等等。课程设计，大作业，毕业设计，项目练习，学习演示等。
电商项目:高仿小米商城(一)
草木如织，匪我思且
02-05 3689
前言     时间过得很快，统一哥转眼也大三了。欢娱不惜、时光易逝。不由得引起人的感叹，想想一年前这个时候我还在准备着计组的补考 ，那一页页翻过的计组书，默默准备补考的辛酸，不经历的都不知道，经历过的是真滴不想再挂科再补考了。。。     那时候我只是个Java入门小白，lambda表达式都jio得难得一匹，但我心中的不甘是清晰的。了解我的人都知道，我向来是个不会向现实低头的人。技术水平菜，java不知道从哪里开始学怎么办？从
【Vue】仿小米商城系统（二）
前端学习博客
05-10 2128
【Vue】仿小米商城系统（二） 文章目录【Vue】仿小米商城系统（二）前言三、商品首页的开发mixin的使用商标移出和进入鼠标移动到菜单上显示下拉列表对返回的数据统一样式 --> 使用过滤器鼠标移动到左侧菜单上，右侧列表打开弹框组件实现 --> Modal组件Modal.vueVue动画：modal.scss首页使用Modal组件图片懒加载四、登录页面的开发登录模块将登录的信息进行保存到vuex注册模块登录后获取用户信息和购物车商品数量第一次登录进去保存数据到vuex在vuex中设置action
仿小米商城网页版（全套）
09-28
【仿小米商城网页版（全套）】项目是一个全面复刻小米商城在线购物平台的Web应用。这个项目旨在提供一个与小米商城类似的功能齐全、用户体验优良的网页版本，涵盖了多个核心功能模块，包括首页、订单管理、商品列表...
仿小米商城html网页源码
03-31
在仿小米商城的项目中，CSS被用来定制字体、颜色、布局、响应式设计等视觉元素。通过选择器如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等，可以精确地定位到HTML元素并应用样式。同时，...
高仿小米商城
04-06
【高仿小米商城】项目是一个基于layui框架实现的电商网站前端仿制案例，它提供了类似小米商城的用户体验和视觉效果，对于学习前端开发和layui框架的运用有着极高的参考价值。在这个项目中，开发者可以深入理解如何...
2022最新仿小米商城首页html+css+js
09-22
2022最新仿小米商城首页html+css+js banner可切换，产品可滑动
vue+element简单实现电商商城网站，模仿小米电商商城
热门推荐
lucky_fang的博客
11-25 3万+
vue+element简单实现商城网站首页，模仿小米电商商城
基于javaweb的小米交易商城系统(java+jsp+ssm+mysql)
m0_69590785的博客
10-23 1199
基于javaweb的小米交易商城系统(java+jsp+ssm+mysql) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等 功能说明 ![20220519001442](https://pic1.imgdb.cn/files/52560/project20/20220519001442.jpg) ![20220
JavaWeb - 小米商城网 - 项目启动
qq_52029763的博客
05-10 2148
JavaWeb - 仿小米商城网 : 项目启动 1.案例引述 商品英文类别 英文类别 介绍 典型代表 B2B Business To Business , 商家对商家 B2B典型代表有阿里巴巴 , 中国制造网 , 慧聪等 , 主要从事批发业务 B2C Business To Customer , 商家对顾客销售 B2C电信代表有当当网 , 京东商城 , 中国购 , 凡客诚品 , 稀货街等 C2C Customer To Customer , 客户对客户 C2C典型代表有淘宝 , 鸟差
vue模仿小米商城网站
走向CTO的路上...
07-02 814
可以使用Vue的状态管理工具Vuex，将用户信息、订单信息、收货地址等数据存储到Vuex的状态中，并在个人中心页中渲染对应的用户信息、订单信息、收货地址等内容。可以使用Vue的组件化开发思路，将轮播图、推荐商品、热门商品等模块分别封装成Vue组件，然后在主页中通过引用这些组件来实现。可以使用Vue的动态路由功能，将每个商品单独设置一个路由，并在路由组件中渲染对应的商品信息。分类页：分类页一般包括商品分类列表，可以使用Vue的路由功能，将每个商品分类单独设置一个路由，并在路由组件中渲染对应的商品分类列表。
前端项目 仿小米商城
m0_53841989的博客
08-27 1883
html5+css3
JavaWeb-仿小米商城(1) 项目启动
无忧的博客
05-10 1185
1.1 案例引述 网上商城类似于现实世界当中的商店，差别是利用电子商务的各种手段，达成从买到卖的过程的虚拟商店，从而减少中间环节，消除运输成本和代理中间的差价，造就对普通消费和加大市场流通带来巨大的发展空间。尽可能的还消费者以利益，带动公司发展和企业腾飞，引导国民经济稳定快速发展,推动国内生产总值 1.2 商城类别 1.3 商城常见模块 后台常见功能模块 商品管理:包括后台商品库存管理、上货、出货、编辑管理和商品分类管理、商品品牌管理等。。订单管理:在线订单程序，使消...
web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码
qq_38512792的博客
04-22 372
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
java仿小米商城模板
09-16
Java仿小米商城模板是指通过使用Java语言及相关技术实现一个与小米商城类似的电商网站模板。这个模板可以用于搭建个人或企业的电商网站，具备了类似小米商城的功能和设计风格，可以根据实际需求进行定制和扩展。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值