【HTML+CSS】小米官网首页

最新推荐文章于 2024-06-10 21:54:00 发布

噫好好吃

最新推荐文章于 2024-06-10 21:54:00 发布

阅读量1.3k

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_41195893/article/details/122419590

版权

1.页面结构

2.【HTML+CSS】小米官网首页预览
预览1
预览2
预览4
预览5

2.部分代码
2.1HTML


<!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="icon" href="image/favicon.ico">
    <!-- 字体样式 -->
    <link rel="stylesheet" href="font/iconfont.css">
    <!-- 全局 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 自己的 -->
    <link rel="stylesheet" href="css/mi.css">


</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <div class="wrap">
            <!-- 左菜单 -->
            <ul class="header-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">IoT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载app</a><span>|</span>
                    <div class="download">
                        <a href="#">
                            <img src="/image/download.png" alt="">
                            <p>小米商城app</p>
                        </a>
                    </div>
                    <div class="triangle">
                    </div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <!-- 右菜单 -->
            <ul class="header-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xf0179;</i> 购物车（0）
                    </a>
                    <!-- 购物车出来的那一块 -->
                    <div class="cart-list">
                        购物车还没有商品，赶紧选购吧！
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部结束 -->

2.2css

/* css样式开始 */
.header{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    color: #b0b0b0;
    font-size: 12px;
}
/* 居中容器 */
.wrap{
    width: 1226px;
    margin: 0 auto;
}

.header-left{
    float: left;
}

.header-right{
    float: right;
}

.header li{
    position: relative;
    float: left;
}

.header a{
    color: #b0b0b0;
}

.header a:hover{
    color: #fff;
}

.header span{
    color: #424242;
    margin: 0 3.6px;
}

.cart{
    position: relative;
    margin-left: 25px;
    width: 120px;
    height: 40px;
    background-color: #424242;
    /* 光标进去变小手 */
    cursor: pointer;
    /* 变化持续时间 */
    transition: all .2s;
}

.cart i{
    margin-right: 4px;

}

.cart:hover{
    background-color: #fff;
}

.cart:hover a{
    color:#ff6700;
}

.cart-list{
    z-index: 850;
    position: absolute;
    right: 0;
    top: 40px;
    width: 316px;
    height: 0px;
    line-height: 0px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    color:#424242;
    /* 高度为0 文字溢出 */
    overflow: hidden;
    /* 过渡   动画 */
    transition: all .2s;
}

.cart:hover>.cart-list{
    /* 滑动下来的效果 */
    height: 100px;
    line-height: 100px;
}

.download{
    position: absolute;
    top: 40px;
    /* 水平居中 */
    left: 50%;
    /*  宽的一半 */
    margin-left: -62px;

    width: 124px;
    height: 0px;
    background-color: #fff;
    box-shadow: 0 1px 5px #ccc;

    overflow: hidden;

    transition: all .3s;

    z-index: 9;
}

.download img{
    width: 90px;
    margin: 18px 0 12px ;
}

2.3JS（侧边滚动栏）

/1. 获取元素
var sliderbar = document.querySelector('.tool-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.banner');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function () {

    // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
    if (window.pageYOffset >= bannerTop) {
        sliderbar.style.position = 'fixed';
        sliderbar.style.top = sliderbarTop + 'px';
    } else {
        sliderbar.style.position = 'absolute';
        sliderbar.style.top = '350px';
    }
    // 4. 当我们页面滚动到main盒子，就显示 goback模块
    if (window.pageYOffset >= mainTop) {
        goBack.style.display = 'block';
    } else {
        goBack.style.display = 'none';
    }

})