CSS----京东首页最下方菜单栏

最新推荐文章于 2022-12-03 17:05:24 发布
最新推荐文章于 2022-12-03 17:05:24 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： CSS CSS自学笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36818386/article/details/81087382
版权

制作京东首页最下方菜单栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div
        {
            border: 1px solid #333333;
            width: 1260px;
            height: 200px;
        }
        dt
        {
            font: 15px "宋体";
            font-weight: 800;
            text-indent: 2.5em;
        }
        .dl1
        {
            float: left;
            padding-right: 140px;
            padding-bottom: 75px;
            font: 12px/14px "微软雅黑";
            line-height: 25px;
        }
        .dl2
        {
            padding-right: 115px;
            padding-bottom: 92px;
            float: left;
            font: 12px/14px "微软雅黑";
            line-height: 25px;
        }
        .dl3
        {
            padding-right: 150px;
            padding-bottom: 92px;
            float: left;
            font: 12px/14px "微软雅黑";
            line-height: 25px;
        }
        .dl4
        {
            float: left;
            padding-right: 133px;
            padding-bottom: 92px;
            font: 12px/14px "微软雅黑";
            line-height: 25px;
        }
        .dl5
        {
            float: left;
            padding-bottom: 60px;
            font: 12px/14px "微软雅黑";
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>
        <dl class="dl1">
            <dt>购物指南</dt>
            <dd>购物流程</dd>
            <dd>会员介绍</dd>
            <dd>生活旅行</dd>
            <dd>常见问题</dd>
            <dd>大家电</dd>
            <dd>联系客服</dd>
        </dl>
        <dl class="dl2">
            <dt>配送方式</dt>
            <dd>上门自提</dd>
            <dd>211限时达</dd>
            <dd>配送服务查询</dd>
            <dd>配送费收取标准</dd>
            <dd>海外配送</dd>
        </dl>
        <dl class="dl3">
            <dt>支付方式</dt>
            <dd>货到付款</dd>
            <dd>在线支付</dd>
            <dd>分期付款</dd>
            <dd>邮局汇款</dd>
            <dd>公司转账</dd>
        </dl>
        <dl class="dl4">
            <dt>售后服务</dt>
            <dd>售后政策</dd>
            <dd>价格保护</dd>
            <dd>退款说明</dd>
            <dd>返修/退换货</dd>
            <dd>取消订单</dd>
        </dl>
        <dl class="dl5">
            <dt>特色服务</dt>
            <dd>夺宝岛</dd>
            <dd>DIY装机</dd>
            <dd>延保服务</dd>
            <dd>京东E卡</dd>
            <dd>京东通信</dd>
            <dd>京东JD+</dd>
        </dl>
    </div>
</body>
</html>

 

运行结果：

 

 

丸子哥哥
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
竖式菜单---纯CSS京东商城分类导航菜单代码
养有道
06-19 3815
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 纯CSS京东商城分类导航菜单代码 .my_left_category{ width:150px; font-size:12px; font-family:arial,sans-serif;
仿京东页面底部
PuppetHeart的博客
11-09 532
HTML代码 <!-- 底部开始 --> <div class="footer"> <!-- 服务部分 --> <div class="footer-service"> <div class="w service-inner"> <ul> <li> <div class="service-unit"> <h5&
精美的京东商城商品分类导航菜单代码
11-21
精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码
小程序京东首页底部导航栏代码
weixin_42398640的博客
11-02 2030
“tabBar”: { “selectedColor”: “#eb6830”, “list”: [ { “pagePath”: “page/home/index”, “iconPath”: “image/home.png”, “selectedIconPath”: “image/home-hl.png”. “text”: “首页” }, { “pagePath”: “page/home/index...
案例:京东登录页面css创建
zyy446688的博客
12-03 2120
css
HTML简单实现京东商城底部导航
ttxs62825的博客
08-04 6267
HTML实现京东商城底部导航 京东商城底部截图： 比如，“购物指南”栏，在鼠标未放到下面导航时为原色，当鼠标移动到上面时，会变颜色，点击会跳转新的页面。 可以看出采用的是表格样式，即是 ,外部再加个div标签。 实例代码如下： 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ #nav{ text-decoration:none;
京东界面之底部导航栏
Liba_ba的博客
01-05 2598
//Java哦 public class Jingdong extends AppCompatActivity { private BottomTabBar bottab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceS
css 京东底部菜单按钮悬浮层
11-03
css 京东底部菜单按钮悬浮层 css 京东底部菜单按钮悬浮层
京东网案例：头部+底部
05-25
京东网案例：头部+底部
仿京东、淘宝底部导航
10-23
仿照京东、淘宝使用RadioGroup实现导航效果,UI设计优美，推荐给大家！
我写的京东页面代码
weixin_30423977的博客
03-14 3297
1、index.html---主要搭建页面的结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" x...
仿京东底部导航栏实现
qq_36428821的博客
07-20 1200
项目中我们会经常用到底部导航栏，那么底部导航栏是怎么实现的呢？其实很简单： 我这里面抽取了一个商城类的项目demo，供大家参考： activity代码如下： public class MainActivity extends AppCompatActivity { private LinearLayout mHomeLl; private LinearLayout mCar
练习(三) 仿京东(中) html+css
hyugyug的博客
10-17 480
本次是仿京东中上部 效果图： html代码： <!-- 中间区域 start --> <div class="w grid"> <!-- 分类 --> <div class="grid-col1 fl"> <ul> <li><a href="#">家用电器</a>...
android仿京东底部导航菜单,css+html模仿京东app底部导航栏
weixin_39640195的博客
05-28 652
css+html模仿京东app底部导航栏完成效果如下：上下滑动页面，底部导航栏一直存在，位置不变底部导航栏实现代码如下：只需css写超简单代码重点是footer标签，其余标签是为和京东导航栏一样而设置的样式footer {width: 193rem;margin-top: 2rem;height: 25rem;background-color: white;padding-bottom: 1px;...
手把手教你快速搞定京东APP设置页面布局
爱开发
10-25 8582
［ 爱开发］陪伴你一起成长，一起进步今天给大家分享的是关于自定义控件组合，节省开发时间。如果你对自定义组合控件不怎么熟悉，建议你先浏览这篇文章《手把手教你开发自定义控件》今天要分享的控件可以帮忙我们快速完成设置页面布局。譬如下面的京东设置页面。 其中像地址管理这一行，我们一般可以用TextView这个控件来实现    android:layout_width="match_parent"    a
京东底部
weixin_30788619的博客
10-23 121
<! DOCTYPE HTML><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .header{ background-color: #f1f1f1; margin-top: 480px; margin-le...
css-in-css
最新发布
02-05
CSS-in-CSS是一种前端开发技术，也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别，使得样式与组件的逻辑和结构紧密关联，提高代码的可维护性和可重用性。 在传统的CSS开发中，样式是全局共享的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丸子哥哥

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值