HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站

最新推荐文章于 2024-02-19 14:55:20 发布

我的大学生活

最新推荐文章于 2024-02-19 14:55:20 发布

阅读量756

点赞数

分类专栏： web前端期末大作业文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_38512570/article/details/129895787

版权

本文介绍了如何使用HTML+CSS+JavaScript制作一个仿京东的购物商城网页，包括网页简介、效果展示、代码解析和个人总结。适合前端初学者，涉及到Div+CSS布局、鼠标特效、导航栏、多媒体元素和表单技术的应用。

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

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

一、网页介绍📖

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词123">
    <meta name="Description" content="描述">
    <link rel="shortcut icon" href="/picture/1.ico" />
    <link rel="stylesheet" type="text/css" href="public/css/base.css">
    <!-- 引入base.css -->
    <link rel="stylesheet" type="text/css" href="css/shortcut.css">
    <!-- 头部导航 -->
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <!-- 头部搜索栏 -->
    <link rel="stylesheet" type="text/css" href="./css/navjd.css" />
    <!-- 文字导航，轮播图 -->
    <link rel="stylesheet" type="text/css" href="./css/tab.css" />
    <!-- 选项卡 -->
    <script src="public/js/jquery-3.1.1.js"></script>
    <title>京东(JD.COM)综合网购首选</title>
    <style type="text/css">
    </style>
</head>

<body>
    <div id="shortcut">
        <div class="w">
            <ul class="fl">
                <!-- 所在城市区块 -->
                <li class="dropdown" id="ttbar-mycity">
                    <div class="dt cw-icon">
                        <i class="iconfont"></i>
                        <span>北京</span>
                    </div>
                    <!-- 所在城市区块下拉菜单 -->
                    <div class="dd dropdown-layer">
                        <div class="item"><a class="selected" href="">北京</a></div>
                        <div class="item"><a href="">上海</a></div>
                        <div class="item"><a href="">天津</a></div>
                        <div class="item"><a href="">重庆</a></div>
                        <div class="item"><a href="">河北</a></div>
                        <div class="item"><a href="">山西</a></div>
                        <div class="item"><a href="">河南</a></div>
                        <div class="item"><a href="">辽宁</a></div>
                        <div class="item"><a href="">吉林</a></div>
                        <div class="item"><a href="">黑龙江</a></div>
                        <div class="item"><a href="">内蒙古</a></div>
                        <div class="item"><a href="">江苏</a></div>
                        <div class="item"><a href="">山东</a></div>
                        <div class="item"><a href="">安徽</a></div>
                        <div class="item"><a href="">浙江</a></div>
                        <div class="item"><a href="">福建</a></div>
                        <div class="item"><a href="">湖北</a></div>
                        <div class="item"><a href="">湖南</a></div>
                        <div class="item"><a href="">广东</a></div>
                        <div class="item"><a href="">广西</a></div>
                        <div class="item"><a href="">江西</a></div>
                        <div class="item"><a href="">四川</a></div>
                        <div class="item"><a href="">海南</a></div>
                        <div class="item"><a href="">贵州</a></div>
                        <div class="item"><a href="">云南</a></div>
                        <div class="item"><a href="">西藏</a></div>
                        <div class="item"><a href="">陕西</a></div>
                        <div class="item"><a href="">甘肃</a></div>
                        <div class="item"><a href="">青海</a></div>
                        <div class="item"><a href="">宁夏</a></div>
                        <div class="item"><a href="">新疆</a></div>
                        <div class="item"><a href="">港澳</a></div>
                        <div class="item"><a href="">台湾</a></div>
                        <div class="item"><a href="">钓鱼岛</a></div>
                        <div class="item"><a href="">海外</a></div>
                    </div>

                </li>
            </ul>
            <!-- 导航栏右侧 -->
            <ul class="fr">
                <li id="ttbar-login">
                    <a href="" class="link-login">您好 , 请登录 </a>
                    <a href="" class="link-regist">免费注册</a>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt"><a href="">我的订单</a></div>
                </li>
                <li class="spacer"></li>
                <li id="ttbar-myjd" class="dropdown">
                    <div class="dt cw-icon">
                        <a href="">我的京东</a>
                        <i class="iconfont"></i>
                        <!-- 我的京东下拉菜单 开始-->
                        <div class="dd dropdown-layer">
                            <div class="userinfo">
                                <div class="u-pic">
                                    <a href="">
			    			   <img src="picture/shortcut/user.jpg" alt="" width="60px" height="60px">
			    			</a>
                                </div>
                                <div class="u-name u-login">
                                    <a href="">你好，请登录</a>
                                </div>
                                <div class="u-extra">
                                    <a href="">优惠券<span></span></a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="">消息<span></span></a>
                                </div>
                            </div>
                            <!-- userinfo end -->
                            <div class="otherlist">
                                <div class="fore1">
                                    <div class="item"><a href="">待处理订单<span></span></a></div>
                                    <div class="item"><a href="">我的问答<span></span></a></div>
                                    <div class="item"><a href="">降价商品<span></span></a></div>
                                    <div class="item"><a href="">返修退换货<span></span></a></div>
                                </div>
                                <div class="fore2">
                                    <div class="item"><a href="">我的关注<span></span></a></div>
                                    <div class="item"><a href="">我的京豆<span></span></a></div>
                                    <div class="item"><a href="">我的理财<span></span></a></div>
                                    <div class="item"><a href="">京东白条<span></span></a></div>
                                </div>
                            </div>
                            <!-- otherlist结束 -->
                        </div>
                        <!-- dd end 下拉菜单结束 -->
                    </div>
                    <!-- dt end控制左右边距 结束-->
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt"><a href="">京东会员</a></div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt"><a href="">企业采购</a></div>
                </li>
                <li class="spacer"></li>
                <li id="ttbar-serv" class="dropdown">
                    <div class="dt cw-icon">
                        <a href="">客户服务</a>
                        <i class="iconfont"></i>
                        <div class="dd dropdown-layer">
                            <div class="item-client">客户</div>
                            <div class="item"><a href="">帮助中心</a></div>
                            <div class="item"><a href="">售后服务</a></div>
                            <div class="item"><a href="">在线客服</a></div>
                            <div class="item"><a href="">电话客服</a></div>
                            <div class="item"><a href="">意见建议</a></div>
                            <div class="item"><a href="">客服邮箱</a></div>
                            <div class="item fn-clear"