HTML5+CSS3移动商城-首页

左手的ㄟ右手 2023-09-29 12:33 28阅读 0赞

效果展示：
在这里插入图片描述
在这里插入图片描述
部分代码展示：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;  charset="UTF-8" >
  5.     <!-- width=device-width整个页面的宽度自适应 -->
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>HTML5+CSS3移动商城--首页</title>
  9.     <link rel="stylesheet" href="css/shouye.css">
  10.     <link rel="stylesheet" href="css/dibu_caidan.css">
  11. </head>
  12. <body>
  13.     <!-- 查询功能 -->
  14.     <div class="chaxun">
  15.         <input type="text" class="chaxun_neirong" placeholder="请输入要查询的内容"/>
  16.         <!-- 标签结尾方式两种：
  17.         ①<button type="button" class="chaxun_anniu"></button>
  18.         ②<button type="button" class="chaxun_anniu"/> -->
  19.         <button type="button" class="chaxun_anniu">查询</button>
  20.     </div>
  22.     <!-- 轮播图片 -->
  23.     <div id="" class="lunbo">
  24.         <img src="img/ban2.jpg" class="lunbo_img" >
  25.     </div>
  27.     <!-- 导航快捷栏 -->
  28.     <div class="caidan">
  29.         <a href="#" class="caidan_lianjie">
  30.             <img src="img/menu01.png" class="caidan_img"/>
  31.             <p>品牌大全</p>
  32.         </a>
  33.         <a href="#" class="caidan_lianjie">
  34.             <img src="img/menu02.png" class="caidan_img"/>
  35.             <p>最新上架</p>
  36.         </a>
  37.         <a href="#" class="caidan_lianjie">
  38.             <img src="img/menu03.png" class="caidan_img"/>
  39.             <p>帮助中心</p>
  40.         </a>
  41.         <a href="#" class="caidan_lianjie">
  42.             <img src="img/menu04.png" class="caidan_img"/>
  43.             <p>用户中心</p>
  44.         </a>
  45.     </div>
  47.     <!-- 最新通知 -->
  48.     <div class="tongzhi">
  49.         <a href="" class="tongzhi_lianjie">
  50.             <img src="img/news.png" alt="" class="tongzhi_zuo">
  51.             <!-- 通知内容 -->
  52.             <p class="tongzhi_neirong">2019年5月1日放假通知！</p>
  53.             <img src="img/right.png" alt="" class="tongzhi_you">
  54.         </a>
  55.     </div>
  57.     <!-- 首页区块标题 -->
  58.     <div class="qukuai">
  59.         <p class="qukuai_zuo"></p>
  60.         <p class="qukuai_zhong">最新上架</p>
  61.         <a href="" class="qukuai_you">更多</a>
  62.     </div>
  64.     <!-- 商城首页最新上架产品 -->
  65.     <div class="cp_zuixin">
  66.         <a href="#" class="cp_lianjie">
  67.             <img src="img/cp01.jpg" class="cp_img">
  68.             <p class="cp_mc">中年妈妈装冬装仿水貂绒外套40</p>
  69.             <p class="cp_mc2">￥226.00</p>
  70.         </a>
  71.         <a href="#" class="cp_lianjie">
  72.             <img src="img/cp02.jpg" class="cp_img">
  73.             <p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  74.             <p class="cp_mc2">￥636.00</p>
  75.         </a>
  76.         <a href="#" class="cp_lianjie">
  77.             <img src="img/cp03.jpg" class="cp_img">
  78.             <p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  79.             <p class="cp_mc2">￥166.00</p>
  80.         </a>
  81.         <a href="#" class="cp_lianjie">
  82.             <img src="img/cp04.jpg" class="cp_img">
  83.             <p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  84.             <p class="cp_mc2">￥396.00</p>
  85.         </a>
  86.     </div>
  88.     <!-- 商城首页精品推荐 -->
  89.     <div class="qukuai2">
  90.         <p class="qukuai_zuo"></p>
  91.         <p class="qukuai_zhong">精品推荐</p>
  92.         <a href="" class="qukuai_you">更多</a>
  93.     </div>
  95.     <!-- 商城首页最新上架产品 -->
  96.     <div class="cp2_zuixin">
  97.         <a href="#" class="cp2_lianjie">
  98.             <img src="img/cp05.jpg" class="cp2_img">
  99.             <p class="cp2_mc">中年妈妈装冬装仿水貂绒外套40</p>
  100.             <p class="cp_mc2">￥59.00</p>
  101.         </a>
  102.         <a href="#" class="cp2_lianjie">
  103.             <img src="img/cp06.jpg" class="cp2_img">
  104.             <p class="cp2_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  105.             <p class="cp_mc2">￥93.00</p>
  106.         </a>
  107.         <a href="#" class="cp2_lianjie">
  108.             <img src="img/cp07.jpg" class="cp2_img">
  109.             <p class="cp2_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  110.             <p class="cp_mc2">￥83.00</p>
  111.         </a>
  112.         <a href="#" class="cp2_lianjie">
  113.             <img src="img/cp08.jpg" class="cp2_img">
  114.             <p class="cp2_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  115.             <p class="cp_mc2">￥26.00</p>
  116.         </a>
  117.         <a href="#" class="cp2_lianjie">
  118.             <img src="img/cp09.jpg" class="cp2_img">
  119.             <p class="cp2_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  120.             <p class="cp_mc2">￥54.00</p>
  121.         </a>
  122.         <a href="#" class="cp2_lianjie">
  123.             <img src="img/cp10.jpg" class="cp2_img">
  124.             <p class="cp2_mc">中年妈妈装冬装仿水貂绒外套40岁50中年老年女洋气婆婆毛呢上衣短款</p>
  125.             <p class="cp_mc2">￥23.00</p>
  126.         </a>
  127.     </div>
  128.     <br><br><br><br>
  129.     <!-- 首页底部菜单 -->
  130.     <div class="dibu_caidan">
  131.         <a href="shopping_shouye.html" class="dibu_caidan_xiangmu">
  132.             <!-- 当前菜单图标：利用p标签可以修改图片的大小 -->
  133.             <p class="dibu_caidan_tupian"><img src="img/footer001.png" class="dibu_caidan_tupian_img"></p>
  134.             <!-- 当前菜单名称 -->
  135.             <p class="dibu_caidan_biaoti dibu_caidan_biaoti_xuanzhong">首页</p>
  136.         </a>
  137.         <a href="shopping_fenlei.html" class="dibu_caidan_xiangmu">
  138.             <!-- 当前菜单图标：利用p标签可以修改图片的大小 -->
  139.             <p class="dibu_caidan_tupian"><img src="img/footer02.png" class="dibu_caidan_tupian_img"></p>
  140.             <!-- 当前菜单名称 -->
  141.             <p class="dibu_caidan_biaoti">分类</p>
  142.         </a>
  143.         <a href="shopping_gouwuche.html" class="dibu_caidan_xiangmu">
  144.             <!-- 当前菜单图标：利用p标签可以修改图片的大小 -->
  145.             <p class="dibu_caidan_tupian"><img src="img/footer03.png" class="dibu_caidan_tupian_img"></p>
  146.             <!-- 当前菜单名称 -->
  147.             <p class="dibu_caidan_biaoti">购物车</p>
  148.             <p class="gouwucheshu">3</p>
  149.         </a>
  150.         <a href="shopping_huiyuan.html" class="dibu_caidan_xiangmu">
  151.             <!-- 当前菜单图标：利用p标签可以修改图片的大小 -->
  152.             <p class="dibu_caidan_tupian"><img src="img/footer04.png" class="dibu_caidan_tupian_img"></p>
  153.             <!-- 当前菜单名称 -->
  154.             <p class="dibu_caidan_biaoti">会员</p>
  155.         </a>
  156.     </div>
  157. </body>
  158. </html>

完整代码链接：
HTML5+CSS3移动商城-首页
相关链接
1、HTML5+CSS3移动商城-首页
2、HTML5+CSS3移动商城-分类
3、HTML5+CSS3移动商城-购物车
4、HTML5+CSS3移动商城-会员

发表评论

表情：
评论列表 （有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读