Html——小米商城网页实战（一）

最新推荐文章于 2024-02-28 21:11:05 发布
最新推荐文章于 2024-02-28 21:11:05 发布
阅读量9.4k 收藏 111
点赞数 12
分类专栏： Html&css 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42511413/article/details/120892113
版权

适合新手的小米商城的纯html网页项目

小米官网：https://www.mi.com/?masid=2701.0103

官网效果图如下：
在这里插入图片描述

本文针对于上手前端的新手小白，仅供参考。在看到小米官网之后，如何模拟出官网的效果是我们第一步要思考的问题，那么学过了网页布局之后，我们将整个网页分为以下的几个部分：最上面的标题栏、导航栏、内容区、四个分栏的展示区以及最下面的新品展示区。本文完成第一部分内容——标题栏。

可以很清晰的看出，最上面的标题栏分为左右两部分。

剖析：标题栏中存在的难点是下载app和购物车两个标题的hover效果。

下面的代码展示的是基础的分区以及第一部分的效果（可能某些元素的大小与官网不完全相同，只适合新手练手）。

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">
    <title小米商城官网</title>
    <link rel="stylesheet" href="./css/all.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/title.css">
    <style>
        .nav-bar {
            height: 100px;
            background-color: yellow;
        }

        .content {
            position: relative;
        }


        .content-left {
            float: left;
            background-color: yellowgreen;
            width: 234px;
            height: 460px;
            
        }

        .content-right {
            float: right;
            width: 992px;
            height: 460px;
            
            background-color: #999;
        }

        .info {
            height: 170px;
            width: 1226px;
            background-color: purple;
            margin-top: 20px;
            position: absolute;
            top: 600px;
        }

        .bottom {
            margin-top: 700px;
            height:120px;
        }

        i {
            margin-right: 3px;
            font-size: 16px;
        }



        /* 将页面分成五个部分来完成,，先按照不同的分区将页面分开，完成页面布局，然后分层次完成其中的内容 */
    </style>
</head>
<body>
    <!-- 设置外部容器 -->
    <div class="wrapper">
        <!-- 1. 设置最上面的titile -->
        <div class="title clearfix">
            <ul class="title-left">
                <li>
                    <a href="javascript:;">小米商城</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">MIUI</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">loT</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">云服务</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;"> 天星数科</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">有品</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">小爱开放平台</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">企业团购</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">资质证照</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">协议规则</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">下载app 
                        <i class="fas fa-caret-up"></i>
                    </a>
                    <line>|</line>
                    <div class="QRcode">
                        <div class="QRcode-img">
                            <img src="./img/QR.jpg" alt="" width="85px" height="85px">
                            <span>小米商城APP</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="javascript:;">智能生活</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">Select Location</a>
                    <line>|</line>
                </li>
            </ul>

            <ul class="title-right">
                <li>
                    <i class="fas fa-shopping-cart"></i>
                    购物车（0）
                    <div class="shop">
                        <div style="height: 30px; background-color: #fff;"></div>
                         购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>
                <li>
                    <a href="javascript:;">消息通知</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">注册</a>
                    <line>|</line>
                </li>
                <li>
                    <a href="javascript:;">登录</a>
                    <line>|</line>
                </li>



                
            </ul>
        </div>

        <!-- 2. 设置导航条 -->
        <div class="nav-bar">

        </div>

        <!-- 3. 设置内容区 ，其中内容区分为左右两个部分-->
        <div class="content">
            <div class="content-left">

            </div>

            <div class="content-right">

            </div>
        </div>

        <!-- 4. 设置信息部分 -->
        <div class="info">

        </div>

        <!-- 5.设置最下面的图片区域 -->
        <div class="bottom">
            <img src="./img/4.webp" alt="">
        </div>
        
    </div>
</body>
</html>

base.css

