学生网页作业——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业

最新推荐文章于 2024-09-06 22:12:58 发布

优质内容贡献

最新推荐文章于 2024-09-06 22:12:58 发布

阅读量1.3k

点赞数 1

分类专栏： web大学生个人网站作业模 html网页设计作业学生div+css静态网页设计成品文章标签： css html javascript 华为前端

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

版权

这是一个使用HTML5, CSS和JavaScript制作的仿华为手机商城网页设计的期末大作业，包括作品展示、文件目录、代码实现和获取源码的介绍。" 113517461,10324502,Python批量读取多个文件夹内的年度数据文件,"['Python编程', '文件操作', '数据处理', 'pandas库']

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

HTML5期末大作业：仿华为手机商城网站设计——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业

。

文章目录

HTML5期末大作业：仿华为手机商城网站设计——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="hw_index.css" >
    <link rel="icon" href="img/hw.ico">
    <script src="hw_index.js"></script>
</head>
<body>
<!-- 页面顶部 -->
<!-- 顶部容器 ：width:100% -->
<header id="top">
    <!-- 内容显示区域 ：width : 1211px -->
    <div id="top_box">
        <ul class="lf">
            <li><a href="#">华为官网</a></li>
            <li><a href="#">华为荣耀</a></li>
            <li>
                <a href="#">软件应用</a>
                <!--鼠标移入移出事件-->
            </li>
            <li><a href="#">花粉俱乐部</a></li>
            <li><a href="#">Select Region</a></li>
        </ul>
        <ul class="rt">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">V码(优购码)</a></li>
            <li><a href="#">手机版</a></li>
            <li>
                <a href="#">网站导航</a>
                <!--鼠标移入移出事件-->
            </li>
        </ul>
    </div>
</header>
<!-- logo 和 搜索框 -->
<div id="top_main">
    <div class="lf  top_main_left">
        <img src="img/image/newLogo.png" alt="" />
    </div>
    <div class="lf search_box">
        <div class="search">
            <input type="text" class="text" id="txtSearch"/>
            <input type="button" class="button" value="搜索"/>
        </div>
        <div class="hot_words">
            <span>热门搜索：</span>
            <a href="#"> 5C</a>
            <a href="#"> HUAWEI P9</a>
            <a href="#"> 5X</a>
            <a href="#">荣耀7</a>
            <a href="#"> Mate 8</a>

        </div>
    </div>
    <div class="lf" id="my_hw">我的商城</div>
    <div class="lf" id="settle_up">我的购物车</div>
    <div class="lf" id="weixin">
        <img src="img/qrcode_vmall_wechat01.jpg" style="width:75px;height:75px;" alt=""/>
        <p>微信关注我们</p>
    </div>
</div><!--top_main-->

<!-- 导航 -->
<nav id