小米官网静态网页项目实战4

最新推荐文章于 2023-03-22 19:24:40 发布
最新推荐文章于 2023-03-22 19:24:40 发布
阅读量256 收藏 2
点赞数
分类专栏： 项目实战 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53732821/article/details/116050761
版权

中间导航条
结构：

<!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>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base1.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index1.css">

</head>
<body>
    <!-- 创建顶部导航条 -->
    <!-- 创建顶部导航条外部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar w clearfix">
            <!-- 左侧的导航条 -->
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">金融</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li class="app-wrapper">
                    <a class="app" href="javascript:;">下载app
                    <div class="qrcode">
                        <img src="../mi/img/download.png" alt="">
                        <span>小米商城APP</span>
                    </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>               
            </ul>

            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车（０）
                    </a>
                </li>
            </ul>

            <!-- 用户登录注册 -->
            <ul class="use-info">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
                <li class="line">|</li>
            </ul>
  
        </div>
    </div>

    <!-- 创建一个头部的外部容器 -->
    <div class="header-wrapper">
        <div class="header w clearfix">
            <!-- 创建一个logo -->
            <h1 class="logo" title="小米">
                小米官网
                <a class="home" href="/"></a>
                <a class="mi" href="/"></a>
            </h1>

            <!-- 创建一个中间导航条的容器 -->
            <div class="nav-wrapper">
                <!-- 创建导航条 -->
                <ul class="nav clearfix" c>
                    <li><a class="all-goods" href="#">全部商品分类</a></li>
                    <li class="show-goods"><a href="#">小米手机</a></li>
                    <li class="show-goods"><a href="#">Redmi 手机</a></li>
                    <li class="show-goods"><a href="#">电视</a></li>
                    <li class="show-goods"><a href="#">笔记本</a></li>
                    <li class="show-goods"><a href="#">家电</a></li>
                    <li class="show-goods"><a href="#">路由器</a></li>
                    <li class="show-goods"><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>

                    <!-- 创建一个弹出层 -->
                    <div class="goods-info">

                    </div>
                </ul>
            </div>
            <!-- 创建搜索框的容器 -->
            <div class="search-wrapper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

</body>
</html>

样式：
/* 主页index1.html的样式表 */

/* 顶部导航条的样式 */
.topbar-wrapper{
    /* 设置宽度全屏 */
    width: 100%;
    /* 设置高度和行高 */
    height: 40px;
    line-height: 40px;
    /* 设置背景颜色 */
    background-color: #333;
}

/* 设置超链接的颜色 */
.topbar a{
    font-size: 12px;
    color:#b0b0b0;
    display: block;
}

/* 设置超链接移入的效果 */
.topbar a:hover{
    color: #fff;
}

/* 设置中间分割线 */
.topbar .line{
    font-size: 12px;
    color: #424242;
    margin: 0px 8px;
    margin-top: -1px;
}

/* 设置左侧导航栏 */
.service, .topbar li{
    float: left;
}

