基于HTML+CSS+JavaScript仿华为手机电子商城

原创

IT司马青衫

发布于 2022-08-16 09:59:34

1.3K0

发布于 2022-08-16 09:59:34

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

<font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质源码】

<font color='#b44846' size='4px'> ❤</font> 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

@TOC

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

二、代码展示😈

1.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="nav">
    <div id="category">
        <a href="#">全部商品</a>
    </div>
    <ul id="nav_items" class="lf">
        <li><a href="#">首页</a></li>
        <li><a href="#">华为专区</a></li>
        <li><a href="#">荣耀专区</a></li>
        <li><a href="#">荣耀畅玩5C</a><s></s></li>
        <li><a href="#">HUAWEI P9 Plus</a></li>
        <li><a href="#">荣耀7</a></li>
        <li><a href="#">精彩页面</a></li>
    </ul>
</nav>
<!-- banner 广告 -->
<div id="banner">
    <ul id="cate_box" class="lf">
        <li>
            <h3><a href="#">手机</a></h3>
            <p><span>荣耀</span><span>畅玩</span><span>华为</span><span>Mate/P系列</span></p>
        </li>
        <li>
            <h3><a href="#">平板 & 穿戴</a></h3>
            <p><span>平板电脑 </span><span>手环</span><span>手表</span></p>
        </li>
        <li>
            <h3><a href="#">智能家居</a></h3>
            <p><span>电力猫</span><span>路由器 </span><span>电视盒子</span></p>
        </li>
        <li>
            <h3><a href="#">必备配件</a></h3>
            <p><span>入耳式耳机</span><span>保护壳</span><span>保护套</span></p>
        </li>
        <li>
            <h3><a href="#">潮流配件</a></h3>
            <p><span>支架 </span><span>自拍杆/器 </span><span>智能开关/插座</span></p>
        </li>
        <li>
            <h3><a href="#">应用市场</a></h3>
            <p><span>手机游戏 </span><span>手机应用</span></p>
        </li>
    </ul>
    <!--图片轮播 -->
    <form>
        <div class="slider">
            <img id="slider_img" class="img_slider" src="img/slide01.png" alt=""/>
        </div>
    </form>

</div>
<div class="hr-2"></div>
<!-- 网页主体 -->
<section id="main">
    <div class="layout">
        <div class="fl u-4-3 lf">
            <ul>
                <li class="channel-pro-item">
                    <!--<i class="p-tag"><img src="img/new_ping.png" style="padding-left: 0" alt=""/></i>-->
                    <div class="p-img">
                        <img src="img/phone01.png" alt=""/>
                    </div>
                    <div class="p-name lf"><a href="#">HUAWEI P9 Plus</a></div>
                    <div class="p-shining">
                        <div class="p-slogan">一上手，就爱不释手</div>
                        <div class="p-promotions">5月6日10:08 火爆开售</div>
                    </div>
                    <div class="p-price">
                        <em>¥</em>
                        <span>3988</span>
                    </div>
                    <div class="p-button lf">
                        <a href="#">立即抢购</a>
                    </div>
                </li>
                <li class="channel-pro-item" style="background-color:#E2F9FB"><!--荣耀畅玩5C-->
                    <!--<i class="p-tag"><img src="img/new_ping02.png" alt=""/></i>-->
                    <div class="p-img">
                        <img src="img/phone02.png" alt=""/>
                    </div>
                    <div class="p-name lf"><a href="#">荣耀畅玩5C</a></div>
                    <div class="p-shining">
                        <div class="p-slogan">16纳米8核芯千元普及风暴</div>
                        <div class="p-promotions">5月10日10:08震撼开售</div>
                    </div>
                    <div class="p-price">
                        <em>¥</em>
                        <span>899</span>
                    </div>
                    <div class="p-button lf">
                        <a href="#">立即抢购</a>
                   </div>
                </li>
                <div class="hr-2"></div>
                <li class="channel-pro-item" style="background-color:#FFFCE7"><!--荣耀畅玩5C-->

             </dt>
         </dl><dl class="s2">
         <dt>
             <i></i>
             关于商城
         <dd>
             <ol>
                 <li><a href="">公司介绍</a></li>
                 <li><a href="">华为商城简介</a></li>
                 <li><a href="">联系客服</a></li>
             </ol>
         </dd>
         </dt>
     </dl>
         </dl><dl class="s2">
         <dt>
             <i></i>
             关注我们
         <dd>
             <ol>
                 <li><a href="">新浪微博</a></li>
                 <li><a href="">腾讯微博</a></li>
                 <li><a href="">花粉社区</a></li>
                 <li><a href="">商城手机版</a></li>
             </ol>
         </dd>
         </dt>
     </dl>

     </div>
