Web学习 京东网案例：头部+底部

最新推荐文章于 2021-11-15 15:06:45 发布
原创 最新推荐文章于 2021-11-15 15:06:45 发布 · 688 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细探讨了京东网站的头部和底部设计，分析了其布局、功能和用户体验，适合Web设计初学者学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

源文件网址

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/normalize.css"><!-- css初始化 -->
    <link rel="stylesheet" href="css/base.css"><!-- 公共样式 头部和底部 -->
    <link rel="stylesheet" href="css/index.css"><!-- 京东首页css -->
</head>
<body>
    <!-- 京东顶部 S -->
    <div class="J_event">
        <a href="#" class="w">
            <i></i>
        </a>
    </div>
    <!-- 京东顶部 E -->
    <!-- 快捷导航栏 S -->
    <div class="shortcut">
        <div class="w">
            <ul class="fl">
                <li>
                    <i></i>
                    北京
                </li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">
                        您好，请登录&nbsp;&nbsp;
                    </a>
                    <a href="#" class="style-red">
                        免费注册
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        我的订单
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        我的京东
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        京东会员
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        企业采购
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        客户服务
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        网站导航
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li style="position: relative; z-index: 1;">
                    <a href="#">
                        手机京东
                    </a>
                    <div class="erweima">
                        <img src="images/erweima.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 快捷导航栏 E -->
    <!-- header S -->
    <div class="header">
        <div class="w inner">
            <!-- logo -->
            <div class="logo">
                <h1>
                    <a href="#" title="京东网">京东</a>
                </h1>
            </div>
            <!-- 搜索 -->
            <div class="search">
                <input type="text" value="微单相机">
                <button>
                    <i></i>
                </button>
                <em></em>
            </div>
            <!-- 热词部分 -->
            <div class="hotwords">
                <a href="#" class="style-red">学生专享</a>
                <a href="#">300减160</a>
                <a href="#">七折返场</a>
                <a href="#">骑行运动</a>
                <a href="#">家电榜单</a>
                <a href="#">唇彩唇蜜</a>
                <a href="#">微波炉</a>
                <a href="#">巧克力</a>
                <a href="#">多层保温饭盒</a>
            </div>
            <!-- 购物车部分 -->
            <div class="myCar">
                <i></i>
                <a href="#">我的购物车</a>
                <s>0</s>
            </div>
            <!-- 电脑部分 -->
            <div class="computer
最低0.47元/天 解锁文章

