html5+css3+javascript+jquery项目实战（3）

原创 于 2025-04-24 16:17:20 发布 · 403 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html5 #css3

从这节开始，我们正式建设小米商城的首页。第一步，先建立一个空文件夹，名字叫index，用vscode编辑器打开index文件夹，在index文件夹中新建一个html文件，名字叫index.html。然后，输入

html:5

回车，即可创建html5的基本架构，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

修改title标签为：小米商城：

 <title>小米商城</title>

然后开始写头部的导航栏：

html代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
</head>
<body>
    <div class="content-head">

        <!-- 头部导航栏 -->
        <div class="content-head-nav">
            <ul id="content-head-nav-left">
                <li>
                    <a target="_blank" href="#">小米官网</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米商城</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米澎湃OS</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米汽车</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">云服务</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">loT</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">有品</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小爱开放平台</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">资质证照/a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">协议规则</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">下载app</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">Select Location</a>  <span>|</span>
                </li>
            </ul>
            <ul id="content-head-nav-right">
                <li>
                    <a target="_blank" href="#">登录</a>
                </li>
                <li>
                    <a target="_blank" href="#">注册</a>
                </li>
                <li>
                    <a target="_blank" href="#">消息通知</a>
                </li>
            </ul>
            <div id="content-head-nav-right-cart">
                <a href="#">购物车（0）</a>
            </div>

        </div>
    
    </div>
    <!-- 头部导航栏结束 -->
</body>
</html>

此时，运行这个index.html文件到浏览器，是如下这个样子：

下面开始写CSS样式：

 <style>
        html,body{padding:0;margin:0;font-size: 12px;}
        .content-head{width:100%;height: 40px;background-color: #333;color: #b0b0b0;}
        .content-head-nav{width:95%;margin:0 auto;}

        #content-head-nav-left li{display: inline-block;float: left;height: 40px;line-height: 40px;padding:0 5px;}
        #content-head-nav-left li a{padding-right: 5px;}
        #content-head-nav-right-cart{float: right;height: 40px;line-height: 40px;}
        #content-head-nav-right-cart a{display: inline-block;height: 40px;padding: 0 10px;text-decoration: none;color: #b0b0b0;}
        #content-head-nav-right-cart a:hover{background-color: #fff;color: orangered;}
        #content-head-nav-right li{display: inline-block;float: right;height: 40px;line-height: 40px;}
        #content-head-nav-left li a, #content-head-nav-right li a{color: #b0b0b0;text-decoration: none;
        cursor: pointer;}
        #content-head-nav-left li a:hover, #content-head-nav-right li a:hover{
            color: #fff;
        }
    </style>

在写CSS的过程中，对html结构进行了调理：

<body>
    <div class="content-head">

        <!-- 头部导航栏 -->
        <div class="content-head-nav">
            <ul id="content-head-nav-left">
                <li>
                    <a target="_blank" href="#">小米官网</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米商城</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米澎湃OS</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米汽车</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">云服务</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">loT</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">有品</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小爱开放平台</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">资质证照</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">协议规则</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">下载app</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">Select Location</a>  <span>|</span>
                </li>
            </ul>
            <div id="content-head-nav-right-cart">
                <a href="#">购物车（0）</a>
            </div>

            <ul id="content-head-nav-right">
                <li>
                    <a target="_blank" href="#">消息通知</a>
                <li>
                    <a target="_blank" href="#">注册</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">登录</a> <span>|</span>
                </li>
                </li>
               
            </ul>
            

        </div>

    </div>
    <!-- 头部导航栏结束 -->
</body>

以下是index.html的html+CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <style>
        html,body{padding:0;margin:0;font-size: 12px;}
        .content-head{width:100%;height: 40px;background-color: #333;color: #b0b0b0;}
        .content-head-nav{width:95%;margin:0 auto;}

        #content-head-nav-left li{display: inline-block;float: left;height: 40px;line-height: 40px;padding:0 5px;}
        #content-head-nav-left li a{padding-right: 5px;}
        #content-head-nav-right-cart{float: right;height: 40px;line-height: 40px;}
        #content-head-nav-right-cart a{display: inline-block;height: 40px;padding: 0 10px;text-decoration: none;color: #b0b0b0;}
        #content-head-nav-right-cart a:hover{background-color: #fff;color: orangered;}
        #content-head-nav-right li{display: inline-block;float: right;height: 40px;line-height: 40px;}
        #content-head-nav-left li a, #content-head-nav-right li a{color: #b0b0b0;text-decoration: none;
        cursor: pointer;}
        #content-head-nav-left li a:hover, #content-head-nav-right li a:hover{
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="content-head">

        <!-- 头部导航栏 -->
        <div class="content-head-nav">
            <ul id="content-head-nav-left">
                <li>
                    <a target="_blank" href="#">小米官网</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米商城</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米澎湃OS</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米汽车</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">云服务</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">loT</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">有品</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小爱开放平台</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">资质证照</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">协议规则</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">下载app</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">Select Location</a>  <span>|</span>
                </li>
            </ul>
            <div id="content-head-nav-right-cart">
                <a href="#">购物车（0）</a>
            </div>

            <ul id="content-head-nav-right">
                <li>
                    <a target="_blank" href="#">消息通知</a>
                <li>
                    <a target="_blank" href="#">注册</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">登录</a> <span>|</span>
                </li>
                </li>
               
            </ul>
            

        </div>

    </div>
    <!-- 头部导航栏结束 -->