<footer id="foot_box">
    <div class="footer-otherLink">
        <p style="text-align:left; text-align: center">
            友情链接 | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 | 莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 手机之家 | 中商情报网 | 钻石小鸟 | 刷机精灵 | 安卓市场 | 优购物官网 | 移动叔叔 | 奥特莱斯 |

        </p>
        <p style="text-align:left;text-align: center"">
            中关村商城 | 酷狗音乐 | 华为商城手机版 | 手机世界 | 百信手机网 | 一呼百应网 | 卡宝宝网 | 多特软件下载 | 嗨淘网 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 世界名表 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 |
        </p>
        <p style="text-align:left; text-align: center"">
            九块邮官网 | 安卓游戏 | 阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | 中国供应商 | Apple110 | 91.手机门户网 | 添翼圈社区 | 易购官网 | 美乐乐家具网 |
        </p>
        <p style="text-align:left; text-align: center"">
            智能电视网 | 快递查询 | 亿智蘑菇手机网 | UC浏览器 | 以旧换新 | 华为P9 | 携程租车 | 安卓市场 | 申请链接 >>
        </p>
    </div>
    </div>
    </div>
    </div>
    <div class="footer-warrant-area">
        <p style="text-align:left; text-align: center">
            隐私政策 服务协议 Copyright © 2012-2016 VMALL.COM 版权所有 保留一切权利
        </p>
        <p style="text-align:left; text-align: center">
            <img src="img/20160226162651249.png" alt=""/>
            苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2012]0401-019号
        </p>
        <p style="text-align:left; text-align: center" class="footer-img">
            <img src="img/20160226162415360.png" alt=""/>
            <img src="img/20160226162521265.png" alt=""/>
            <img src="img/20160226162531395.png" alt=""/>
        </p>
    </div>
</footer>
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/bootstrap.js"></script>

</body>
</html>

2.CSS样式代码 🏠

#top_box{
    height:30px;
}
#top_box>img{
    float:left;
    margin-top:8px;
    margin-right:5px;
}
#top_main:after{
    content: "";
    display: block;
    clear: both;
}
#top_box>ul>li{
    float:left;
    text-align:center;
    padding-right: 25px;
}

.search_box{
    width:510px;
    padding:10px 0px 0 40px;
    margin:10px 0px 10px 110px;
    position:relative;
}
.search_box div.search{
    width:500px;
    height:30px;
    border: 3px solid #CA141D;
    background-color: #CA141D;
}
input.text{
    width:405px;
    height:19px;
    padding:5px;
    background-color: #ffffff;
    line-height: 20px;
    color: #999999;
    font-family: arial,"\5b8b\4f53";
}
input.button{
    width:75px;
    height:30px;
    font-size:14px;
    font-weight: 700;
    color: #fff;
    background:#CA141D;
}
div.hot_words,{
    height:18px;
}
div.hot_words:after{
    content: "";
    display:block;
    clear: both;
}
div.hot_words span, div.hot_words a{
    float:left;
    font-weight: 400;
    margin-right: 15px;
}
#my_hw,#settle_up{
    width:99px;
    height:30px;
    line-height: 30px;
    margin-top: 26px;
    padding: 0 4px 0 0px;
    border: 1px solid #EFEFEF;
    background-color: #FFF;
    text-align: center;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
}
#weixin{
    margin: 10px 0px 5px 80px;
}
.top_main_left{
    margin-top: 26px;
}
/*导航*/
#nav {
    height: 40px;
}
#category {
    width: 245px;
    float: left;
    background: #CD2A2C;
    height: 40px;
}