200万优质内容无限畅学
从零开始构建强大 AI 对话系统：ollama + deepseek + open-webui 完整部署教程（Docker 版）
weixin_41004518的博客
02-07 4555
在现代的人工智能应用中，基于模型的对话系统和开放式网络UI正逐渐成为越来越多企业和开发者的选择。本篇博文将为您详细讲解如何通过 Docker 部署ollama、deepseek 和 open-webui，并结合使用 Docker Compose 实现更加高效、便捷的管理。ollamaollama是一个强大的对话生成模型，它支持多种自然语言处理任务，包括对话生成、问答、文本总结等。通过容器化部署，ollama 可以轻松地集成到开发环境中，提供一个灵活、可扩展的对话服务。
Java简单案例：Servlet+JDBC实现登录功能
从零到1%
06-29 9301
环境说明 mysql 5.7版本 mysql 5.7版本 mysql中创建sx的数据库，在sx数据库中有一张tb_user的表 tb_user的表中有id，username，password 三个字段 使用Java简单实现对数据库的增删改查
京东网案例：头部+底部
05-25
京东网案例：头部+底部
手机京东页面页面主体和头部搜索
dianpi2993的博客
04-11 295
效果图： base.css /*重置样式*/ *,::before,::after{ /*选择所有的标签*/ margin:0; padding:0; /*清楚移动端默认的 点击高亮效果*/ -webkit-tap-highlight-color:transparent; /*设置所有的都是以边框开始计算宽度 百分...
移动WEB开发之流式布局-京东案例
qq_46199553的博客
09-09 916
2. 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口  一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。  iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元 素看上去很小，一般默认可以通过手
移动web京东项目
大青虫的博客
05-02 901
目录 1.首页轮播图 1.首页轮播图 ps：注意细节 1.巧用width:100%（牢记参照父元素） 比如 ，下图中，li 的宽度 等于 盒子（jd_banner）的宽度 ，作用都懂，很容易搞混淆 2.overflow:hidden(父元素，裁剪 ，子元素) visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。...
Web前端第二季(CSS):九:第5章:案例开发:501-京东案例开发+502-京东切分三框布局+503-利用绝对定位和相对定位开发第一列+504-开发中间布局
qq_40544338的博客
11-15 177
目录 一.目的 1.想：学习前端知识 2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school官网:当做字典使用 1.菜鸟教程：当做字典使用 三.注意 四.操作:1:成功:501-京东案例开发 1.运行结果：成功： 四.操作:2:成功:502-京东切分三框布局 1.运行结果：成功： 四.操作:2:成功:503-利用绝对定位和相对定位开发第一列 1.运行结果：成功： ...
JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part2
08-06
此外，本书的配套光盘还免费提供了价值人民币330元的java教学视频，对java语言进行了全面讲解，帮助一些不会java语言的读者快速地从java基础知识的学习中过渡到java web的学习与开发上. 第1部分 xml篇. 第1章 xml...
网易邮箱注册页面仿真实战：HTML+CSS+JavaScript全解析
- Web安全方面，如防止SQL注入、XSS攻击等。 - 使用IDEA这类集成开发环境进行代码编写和项目管理。 - 对图片资源的处理和优化，可能涉及到的文件如`images`目录下的各种图片资源。 ### 学习目标和建议 - 建立坚实...
开发实战：SpringBoot+MySQL+JSP篮球论坛系统设计
资源摘要信息:"本资源是一个基于Spring Boot、MySQL和JSP技术栈构建的篮球论坛系统项目的源码包。项目通过Java语言开发，并利用Spring Boot框架实现了...这个篮球论坛系统项目可以作为学习和实践这些技术的良好案例。
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
京东移动端首页案例-流式布局源代码文件附上
HTML+CSS京东商城实战
04-23
京东网站大体部分制作。适合新手入门。内含html css文件。
一个全面的仿京东的商城案例
01-17
这是一个全面的商超案例，他主使用的技术有SSH（配置文件型），并且附有源码，还有关键点的讲解，例如多对多的处理，类别处理等。 若果你是Web菜鸟，并且想学习SSH这三个框架，她是你的不二选择。
防京东商品详情页面头部选择栏
02-25
仿京东商品详情页面头部选择栏，选择商品系列、品牌、尺码、颜色等
仿京东主页Web开发源代码（html+css)）
07-11
对京东主页的效果图进行web网页搭建，这里仅基于HTML和CSS对网页主体结构和样式进行了重现。
前端移动Web第一天：流式布局-京东首页案例
m0_46597922的博客
04-08 495
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=...
第18天：京东网页头部制作
lelara的博客
08-31 721
一，京东页面制作开始（头部）1，浮动的盒子宽度由内容定，不需要设置宽度2，绝对定位不占位置，相对定位占位置 3，不一定是子绝父相，还可能是子绝父绝，要根据情况来定。如果是子绝父绝，那父级的父级一定是相对定位。 二，中间分割线制作 给需要竖线的地方添加空的利，每个立设置类样式，设置宽高，背景色 刚开始做的也不多，目前进度如下：  ...
京东项目源码，包含JS，html,css,fonts
11-07
完整的京东项目，有轮播图效果，倒计时，静态页面的全部搭建
前端学习（412）：京东制作页面20页面底部下
歌谣的博客
01-15 335
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
掌握前端技能：1+X Web前端开发实战例题解析
资源摘要信息:"本资源提供了1+X ...文件名称“1+x WEB考证”可能指的是有关1+X Web前端开发能力考证的资料，这可能是一个认证考试的名称，这类考试通常会涉及实际操作题目，检验考生对前端技术的熟练程度和应用能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值