小U商城分类 body

最新推荐文章于 2023-02-22 19:22:14 发布
最新推荐文章于 2023-02-22 19:22:14 发布
阅读量286 收藏
点赞数
文章标签： html css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Korey__/article/details/126275327
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>分类</title>

    <!-- 引入图标 -->

    <link rel="shortcut icon" href="../images/xiaoULOGO.ico" type="image/x-icon">

    <!-- 引入样式重置文件 -->

    <link rel="stylesheet" href="../css/reset.css">

    <!-- 2.引入字体图标链接样式  -->

    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3574900_yp8gt2kwvve.css">

    <!-- 引入公共样式文件 -->

    <link rel="stylesheet" href="../css/public.css">

    <!-- 引入本面的样式 -->

    <link rel="stylesheet" href="../css/fenlei.css">

    <!-- 引入rem.js -->

    <script src="../js/rem.js"></script>

    <!-- 引入媒体查询 -->

    <link rel="stylesheet" href="../css/list.css">

</head>

<body>

    <div id="page">

        <!-- 头部 -->

        <header>

            <!-- 左箭头图标 -->

            <!-- <span class="iconfont icon-xiangzuojiantou"></span> -->

            <a href="#">分类</a>

            <!-- 更多图标 -->

            <div class="more">

                <!-- ...图标 -->

                <span class="iconfont icon-gengduo"></span>

                <div class="line"></div>

                <!-- 小圆点图标 -->

                <span class="iconfont icon-double-circle"></span>

            </div>

        </header>

        <div class="sou">

            <input type="text" placeholder="按内容搜索">

            <span class="iconfont icon-fangdajing fd"></span>

        </div>

        <div class="big">

            <div class="left">

                <ul>

                    <li><a href="#">本周特惠</a></li>

                    <li><a class="two" href="#">美妆</a></li>

                    <li><a href="#">酒水</a></li>

                    <li><a href="#">小家电</a></li>

                    <li><a href="#">服饰</a></li>

                    <li><a href="#">鞋靴</a></li>

                    <li><a href="#">饰品</a></li>

                    <li><a href="#">箱包</a></li>

                    <li><a href="#">饰品</a></li>

                    <li><a href="#">箱包</a></li>

                    <li><a href="#">家电</a></li>

                    <li><a href="#">厨卫</a></li>

                    <li><a href="#">汽配</a></li>

                </ul>

            </div>

            <div class="big1">

                <!-- 右上 -->

                <div class="right1">

                    <h1>热门精选</h1>

                    <ul>

                        <li>

                            <img src="../images/底1.png" alt="">

                            <a href="#">热卖爆品</a>

                        </li>

                        <li>

                            <img src="../images/底2.png" alt="">

                            <a href="#">新品</a>

                        </li>

                        <li>

                            <img src="../images/底3.png" alt="">

                            <a href="#">好礼专区</a>

                        </li>

                        <li>

                            <img src="../images/底4.png" alt="">

                            <a href="#">美容院</a>

                        </li>

                        <li>

                            <img src="../images/底5.png" alt="">

                            <a href="#">基础护肤</a>

                        </li>

                    </ul>

                </div>

                <!-- 右中 -->

                <div class="right1">

                    <h1>面部护肤</h1>

                    <ul>

                        <li>

                            <img src="../images/底1.png" alt="">

                            <a href="#">精华</a>

                        </li>

                        <li>

                            <img src="../images/底2.png" alt="">

                            <a href="#">洁面</a>

                        </li>

                        <li>

                            <img src="../images/底3.png" alt="">

                            <a href="#">卸妆</a>

                        </li>

                        <li>

                            <img src="../images/底4.png" alt="">

                            <a href="#">精华</a>

                        </li>

                        <li>

                            <img src="../images/底5.png" alt="">

                            <a href="#">面霜</a>

                        </li>

                    </ul>

                </div>

                <!-- 右下 -->

                <div class="right1">

                    <h1>个护工具</h1>

                    <ul>

                        <li>

                            <img src="../images/底1.png" alt="">

                            <a href="#">热卖爆品</a>

                        </li>

                        <li>

                            <img src="../images/底2.png" alt="">

                            <a href="#">新品</a>

                        </li>

                        <li>

                            <img src="../images/底3.png" alt="">

                            <a href="#">好礼专区</a>

                        </li>

                        <li>

                            <img src="../images/底4.png" alt="">

                            <a href="#">美容院</a>

                        </li>

                        <li>

                            <img src="../images/底5.png" alt="">

                            <a href="#">基础护肤</a>

                        </li>

                    </ul>

            </div>

        </div>

        <!-- 底部导航栏 -->

        <div class="box12">

            <!-- 导航图标 -->

            <div class="d1">

                <img src="../images/bg01.png" alt="">

                <p><a href="#">我</a> </p>

            </div>

            <div class="d2">

                <img src="../images/页面.png" alt="">

                <p><a href="#">分类</a> </p>

            </div>

            <div class="d3">

                <img src="../images/页面.png" alt="">

                <p><a class="d3" href="#">购物车</a> </p>

            </div>

            <div class="d4">

                <img src="../images/页面.png" alt="">

                <p><a href="#">商城</a> </p>

            </div>

            <!-- 底部线 -->

        </div>

        <div class="box13">

            <img src="../images/黑线.png" alt="">

        </div>

    </div>