</body>
</html>

紧接着，开始写js,我们使用jQuery。jQuery的下载地址是:jQuery。它的主页截止今天2025年4月24日是如下这个样子的：

点击download下载jQuery，并在之前index文件夹里新建js文件，把下载下来的jQuery放入js文件夹。我的做法是这样的，点击这个jQuery的链接：https://code.jquery.com/jquery-3.7.1.min.js，打开是密密麻麻的jQuery源码，ctrl+A 全选，ctrl+C复制，新建一个空的js文件，把复制的密密麻麻的jQuery源码复制进去，保存，名字自己定义就可以了。我命名的是jquery.js。我的目录此刻如下所示：

接着，写jquery代码：

<script src="./js/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#cart-text').stop().fadeOut();
            $('#content-head-nav-right-cart').mouseover(function(){
                $(this).css("background-color","#fff");
                $('#content-head-nav-right-cart-box').stop().animate({height:'100px'});
                $('#cart-text').stop().fadeIn();
        });
            $('#content-head-nav-right-cart').mouseout(function(){
                $(this).css("background-color","#424242;");
                $('#content-head-nav-right-cart-box').stop().animate({height:'0px'});
                $('#cart-text').stop().fadeOut();
            });
        });
    </script>

至此，头部的导航已经差不多了，最后，展示完整的代码结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <style>
        html,body{padding:0;margin:0;font-size: 12px;}
        .content-head{width:100%;height: 40px;background-color: #333;color: #b0b0b0;}
        .content-head-nav{width:95%;margin:0 auto;}

        #content-head-nav-left li{display: inline-block;float: left;height: 40px;line-height: 40px;padding:0 5px;}
        #content-head-nav-left li a{padding-right: 5px;}
        #content-head-nav-right-cart{position:relative;float: right;height: 40px;line-height: 40px;}
        #content-head-nav-right-cart a{display: inline-block;height: 40px;padding: 0 10px;text-decoration: none;color: #b0b0b0;background: #424242;;}
        #content-head-nav-right-cart a:hover{background-color: #fff;color: orangered;}
        #content-head-nav-right li{display: inline-block;float: right;height: 40px;line-height: 40px;}
        #content-head-nav-left li a, #content-head-nav-right li a{color: #b0b0b0;text-decoration: none;
        cursor: pointer;}
        #content-head-nav-left li a:hover, #content-head-nav-right li a:hover{
            color: #fff;
        }
        #content-head-nav-right-cart-box{width:300px;height: 0px;background-color: red;position: absolute;
        top:40px;right: 0;line-height: 100px;text-align: center;
        }
   
    </style>
    <script src="./js/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#cart-text').stop().fadeOut();
            $('#content-head-nav-right-cart').mouseover(function(){
                $(this).css("background-color","#fff");
                $('#content-head-nav-right-cart-box').stop().animate({height:'100px'});
                $('#cart-text').stop().fadeIn();
        });
            $('#content-head-nav-right-cart').mouseout(function(){
                $(this).css("background-color","#424242;");
                $('#content-head-nav-right-cart-box').stop().animate({height:'0px'});
                $('#cart-text').stop().fadeOut();
            });
        });
    </script>
</head>
<body>
    <div class="content-head">

        <!-- 头部导航栏 -->
        <div class="content-head-nav">
            <ul id="content-head-nav-left">
                <li>
                    <a target="_blank" href="#">小米官网</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米商城</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米澎湃OS</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小米汽车</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">云服务</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">loT</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">有品</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">小爱开放平台</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">资质证照</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">协议规则</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">下载app</a>  <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">Select Location</a>  <span>|</span>
                </li>
            </ul>
            <div id="content-head-nav-right-cart">
                <a href="#">购物车(0)</a>
                <div id="content-head-nav-right-cart-box">
                        <span id="cart-text">购物车中还没有商品，赶紧选购吧！</span>
                </div>
            </div>

            <ul id="content-head-nav-right">
                <li>
                    <a target="_blank" href="#">消息通知</a>
                <li>
                    <a target="_blank" href="#">注册</a> <span>|</span>
                </li>
                <li>
                    <a target="_blank" href="#">登录</a> <span>|</span>
                </li>
                </li>
               
            </ul>
            

        </div>

    </div>
    <!-- 头部导航栏结束 -->
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值