.app{
    position: relative;
}
/* 设置app下的小三角 */
/* .app-wrapper:hover > .app::after*/
.app::after{ 
    display: none;
    content: "";
    /* 设置绝对定位 */
    position: absolute;
    width: 0;
    height: 0;
    /* 设置四个方向的边框 */
    border: 8px solid transparent;
    /* 去除上边框 */
    border-top: none;
    /* 单独设置下边框的颜色 */
    border-bottom-color: #fff;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

/* .app-wrapper:hover>.app .qrcode{
    display: block;
} */
.app:hover .qrcode,
.app:hover::after{
    display: block;
    height: 148px;
}
/* 设置下载app二维码的下拉 */
.app .qrcode{
    /* 使其脱离文档流 */
    /* display: none; */
    position: absolute;
    left: -40px;
    width: 124px;
    /* height: 148px; */
    height: 0;
    overflow: hidden;
    /* 设置行高 */
    line-height: 1;
    /* 使文字居中 */
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    /* transition用来为样式设置过渡效果 */
    transition: height 0.3s;
    z-index: 9999;
}

/* 设置二维码图片 */
.app .qrcode img{
    width: 90px;
    margin: 17px;
    margin-bottom: 10px;
}

/* 设置二维码中的文字 */
.app .qrcode span{
    font-size: 14px;
    color: #000;
}

/* 设置右侧导航 */
.shop-cart, .use-info{
    float: right;
}

/* 设置购物车的内边距 */
.shop-cart{
    margin-left: 26px;
}

/* 设置购物车（０）这个超链接 */
.shop-cart a{
    width: 120px;
    background: #424242;
    /* 设置购物车居中 */
    text-align: center;
}

/* 设置图标购物车与购物车之间的距离 */
.shop-cart i{
    margin-right: 2px;
}

/* 设置超链接购物车移入效果 */
.shop-cart:hover a{
    background-color: #fff;
    color:#FF6700;
}

.header-wrapper{
    /* background-color: red; */
    position: relative;
}

/* 设置中间的header */
.header{
    height: 100px;
    /* background-color: #ff0; */
}

/* 设置logo的h1样式 */
.header .logo{
    float: left;
    margin-top: 22px;
    width: 55px;
    height: 55px;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
}

/* 统一设置logo的超链接 */
.header .logo a{
    position: absolute;
    width: 55px;
    height: 55px;
    left: 0;
    background-color: #FF6700;
    background-image: url(../img/mi-logo.png);
    background-position: center;
    transition: left 0.3s;
}

/* 设置home图片 */
.header .logo .home{
    left: -55px;
    background-image: url(../img/mi-home.png);
}

/* 设置鼠标移入以后两个图标的位置 */
.header .logo:hover .mi{
    left: 55px;
}

.header .logo:hover .home{
    left: 0;
}

/* 设置中间的导航条 */
.header .nav-wrapper{
    float: left;
    margin-left: 7px;
}

/* 设置导航条 */
.header .nav{
    /* width: 792px; */
    height: 100px;
    line-height: 100px;
    padding-left: 58px;
}

/* 设置导航条中的li */
.nav-wrapper li{
    float: left;
}

.nav-wrapper li a{
    display: block;
    font-size: 16px;
    margin-right: 20px;
}

.nav-wrapper li a:hover{
    color: #FF6700;
}

/* 隐藏全部商品 */
.all-goods{
    visibility: hidden;   
}

.nav .goods-info{
    /* height: 228px; */
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 0;
    transition: height 0.3s;
    z-index: 9999;
}

/* .nav li:not(:first-of-type):not(:nth-child(9)):not(:nth-child(10)):hover ~ .goods-info, */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover{
    height: 228px;
    border-top: 1px solid rgba(224, 224, 224);
    box-shadow: 0 5px 3px rgba(0, 0, 0, .3);
}

/* 设置搜索框的容器 */
.search-wrapper{
    width: 296px;
    height: 50px;
    float: right;
    margin-top: 25px;
}

.search-wrapper .search-inp{
    box-sizing: border-box;
    width: 244px;
    border: none;
    float: left;
    height: 50px;
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    outline: none;
}

/* 设置input获取焦点后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button{
    border-color: #FF6700;
}

.search-wrapper .search-btn{
    float: left;
    height: 50px;
    width: 52px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #616161;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    border-left: none;
}

.search-wrapper .search-btn:hover{
    background-color: #FF6700;
    color: white;
    border: none;
}

效果图：
在这里插入图片描述
注意：最左侧小米logo移入有动画效果（换主页），最右侧搜索框点击有橙色边框效果。

梁龙裕的博客
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小米商城静态网页html+css，没有做后台的拿来直接用，方便后端人员学习，从码云上下的，我发现csdn上没有免费的，互相学习
07-22
仅供学习参考
XiaomiRouter自学之路(01-项目背景)
Creator_Ly的博客
02-12 1419
XiaomiRouter自学之路(01-项目背景)
HTML5作业：实现小米官网静态首页
coding加油站
07-30 5241
小米官网，模仿小米，小米界面作业，小米商城，模仿小米商城
CSS+HTML静态网页——小米官网（附源代码）
最新发布
Jsheep91的博客
03-22 9412
链接：https://pan.baidu.com/s/1Bhq1GEZBCH3USx_Tj31jiA?
实战小米官网静态页面1：导航栏部分
qq_51704382的博客
11-11 1342
实战小米官网静态页面1：导航栏部分
用html和css制作静态小米网页（一）
qq_48802281的博客
07-06 1681
用html和css制作静态小米网页
html+css实现静态小米商城界面的学习感受与收获
yinjie77的博客
04-05 3288
前言：学习了html与css的相关知识点，在学习时也能理解各个知识点的意思，但总感觉知识十分零散，让我写一个网站我也无从下手，所以为了巩固之前所学知识，先不着急看js的书，而是找了一个项目做一下，在复习的同时，查漏补缺，最重要的就是学习搭建网站的一个思路，所以在b站上找了一个小米商城的项目跟着做，以下是学习过程中的一些体会。（其中关于知识点有不对或需要改进的地方，欢迎在评论区斧正） 2021.4.5 在开始写代码之前，最好先理清整个网站的架构是如何组成的。 理清架构之后，可以开始着手基础代码的编写（也可以
大学生静态网页设计期末作业仿照小米商城的官网源码.zip
06-18
仿照小米商城的官网编写的主页、登录、注册和购物车功能，只是一些静态网页和一些简单的功能,没有涉及到与后台数据的交互，适合新手来练习web的技术项目大学生静态网页设计期末作业仿照小米商城的官网源码。...
小米商城前端静态网页
06-18
静态小米商城首页。 下半部分由于全是图片的填充，不想做重复工作，所以只是划分了块，有需要的自己填充图片即可。
THML+CSS静态页面实战项目-小米商城
05-20
本项目是一个小米官网的静态页面，主要考察的是对页面布局的掌握能力和CSS布局的运用，通过做项目可以让我们对前端的基础知识有一个熟练地掌握，在学后边的JS与框架是能更加的得心应手；
XiaoMi:HTML + CSS静态网页布局小米商城源代码
03-24
XiaoMi:HTML + CSS静态网页布局小米商城源代码
小米官网的静态页面
03-14
对于前端页面课程设计练习，包括对HTML和CSS的使用
小米官网的静态页面33
03-14
对于前端页面课程设计练习，包括对HTML和CSS的使用
小米官网首页静态页
07-21
html5+jq+css 做的小米官网首页，实现le小米官网所有特效，有需要的小伙伴赶紧下载吧
仿小米官网静态页面源码
12-28
仿小米官网静态页面，有首页，注册，登录还有一个全屏商品介绍页面。
美拍静态网页项目
08-18
基于美拍的静态网页项目
仿小米官网首页和登录页面静态的
12-27
本资源属于仿小米商城首页和登录页面及购物车页面 页面内容纯静态，不包含JavaScript代码，只包含css和html文件， 首页简化，去掉了一些复杂逻辑页面，简单明了，适合用于学校布置的html网页设计课题。
HTML5+CSS3实现小米静态首页（仿写）
IT_Tea的博客
04-12 1968
HTML5+CSS3实现小米静态首页，这是我仿写的一个小米的官方网站，小米网站相对于来说比较简洁，看起来比较简单但是实现所有的样式还是有点难度（相对于新手来说）。期末作业也经常做一个天猫，京东等静态页面，需要的话可以下载，地址放在下面（图标、图片都有）。
html+css 简单的静态网页小米官网
热门推荐
犹如菜鸡的博客
09-04 1万+
html+css简单静态小米官网 把之前做的改进了一下，其他的都是一样的布局 效果图： 新增了一些字体文件 不多说上代码 HTML代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 网站说明 --> <me
写一个小米商城的静态网页
03-02
以下是一个简单的小米商城的静态网页示例： ```html <!DOCTYPE html> 小米商城 , initial-scale=1.0"> /* 自定义样式 */ 小米商城 <span class="navbar-toggler-icon"></span> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值