商城左侧菜单条代码

最新推荐文章于 2021-09-19 14:39:16 发布
最新推荐文章于 2021-09-19 14:39:16 发布
阅读量5k 收藏
点赞数
分类专栏： web前端 文章标签： 商城左侧菜单条代码 html css 菜单 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benxiaohai888/article/details/77872103
版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城左侧菜单条</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            padding-top: 10px;
            padding-bottom: 5px;
            color: gray;
        }

        ul li {
            list-style: none;
            padding-left: 40px;
        }

        hr {
            border: 1px dashed gray;
        }

        .all {
            background-color: white;
            width: 320px;
            height: 980px;
        }

        .top {
            background-color: black;
            height: 60px;
            color: white;
            line-height: 60px;
            padding-left: 20px;
            font-size: large;
        }

        .menu_top {
            width: 300px;
            height: 25px;
            line-height: 30px;
            /*background-color: rebeccapurple;*/
            font-size: large;
            font-weight: bold;
        }

        .menu_img {
            width: 30px;
            height: 30px;
            float: left;
        }

        .menu_title {
            padding-left: 10px;
        }

        .menu {
            padding-top: 15px;
            /*height: 100px;*/
            width: 320px;
            padding-left: 20px;

        }

    </style>
</head>
<body bgcolor="gray">
<div class="all">
    <div class="top">
        全部分类
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/1.gif">
            </span>
            <span class="menu_title">护肤</span>
        </div>
        <ul>
            <li>洁面  化妆水   喷雾   美容液   眼霜</li>
            <li>眼部精华   眼膜   面膜   面膜贴</li>
            <li>水洗面膜   免洗面膜   精华   精油</li>
            <li>啫哩  凝露  乳液   面霜  日霜  晚霜</li>
        </ul>
        <hr>
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/3.gif">
            </span>
            <span class="menu_title"> 彩妆</span>
        </div>

        <ul>
            <li> 卸妆  防晒   隔离   BB霜  粉底  粉饼</li>
            <li> 睫毛膏   眼影  唇彩  腮红  眼线笔</li>
            <li> 底妆   遮瑕   蜜粉  眉笔   美甲</li>
        </ul>
        <hr>
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/2.gif">
            </span>
            <span class="menu_title">香氛</span>
        </div>

        <ul>
            <li>男香  女香  小Q装   中性香水</li>

        </ul>
        <hr>
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/4.gif">
            </span>
            <span class="menu_title">身体护理</span>
        </div>

        <ul>

            <li>洗发  护发   沐浴  身体乳  手足护理</li>
            <li> 护手霜  纤体  身体精油  颈部护理</li>
            <li> 个人护理  卫生用品  脱毛</li>
        </ul>
        <hr>
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/5.gif">
            </span>
            <span class="menu_title">礼盒套装</span>
        </div>

        <ul>

            <li> 护肤套装  身体护理套装  彩妆套装</li>
            <li> 旅行装   香水套装  男士套装</li>
        </ul>
        <hr>
    </div>

    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/6.gif">
            </span>
            <span class="menu_title">美容工具</span>
        </div>

        <ul>
            <li> 护肤  彩妆   美发  美体   美甲
            </li>
            <li> 美容仪器  其他美容工具</li>
        </ul>
        <hr>
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/7.gif">
            </span>
            <span class="menu_title">母婴专区</span>
        </div>

        <ul>
            <li>奶粉  尿裤湿巾   母婴洗护</li>

        </ul>
        <hr>
    </div>
    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/8.gif">
            </span>
            <span class="menu_title">男士专区</span>
        </div>

        <ul>
            <li> 洁面  爽肤水  面霜   啫哩   男香</li>
            <li> 眼霜  凝胶   乳液   精华   沐浴</li>
        </ul>
        <hr>
    </div>


    <div class="menu">
        <div class="menu_top">
            <span class="menu_img">
                <img src="img/9.gif">
            </span>
            <span class="menu_title">食品保健</span>
        </div>

        <ul>
            <li> 瘦身类  保健类   美容类  食品类</li>

        </ul>

    </div>

</div>
</body>
</html>

结果：