</body>

</html>

岄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小U商城（PC端、移动端、响应式页面）.zip
04-10
一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作，适合小白、新手。
HTML+CSS基础一阶段-项目实战（小U商城-PC端/移动端/响应式页面）
qq_41008567的博客
04-20 7075
项目实战知识点->>学习笔记-前端基础一阶段 一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作(PC端+移动端+响应式页面制作)
小U商城购物车
MOOO___的博客
02-22 157
全部(20)分类降价(4)热卖(2)领券领券桔色果汁[20#]
手机小U商城项目
yangyanqin2545的博客
03-23 1258
小U商城项目 一.项目搭建 1.vue init webpack umall 创建项目 2.cnpm i 安装依赖项 3.cnpm i axios qs vant vuex --save 安装依赖项 二.项目清空工作 assets 目录清空 components 目录清空 router/index.js 有关helloWord删除 App.vue 根组件只留模板 main.js 唯一入口文件 三.页面布局 一级路由出口 login register index goodsL
小u列表css
Korey__的博客
08-09 112
page {}/* 头部 */header {}}header>a {}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
css body背景图全屏不论分辨率大小
09-25
css实现body背景图全屏不论分辨率大小的情况下，只要控制img 的z-index为-1即可，具体实现如下，需要的朋友可以参考下，希望对大家有所帮助
body的属性 body标签主要的属性小结
01-19
bgcolor=文本颜色 background=背景图片 text=文本颜色 超链接文字的颜色 为了突出超链接，超链接文字通常采用与其它文字不同的颜色，超链接文字的下端还会加一个横线。...有3个属性： ⑴ link：未访问过的超链接颜色...
@RequestBody的使用详解
08-25
主要介绍了@RequestBody的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
threebody.rar
05-07
该资源是根据“笨办法”学Python 3 创建的最终项目-三体小游戏，以windows为平台，需要安装virtualenv, flask才能运行。
项目（小u商城）、项目初始化、封装网络请求、项目
yangyanqin2545的博客
05-03 628
项目【小U商城】 一、项目初始化 安装步骤 1.打开数据库服务 wampserve 2.新建数据库 导入shop_db root 没有密码 3.打开后台数据接口 shop_api npm install npm start 4.打开后台管理系统 shop_vue_admin npm install npm start admin 123123 5.导入静态页面 运行 h5 微信小程序 二、封装网络请求 1.封装config.js 管理常量 //
uni-app框架项目小U商城移动端+Vue项目后台管理系统+菜谱小程序
09-25
内含三个实战项目的演示视频+项目源码github链接 项目1.uni-app框架项目-小U商城移动端 2.Vue项目-后台管理系统 3.菜谱小程序
小U商城电商网页制作（PC端+移动端+响应式页面）.zip
04-20
项目实战知识点->>学习笔记-前端基础一阶段 一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作（PC端+移动端+响应式页面） 含有项目实战的代码以及效果图
微信小程序-脱壳U体验多商家商城小程序完整源码.zip
03-28
移动开发微信小程序较新源码案例完整版
html+css 移动端商城网页设计实现
04-27
移动端商城网页设计实现，包含：商城首页，商品分类，商品购物车，商品详情，登录，注册等页面。
静态商城小demo
06-22
原生js写的一个静态商城页面小demo, 练习作业,仅供参考!
Html小项目---小商城
qq_46291038的博客
08-22 123
使用DIV+CSS完成如下布局，使用ul-li列表完成图文排列，要求： 1) 标题栏的“ css功能列表图文切换效果” 需设置字体颜色和背景颜色 2) 整体页面须有背景色的设置，页面效果如下图所示 3) 图文排列要求使用ul-li实现 4) 鼠标放在图片上时设定图片的透明化效果 5) 页面整体的居中及细节美化 6) 要求使用外部样式表 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http.
小U商城响应式body
Korey__的博客
08-17 128
商品类型管理添加商品管理商品类型管理详细详细详细详细详细详细详细商品管理商品管理
最全的商城网页模板html
04-19
有登录，注册，个人中心，收藏夹，购物车，订单详情，待付款，售后，商品详情等等大大小小三十几个页面
小购物商城系统源码
04-18
小购物商城系统源码
如何设置body大小为窗体大小
最新发布
07-14
要设置body大小为窗体大小，您可以使用CSS来实现。可以通过以下步骤来设置： 1. 首先，您需要使用CSS将body元素的margin和padding设置为0，以消除默认的边距和填充： ```css body { margin: 0; padding: 0; } ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值