商品部分看情况进行编辑其余部分非最优化写法有待改进

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>油画商城</title>
  6.     <link rel="stylesheet" href="style.css">
  7.     <script type="text/javascript" src="javascript.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 页眉部分 -->
  11.     <div class="header">
  12.         <div class="logo">
  13.             <img src="image/logo.png" alt=""><!-- 链接图片在css内调整对应位置关系 -->
  14.         </div>
  15.         <div class="menu" onmouseleave="show_menu1()">
  16.             <div class="menu_title" onclick="show_menu()">
  17.                 <a href="#">内容分类</a><!-- 通过css设置和JavaScript设置产生点击产生弹出框效果 -->
  18.             </div><!-- 当鼠标点击时弹出鼠标再次点击时关闭  鼠标出内容分类框时再次消失 -->
  19.             <ul id="menu1">
  20.                 <li>现实主义</li>
  21.                 <li>抽象主义</li>
  22.             </ul>
  23.         </div>
  24.         <div class="auth">
  25.             <ul>
  26.                 <li><a href="youhuadenglu.html">登录</a></li>
  27.                 <li><a href="youhuazhuce.html">注册</a></li>
  28.             </ul>
  29.         </div>
  30.     </div>
  31.     <!-- 主页部分 -->
  32.     <div class="content">
  33.         <div class="banner"><!-- 设置banner区域内主页广告图的对应位置 -->
  34.             <img src="image/welcome.png" alt="" class="banner_img">
  35.         </div>
  36.         <div class="goods"><!-- 通过列表的方式排列商品区域内各个商品的信息 -->
  37.             <ul><!-- 将商品的图片 标题 说明 价格 购物车链接放在一个ul里面 -->
  38.                 <li><!-- 将每个商品的独立信息放在一个li里面 后再css内调整商品展示图及说明和价格的位置关系 -->
  39.                     <img src="image/nvlang.jpg" class="img-li" alt="">
  40.                     <div class="info">
  41.                         <h1>无名女郎</h1>
  42.                         <p>我乔鲁诺·乔巴拿有个梦想！他是获得了乔纳森·乔斯达肉体的DIO的儿子
  43.               ，既有着DIO的冷酷与心机，也有着乔纳森的勇气和正义感。乔鲁诺梦想成为“黑帮巨星”</p>
  44.                         <div class="img-btn">
  45.                             <div class="price">￥5800</div>
  46.                             <a href="#" class="cart">
  47.                                 <div class="btn">
  48.                                     <img src="image/cart.svg">
  49.                                 </div>
  50.                             </a>
  51.                         </div>
  52.                     </div>
  53.                 </li>
  54.                 <li>
  55.                     <img src="image/richu.jpg" class="img-li" alt="">
  56.                     <div class="info">
  57.                         <h1>日出夕阳</h1>
  58.                         <p>我乔鲁诺·乔巴拿有个梦想！他是获得了乔纳森·乔斯达肉体的DIO的儿子
  59.               ，既有着DIO的冷酷与心机，也有着乔纳森的勇气和正义感。乔鲁诺梦想成为“黑帮巨星”</p>
  60.                         <div class="img-btn">
  61.                             <div class="price">￥6300</div>
  62.                             <a href="#" class="cart">
  63.                                 <div class="btn">
  64.                                     <img src="image/cart.svg">
  65.                                 </div>
  66.                             </a>
  67.                         </div>
  68.                     </div>
  69.                 </li>
  70.                 <li>
  71.                     <img src="image/songshu.jpg" class="img-li" alt="">
  72.                     <div class="info">
  73.                         <h1>松树林</h1>
  74.                         <p>我乔鲁诺·乔巴拿有个梦想！他是获得了乔纳森·乔斯达肉体的DIO的儿子
  75.               ，既有着DIO的冷酷与心机，也有着乔纳森的勇气和正义感。乔鲁诺梦想成为“黑帮巨星”</p>
  76.                         <div class="img-btn">
  77.                             <div class="price">￥4800</div>
  78.                             <a href="#" class="cart">
  79.                                 <div class="btn">
  80.                                     <img src="image/cart.svg">
  81.                                 </div>
  82.                             </a>
  83.                         </div>
  84.                     </div>
  85.                 </li>
  86.                 <li>
  87.                     <img src="image/wuhui.jpg" class="img-li" alt="">
  88.                     <div class="info">
  89.                         <h1>红魔舞会</h1>
  90.                         <p>我乔鲁诺·乔巴拿有个梦想！他是获得了乔纳森·乔斯达肉体的DIO的儿子
  91.               ，既有着DIO的冷酷与心机，也有着乔纳森的勇气和正义感。乔鲁诺梦想成为“黑帮巨星”</p>
  92.                         <div class="img-btn">
  93.                             <div class="price">￥12800</div>
  94.                             <a href="#" class="cart">
  95.                                 <div class="btn">
  96.                                     <img src="image/cart.svg">
  97.                                 </div>
  98.                             </a>
  99.                         </div>
  100.                     </div>
  101.                 </li>
  102.                 <li>
  103.                     <img src="image/wudaojiaoshi.jpg" class="img-li" alt="">
  104.                     <div class="info">
  105.                         <h1>舞蹈家</h1>
  106.                         <p>我乔鲁诺·乔巴拿有个梦想！他是获得了乔纳森·乔斯达肉体的DIO的儿子
  107.               ，既有着DIO的冷酷与心机，也有着乔纳森的勇气和正义感。乔鲁诺梦想成为“黑帮巨星”</p>
  108.                         <div class="img-btn">
  109.                             <div class="price">￥9800</div>
  110.                             <a href="#" class="cart">
  111.                                 <div class="btn">
  112.                                     <img src="image/cart.svg">
  113.                                 </div>
  114.                             </a>
  115.                         </div>
  116.                     </div>
  117.                 </li>
  118.                 <li>
  119.                     <img src="image/wen.jpg" class="img-li" alt="">
  120.                     <div class="info">
  121.                         <h1>吻</h1>
  122.                         <p>我乔鲁诺·乔巴拿有个梦想！他是获得了乔纳森·乔斯达肉体的DIO的儿子
  123.               ，既有着DIO的冷酷与心机，也有着乔纳森的勇气和正义感。乔鲁诺梦想成为“黑帮巨星”</p>
  124.                         <div class="img-btn">
  125.                             <div class="price">￥8800</div>
  126.                             <a href="#" class="cart">
  127.                                 <div class="btn">
  128.                                     <img src="image/cart.svg">
  129.                                 </div>
  130.                             </a>
  131.                         </div>
  132.                     </div>
  133.                 </li>
  134.             </ul>
  135.         </div>
  136.         <div class="fanye"><!-- 插入列表来展现翻页部分 通过再css内float:left;设置浮动效果来并排显示 -->
  137.             <ul>
  138.                 <li><a href="#">首页</a></li>
  139.                 <li><a href="#">上一页</a></li>
  140.                 <li><a href="#"><span class="page">1</span></a></li><!-- 设置静态页面的选中效果背景 -->
  141.                 <li><a href="#">2</a></li>
  142.                 <li><a href="#">3</a></li>
  143.                 <li><a href="#">4</a></li>
  144.                 <li><a href="#">5</a></li>
  145.                 <li><a href="#">...</a></li>
  146.                 <li><a href="#">98</a></li>
  147.                 <li><a href="#">99</a></li>
  148.                 <li><a href="#">下一页</a></li>
  149.                 <li><a href="#">末页</a></li>
  150.             </ul>
  151.         </div>
  152.     </div>
  153.     <!-- 页尾部分 -->
  154.     <div class="footer"><!-- <hr/>分页效果不合适就选用再页尾部分添加div上边框线来代替 设置宽度 -->
  155.         <div class="fuhao">
  156.         <p class="hongse">&#77;&#45;&#72;&#65;&#76;&#76;&#82;&#89;</p>
  157.       <p>&copy;&#50;&#48;&#49;&#55;&nbsp;&#80;&#79;&#87;&#69;&#82;&#69;&#68;&nbsp;&#66;&#89;
  158.         &nbsp;&#68;&#79;&#68;&#79;&#75;&#69;&#46;&#73;&#78;&#67;</p></div>
  159.     </div>
  160. </body>
  161. </html>