benxiaohai888
关注
专栏目录
react项目笔记3----设计左侧菜单
weixin_38522914的博客
06-09 482
在utils文件夹下创建menu.js import { HomeOutlined } from '@ant-design/icons'; const menus = [ { path: '/home', title: '首页', breadcrumbName: 'home', icon: HomeOutlined, role: 1 // 所有人都可见 }, { path: '/pro', title: '产品管理', bre
商城导航栏代码
从零出发
07-20 4604
商城导航栏代码（参考慕课网视频）是电商网站中常用的代码，现分享如下： HTML代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;商城菜单&lt;/title&gt; &lt;link rel="stylesheet
仿京东商城商品分类菜单效果代码
08-09
仿京东商城商品分类菜单效果代码 仿京东商城商品分类菜单效果代码 仿京东商城商品分类菜单效果代码
web开发之小米商城左侧导航简洁版
一杯咖啡，一行代码
09-19 618
用超链接来和行内元素转换为块元素实现，当然，超链接现在来说是空的
andriod 商城左侧固定菜单,右侧内容两个list实现
11-21
andriod 商城左侧固定菜单,右侧内容两个list实现
京东商城左侧菜单jQuey代码
05-12
内容索引:脚本资源,jQuery,京东商城,左侧菜单　京东商城左侧菜单jQuey代码，不少人喜欢这个菜单，好心人自写了一个模型，大家可以自己套用，菜单多的话按照代码内的格式自己添加，兼容性测试了一下，在IE8/火狐下都...
jQuery简单实现仿京东商城的左侧菜单效果代码
10-23
本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容，我们将展开对以下几个知识点的讨论： 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...
商城左侧分类jquery菜单特效代码
03-20
【标题】"商城左侧分类jquery菜单特效代码"所涉及的知识点主要集中在JavaScript的jQuery库上，这是一种广泛应用于网页动态效果和交互的JavaScript库。在商城网站中，左侧分类菜单是用户浏览商品的重要导航元素，而...
css商城网站常用左侧分类下拉导航菜单代码
06-05
本主题将深入探讨如何使用CSS（层叠样式表）创建一个常见的商城网站左侧分类下拉导航菜单。这个菜单在鼠标悬停时展开，提供了一个简洁的交互方式，帮助用户快速浏览和访问各类商品。 首先，我们要理解CSS的核心概念...
jquery带商品分类侧边栏列表的商城导航菜单
12-12
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城导航菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。
仿京东导航栏
07-24
仿京东导航栏,仿京东导航栏,仿京东导航栏仿京东导航栏
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
12-01
在网站建设中，特别是做商城和产品网站，通常会用到导航弹出菜单，像是jquery写的仿京东导航菜单，一个经典的左侧多级导航菜单，学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单，精简版代码 先看下jquery仿京东导航效果： 前端html代码如下： 代码如下: <ul> <li><a>baidu</a></li> <div class=”tips”> <p><a>baidu</a></p> </div> <li>goolge</li> <div c
jQuery仿京东商城侧边栏购物车菜单代码.zip
07-11
jQuery仿京东商城侧边栏购物车菜单代码，用在商城网站中，在右侧展示购物车信息，然后还可以去结算，不错的效果，php中文网推荐下载！
jQuery侧边栏导航购物车代码
07-28
jQuery侧边栏导航购物车代码是一款仿京东商城的红色侧边栏浮动商城图标导航，包含用户中心，购物车列表，收藏喜欢，幸运文字滚动等效果代码。
京东商城菜单
iteye_9451的博客
04-17 196
京东商城菜单
仿淘宝商城左侧分类导航菜单效果（平滑，高效，智能定位，jquery版）
weixin_34199405的博客
08-27 432
仿淘宝商城   左侧分类导航菜单  效果（平滑，高效，智能定位，jquery版）   jquery实现： $(document).ready(function () { &lt;!-- 鼠标进入--&gt; var g = $(".pop-subcategory"); $('.items').delegate("li", "mouseenter", f...
竖式菜单---纯CSS京东商城分类导航菜单代码
养有道
06-19 3829
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;
防京东左侧菜单
li09chao的博客
05-16 240
[img]http://dl.iteye.com/upload/attachment/0068/2156/4a7e6ad3-3bfc-3f5f-892f-ff06c8a326aa.gif[/img]
jQuery仿京东左侧物品导航栏
热门推荐
lgdshr123的博客
09-28 1万+
1、HTML和样式部分 style type="text/css"> html{color:#666;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;
django实现网上商城左侧垂直商品分类菜单代码
最新发布
10-14
在Django中实现网上商城的左侧垂直商品分类菜单，可以按照以下步骤进行操作： 1. 创建商品分类模型类：在Django的models.py文件中创建一个商品分类模型类，例如： ``` from django.db import models class Category(models.Model): name = models.CharField(max_length=100) # 其他字段... def __str__(self): return self.name ``` 2. 创建商品分类视图函数：在Django的views.py文件中创建一个商品分类视图函数，该函数从数据库中获取所有的商品分类信息，并传递给模板文件，例如： ``` from django.shortcuts import render from .models import Category def category_menu(request): categories = Category.objects.all() return render(request, 'menu.html', {'categories': categories}) ``` 3. 创建模板文件：在Django的templates目录下创建一个名为menu.html的模板文件，该文件包含左侧垂直商品分类菜单的HTML代码，例如： ``` <div class="menu"> <ul> {% for category in categories %} <li><a href="#">{{ category.name }}</a></li> {% endfor %} </ul> </div> ``` 4. 创建URL映射：在Django的urls.py文件中创建一个URL映射，将对应的URL请求映射到商品分类视图函数上，例如： ```python from django.urls import path from .views import category_menu urlpatterns = [ path('menu/', category_menu, name='category_menu'), # 其他URL映射... ] ``` 以上就是用Django实现网上商城左侧垂直商品分类菜单的代码实现。其中，通过创建商品分类模型类存储商品分类信息，使用商品分类视图函数获取数据库中的商品分类数据，并通过模板文件展示左侧垂直的商品分类菜单。最后，创建URL映射将对应的URL请求映射到商品分类视图函数上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值