小U商城响应式body

最新推荐文章于 2024-04-30 20:15:41 发布
最新推荐文章于 2024-04-30 20:15:41 发布
阅读量128 收藏
点赞数
文章标签： servlet html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Korey__/article/details/126395015
版权

<!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>小U商城首页</title>

  <!-- 1.引入重置样式 -->

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

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

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

  <!-- 3.引入index样式 -->

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

  <!-- 4.引入网站小图标 -->

  <link rel="icon" href="./xiaoULOGO.ico">

  <!-- 5.引入适配css文件 -->

  <link rel="stylesheet" href="../css/index-adapter.css">

</head>

<body>

  <!-- 头部 -->

  <header>

    <!-- 左边 logo图片 -->

    <div class="left">

      <a class="iconfont icon-ego-menu" href="#"></a>

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

     

    </div>

    <!-- 右边 -->

    <div class="right">

      <a href="#">

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

      </a>

      <span>你好周杰伦</span>

      <!-- 注销图标 -->

      <i class="iconfont icon-zhuxiaodenglu"></i>

      <span>注销</span>

    </div>

    <div class="box10">

      <div class="a2">

        <div class="a1">

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

          <a href="#">商品管理</a>

        </div>

        <ul>

          <li>

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

            <a href="#">商品信息管理</a>

          </li>

          <li>

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

            <a href="#">添加商品管理</a>

          </li>

          <li>

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

            <a href="#">商品类型管理</a>

          </li>

        </ul>

        <div class="a3">

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

          <a href="#">订单管理</a>

        </div>

        <div class="a3">

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

          <a href="#">用户管理</a>

        </div>

        <div class="a3">

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

          <a href="#">管理员管理</a>

        </div>

      </div>

    </div>

  </header>

  <div class="wrap">

    <div class="box1">

      <div class="a2">

        <div class="a1">

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

          <a href="#">商品管理</a>

        </div>

        <ul>

          <li>

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

            <a href="#">商品信息管理</a>

          </li>

          <li>

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

            <a href="#">添加商品管理</a>

          </li>

          <li>

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

            <a href="#">商品类型管理</a>

          </li>

        </ul>

        <div class="a3">

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

          <a href="#">订单管理</a>

        </div>

        <div class="a3">

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

          <a href="#">用户管理</a>

        </div>

        <div class="a3">

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

          <a href="#">管理员管理</a>

        </div>

      </div>

    </div>

    <div class="box2">

      <div class="box3">

        <div class="a4">

          <div class="a6">

            <span></span>

            <p>商品信息管理</p>

          </div>

          <div class="a5">

            <span>操作</span>

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

          </div>

        </div>

        <div class="box5">

          <div class="box4">

            <p>50%</p>

            <p>退货率</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

          <div class="box4">

            <p>100%</p>

            <p>好评率</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

          <div class="box4">

            <p>60%</p>

            <p>反馈率</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

          <div class="box4">

            <p>100%</p>

            <p>访问率</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

        </div>

      </div>

      <div class="box3">

        <div class="a4">

          <div class="a6">

            <span></span>

            <p>商品流量管理</p>

          </div>

          <div class="a5">

            <span>操作</span>

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

          </div>

        </div>

        <div class="box5">

          <div class="box4">

            <p>100%</p>

            <p>转换率</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

          <div class="box4">

            <p>20%</p>

            <p>新用户注册</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

          <div class="box4">

            <p>30%</p>

            <p>来自于分享</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

          <div class="box4">

            <p>10%</p>

            <p>日PV</p>

            <div class="a7">

              <a href="#">详细</a>

              <span class="iconfont icon-youjiantou-01"></span>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

</html>

岄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小U商城（PC端、移动端、响应式页面）.zip
04-10
一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作，适合小白、新手。
小u列表css
Korey__的博客
08-09 112
page {}/* 头部 */header {}}header>a {}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
HTML+CSS基础一阶段-项目实战（小U商城-PC端/移动端/响应式页面）
qq_41008567的博客
04-20 7075
项目实战知识点->>学习笔记-前端基础一阶段 一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作(PC端+移动端+响应式页面制作)
小U商城电商网页制作（PC端+移动端+响应式页面）.zip
04-20
项目实战知识点->>学习笔记-前端基础一阶段 一阶段完成HTML、CSS基础知识以及其新增特性，掌握页面布局方式，完成项目实战-小U商城电商网页制作（PC端+移动端+响应式页面） 含有项目实战的代码以及效果图
小U商城购物车
MOOO___的博客
02-22 157
全部(20)分类降价(4)热卖(2)领券领券桔色果汁[20#]
H5响应式网页翻牌小游戏代码.zip
07-11
body {  margin: 0;  padding: 0; } .tile {  display: block;  float: left;  border-radius: 5%;... 这是一款支持PC端跟手机端的HTML5响应式网页翻牌小游戏代码。电脑手机都可以玩的网页小游戏源码。
jQuery响应式左右全屏图片轮播插件
06-10
效果描述： 基于jQuery实现的左右全屏效果，同时也是响应式效果 缺点是引入的文件比较多，注意别搞错了 使用方法： 1、将CSS中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
CSS实现响应式布局的方法
12-13
用CSS实现响应式布局 响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询，下面就介绍一下怎么运用： 使用@media 的三种方法 1.直接在CSS文件中使用： @media 类型 and ...
CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
12-28
如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。 index <!DOCTYPE html> <html> <head> <title>响应式...
css body背景图全屏不论分辨率大小
09-25
css实现body背景图全屏不论分辨率大小的情况下，只要控制img 的z-index为-1即可，具体实现如下，需要的朋友可以参考下，希望对大家有所帮助
uni-app框架项目小U商城移动端+Vue项目后台管理系统+菜谱小程序
09-25
内含三个实战项目的演示视频+项目源码github链接 项目1.uni-app框架项目-小U商城移动端 2.Vue项目-后台管理系统 3.菜谱小程序
小购物商城系统源码
04-18
小购物商城系统源码
项目（小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 管理常量 //
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-10 286
美妆购物车
用html画一个四叶草
liulang68的博客
04-20 1681
以上是部分代码，需要请看主页加联系方式。
高德地图+HTML+点击事件+自定心信息窗体
pursue.dreams的博客
04-30 162
【代码】高德地图+HTML+点击事件+自定心信息窗体。
html中引用视频文件的方式有哪些？
最新发布
2301_79698214的博客
04-30 148
需要注意的是，以上方法中的视频文件路径可以是相对路径或绝对路径，具体取决于视频文件的位置。另外，不同的浏览器和设备对于视频文件的支持可能有所不同，因此可以通过添加兼容性的代码来处理不支持视频播放的情况。
在html中使用数学公式latex
bigcrab的博客
04-27 411
来自 https://katex.org/docs/autorender 可以自动渲染。
html响应式网页制作
12-15
响应式网页 /* 默认样式 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; } h1 { color: #333...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值