body {
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.wrapper {
    width: 1226px;
    margin:0 auto;
    background-color: red;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear:both;
}

.title {
    height: 40px;
    background-color: #333;
    font-size: 12px;
    z-index: 2;
    position: relative;
}

.title li {
    list-style: none;
    display: block;
    top:13px
}

.title-left li:nth-child(1) {
    margin-left: -35px;
}

line {
    margin: 0 3.6px;
    color: #424242;
    margin-top: 2px;
}

.title-left li{
    float: left;
    /* margin-right: 10px; */
}

.title-right li{
    float: right;
    /* margin-right: 10px; */
}

.title-right li:nth-child(1) {
    width: 120px;
    position: relative;
    line-height: 40px;
    top:-12px;
    height: 40px;
    background-color:#404040;
    text-align: center;
}

.title-right li:nth-child(1):hover {
    background-color: #fff;
    color: #ff6700;
}

.QRcode{
    width: 124px;
    height: 120px;
    visibility: hidden;
    display: block; 
    background-color: #fff;
    box-shadow:0 0 1px rgb(173, 171, 171);
    font-size: 14px;
    color:#333;
    position: absolute;
    left: 517px;
    top:30px;
    text-align: center;
}

.title-left li:nth-child(11) i {
    display: block;
    position: absolute;
    top: 30px;
    left: 574px;
    color: #fff;
    visibility: hidden;
}

.title-left li:nth-child(11):hover i {
    visibility: visible;
}

.title-left li:nth-child(11):hover .QRcode{
    width: 124px;
    height: 155px;
    background-color: #fff;
    visibility: visible;
    text-align: center;
    border: none;
    position: absolute;
    top: 40px;
}

.QRcode-img img{
    position: relative;
    top: 15px;
    left: 20px;
    display: block;
}

.QRcode-img span {
    position: relative;
    top: 25px;
    color: #333;
}

.title-right li:nth-child(1) .shop{
    visibility: hidden;
    width: 320px;
    background-color: #fff;
    display: block;
    height: 100px;
    top: 40px;
    right: 0px;
    box-shadow:0 0 1px rgb(173, 171, 171);
    font-size: 14px;
    color:#fff;
}

.title-right li:nth-child(1):hover .shop{
    visibility: visible;
    width: 320px;
    display: block;
    background-color: #fff;
    position: absolute;
    height: 100px;
    top: 40px;
    right: 0px;
    box-shadow:0 0 1px rgb(173, 171, 171);
    font-size: 14px;
    color: #b0b0b0;
    font-size: 14px;
}

.title li {
    color: #b0b0b0;
}

.title li a{
    color: #b0b0b0;
}

.title li a:hover{
    color: #fff;
}

实现的效果图：
在这里插入图片描述
在这里插入图片描述

Cheris_ix
关注
  • 12
    点赞
  • 踩
  • 111
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
HTML+CSS实现小米官网顶部导航栏
重生之我是泰勒
07-01 3385
HTML+CSS实现小米官网顶部导航栏
html网页制作——小米商城官网商城购物网页设计 大学生个人购物商城网页代码 dw个人网页作业
qq__3200628753的博客
12-19 394
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML结构代码 🧱三、个
模仿小米网页
06-01
闲着无聊就模仿着小米的登录页面自己动手找了个
【HTML+CSS练习一】编写小米商城小组件
最新发布
zyh0815的博客
02-28 705
本文简单使用了HTML和CSS语言，部分实现了小米商城其中一个组件的页面效果。
【Web前端】小米商城项目实战HTML+CSS+JavaScript
不会敲代码的程序员
09-15 5607
1、小米商城源码html 2、小米商城源码 github 3、小米商城源码项目h5 4、仿小米商城html网页源码 3.1、首页（index.html） 3.2、登录（login.html） 3.3、注册（register.html） 3.4、详情（plus5.html） 3.5、订单（order.html） 3.6、购物车（trolley.html）
HTML5+CSS3实现小米商城
qq_62185873的博客
05-28 6379
小米商城是自学后第一个较为完整的网页，花费了一整天的时间完成，难度不是很高，只要肯花费一定的时间就能完成，相信大家都能有所收获！
HTML5+CSS3实现小米商城 （完整版）
m0_63512120的博客
07-20 1万+
做了一个小米商场的网页，用HTML5+CSS3做出来的，在文章最后附带 网页所有的源码和图片素材供大家参考。原创不易，大家有任何问题都可在评论区指出。
小米官网HTML5
12-04
仅供初学者巩固基础，交流和学习。跟案例为模仿小米官网用于传授HTML5基础课程学习。
H5判断是否安装某款app，打开app或跳转到app下载页面
weixin_45881304的博客
02-27 3411
【代码】H5判断是否安装某款app，打开app或跳转到app下载页面。
小米登录页二维码
qq_43201652的博客
08-29 232
小米登录页二维码
耗时两天，Html实现小米官网
热门推荐
The_RedMaple的博客
07-21 1万+
实现展示： 代码总共 808行 ，其中实现了小米官网外观布局的大部分。 网址和图标 类似的菜单也可以实现下拉 透明度为0.3 每一个地方都是超链接，可以进行点击 搜索栏获得焦点后会变颜色 光标停留也有响应特效 相关的图片和代码 实现代码： html 代码 <html> <head> <meta charset="utf-8"> <title>小米商城</title> <
高仿小米商城网页整套源代码.zip
01-11
高仿小米商城网页，和小米商城页面尽可能的一模一样，是我们WEB课最后的结课综合大作业，里面包含了小米商城首页页面、详情页面、购物车页面等页面，用的都是最基础的html语言，外部样式表、内部样式表和javascript都用了，同时也有一点新颖的地方——bootstrap,首页用了一点点bootstrap框架,基本满足了同学应急WEB作业的所有需求；同时由于老师要求，也加上了极为详细的注释，一点一点手写出来的，实属不易，供大家互相学习讨论，对代码有疑问的也欢迎随时私信我，大家一起进步！（禁止一切不良偷窃行为，提交时间：20-01-11）
HTML+CSS购物网站——小米有品
03-23
HTML+CSS购物网站——小米有品（含首页，购物车，个人信息，登录，商品详细信息，注册页面）
轮播图——HTML网页设计
12-18
html轮播图（css+js）
商城网站-网页设计大作业
07-27
商城网站-网页设计大作业（免积分下载），有导航栏，注册登录功能，轮播图，各种商品标签等等，详细情况请看我的文章介绍。
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
Web课程设计——小米商城页面实战（html，css，js实现）
m0_67494167的博客
12-04 5682
基于html，css和js完成的三个页面，由于时间紧张，包含一部分未修正bug，欢迎交流
CSS+HTML - 搭建小米商城首页 - 总结
LIN的博客
10-10 1万+
目录 第三方字体样式 字段间分割线的样式实现 搭建网站前的reset操作 鼠标悬浮出现浮框 - 购物车部分例子 - 重点步骤总结 块与块之间的分割线 块颜色的根据位置不同而不同 悬浮上移+阴影 第三方字体样式 fontawesome - 字体库 iconfont - 字体库 在浏览器中按f12打开【开发人员工具】，找到【console(控制台)】 输入以下代码，再...
css、HTML制作小米商城网页（二）
m0_70516782的博客
07-07 1876
input:（输入） button（按钮） :focus（选取获得焦点） float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)
html5期末大作业:商城网页设计——仿京东商城网页端模板(8页面) html+css+javascr
11-17
作为HTML5期末大作业的一部分，我设计了一个商城网页，仿照京东商城的网页端模板，一共设计了8个页面。这个网页是用HTML、CSS和JavaScript来完成的。 首先，我设计了一个主页，用来展示商城的一些热门商品和促销活动。在主页上，我使用了HTML来构建页面的结构，然后使用CSS来设计页面的样式，比如布局、颜色、字体等，最后使用JavaScript来给页面添加一些动态效果，比如轮播图和商品的动态展示。 在主页的基础上，我还设计了商品列表页面，用来展示所有的商品信息；商品详情页面，用来展示单个商品的详细信息和用户评价；购物车页面，用来展示用户已经选择的商品和进行下单操作；订单确认页面，用户在这里可以查看并确认自己的订单信息；个人中心页面，用户可以在这里管理自己的个人信息和订单信息；登录页面和注册页面，用户可以在这里进行账号的登录和注册操作。 在整个设计过程中，我努力保持页面的整体风格和布局与京东商城网页端模板一致，同时也增加了一些自己的创意和改进，使得整个网页更加适合现代用户的需求和使用习惯。 总的来说，通过这个大作业的设计，我对HTML5、CSS和JavaScript的运用有了更加深入的理解和实践，同时也练习了大型项目的开发流程和团队协作能力，收获颇丰。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值