网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品

本文链接：https://blog.csdn.net/qq_524614081/article/details/122344826

这是一篇关于HTML5期末大作业的博客，主要内容是设计并展示了小米商城官网的首页。博客涵盖作品展示、文件目录、代码实现和完整源码分享，适合前端学习者参考。

摘要由CSDN通过智能技术生成

HTML5期末大作业：网页设计——小米商城官网首页(1页)

文章目录

HTML5期末大作业：网页设计——小米商城官网首页(1页)
一、作品展示
二、文件目录
三、代码实现
四.完整源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/xiaomi.css"/>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery.animate-colors-min.js"></script>
</head>
<body>
     <div class="head_box">
         <div id="head_wrap">
             <div id="head_nav">
                 <a class="head_nav_a">大米网</a>
                 <span>|</span>
                 <a class="head_nav_a">MIUI</a>
                 <span>|</span>
                 <a class="head_nav_a">米聊</a>
                 <span>|</span>
                 <a class="head_nav_a">游戏</a>
                 <span>|</span>
                 <a class="head_nav_a">多看阅读</a>
                 <span>|</span>
                 <a class="head_nav_a">云服务</a>
                 <span>|</span>
                 <a class="head_nav_a">大米移动版</a>
                 <span>|</span>
                 <a class="head_nav_a">问题反馈</a>
                 <span>|</span>
                 <a class="head_nav_a" id="Select_Region_but">Select Region</a>
             </div>
             <div id="head_right">
                 <div id="head_landing">
                     <a class="head_nav_a">登陆</a>
                     <span>|</span>
                     <a class="head_nav_a">注册</a>
                 </div>
                 <div id="head_car">
                     <a class="head_car_text">购物车（0）</a>
                     <div id="car_content" style="height: 0px;width:0px ;background-color: #edffc6;z-index: 999">
                         <a class="car_text"></a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div id="main_head_box">
         <div id="menu_wrap">
             <div id="menu_logo">
                 <img src="img/xiaomi_logo.png">
             </div>
             <div id="menu_nav">
                 <ul>
                     <li class="menu_li" control="xiaomiphone">大米手机</li>
                     <li class="menu_li" control="hongmiphone">红米</li>
                     <li class="menu_li" control="pingban">平板</li>
                     <li class="menu_li" control="tv">电视&nbsp;&nbsp;盒子</li>
                     <li class="menu_li" control="luyou">路由器</li>
                     <li class="menu_li" control="yingjian">智能硬件</li>
                     <li><a>服务</a></li>
                     <li><a>社区</a></li>
                 </ul>
             </div>
             <div id="find_wrap">
                 <div id="find_bar">
                     <input type="text" id="find_input">
                 </div>
                 <div id="find_but">GO</div>
             </div>
         </div>
     </div>
     <div id="menu_content_bg" style="height: 0px;">
         <div id="menu_content_wrap">
             <ul style="top: 0px;">
                 <li id="xiaomiphone">
                     <div class="menu_content">
                         <img src="img/mi4!160x110.jpg">
                         <p class="menu_content_tit">大米手机4</p>
                         <p class="menu_content_price">1499元起</p>
                     &l