search

博客列表 >关于复刻ewshop商城首页头部的制作

关于复刻ewshop商城首页头部的制作

当时只道是寻常
当时只道是寻常原创
2022年05月10日 10:48:14402浏览

1、轮播图使用了jquery插件

  1. <div class="head">
  2.     <div class="wrapper clearfix">
  3.         <div class="clearfix" id="top"><h1 class="fl"><a href="index.html"><img src="img/logo.png"/></a></h1>
  4.             <div class="fr clearfix" id="top1"><p class="fl"><a href="#" id="login">登录</a><a href="#" id="reg">注册</a>
  5.             </p>
  6.                 <form action="#" method="post" class="fl">
  7.                     <input type="text" placeholder="热门搜索：干花花瓶"/>
  8.                     <input type="button"/>
  9.                 </form>
  10.                 <div class="btn fl clearfix">
  11.                     <a href="#">
  12.                         <img src="img/grzx.png"/>
  13.                     </a>
  14.                     <a href="#" class="er1">
  15.                         <img src="img/ewm.png"/>
  16.                     </a>
  17.                     <a href="#">
  18.                         <img src="img/gwc.png"/>
  19.                     </a>
  20.                     <p>
  21.                         <a href="#">
  22.                             <img src="img/smewm.png"/>
  23.                         </a>
  24.                     </p>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         <ul class="clearfix" id="bott">
  29.             <li>
  30.                 <a href="index.html">首页</a>
  31.             </li>
  32.             <li>
  33.                 <a href="#">所有商品</a>
  34.                 <div class="sList">
  35.                     <div class="wrapper  clearfix">
  36.                         <a href="#">
  37.                             <dl>
  38.                                 <dt><img src="img/nav1.jpg"/></dt>
  39.                                 <dd>浓情欧式</dd>
  40.                             </dl>
  41.                         </a>
  42.                         <a href="#">
  43.                             <dl>
  44.                                 <dt><img src="img/nav2.jpg"/></dt>
  45.                                 <dd>浪漫美式</dd>
  46.                             </dl>
  47.                         </a>
  48.                         <a href="#">
  49.                             <dl>
  50.                                 <dt><img src="img/nav3.jpg"/></dt>
  51.                                 <dd>雅致中式</dd>
  52.                             </dl>
  53.                         </a>
  54.                         <a href="#">
  55.                             <dl>
  56.                                 <dt><img src="img/nav6.jpg"/></dt>
  57.                                 <dd>简约现代</dd>
  58.                             </dl>
  59.                         </a>
  60.                         <a href="#">
  61.                             <dl>
  62.                                 <dt><img src="img/nav7.jpg"/></dt>
  63.                                 <dd>创意装饰</dd>
  64.                             </dl>
  65.                         </a>
  66.                     </div>
  67.                 </div>
  68.             </li>
  69.             <li><a href="#">装饰摆件</a>
  70.                 <div class="sList2">
  71.                     <div class="clearfix"><a href="#">干花花艺</a><a href="#">花瓶花器</a></div>
  72.                 </div>
  73.             </li>
  74.             <li><a href="#">布艺软饰</a>
  75.                 <div class="sList2">
  76.                     <div class="clearfix"><a href="#">桌布罩件</a><a href="#">抱枕靠垫</a></div>
  77.                 </div>
  78.             </li>
  79.             <li><a href="#">墙式壁挂</a></li>
  80.             <li><a href="#">蜡艺香薰</a></li>
  81.             <li><a href="#">创意家居</a></li>
  82.         </ul>
  83.     </div>
  84. </div>
  85. <div class="block_home_slider">
  86.     <div id="home_slider" class="flexslider">
  87.         <ul class="slides">
  88.             <li>
  89.                 <div class="slide"><img src="img/banner2.jpg"/></div>
  90.             </li>
  91.             <li>
  92.                 <div class="slide"><img src="img/banner1.jpg"/></div>
  93.             </li>
  94.         </ul>
  95.     </div>
  96. </div>
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. /*将所有HTML元素的默认边距清0*/
  7. html, body {
  8.     font-size: 12px;
  9.     font-family: "微软雅黑", "arial";
  10.     color: #262626;
  11.     background: #FFF;
  12. }
  14. /*对HTML元素中的字体、颜色、背景色进行初始设置*/
  15. ul li, ol li {
  16.     list-style: none;
  17. }
  19. /*将列表标签的默认样式清除*/
  20. a {
  21.     text-decoration: none;
  22.     outline: none;
  23.     color: #262626;
  24.     blr: expression(this.onFocus=this.blur());
  25. }
  27. /*将超链接的下划线去掉以及在ie6中点击出现的虚线框去掉*/
  28. img {
  29.     border: none;
  30. }
  32. /*图片的默认边框去掉 */
  33. table {
  34.     border-collapse: collapse;
  35.     border-spacing: 0;
  36. }
  38. caption, th, td {
  39.     font-weight: normal;
  40.     text-align: left;
  41. }
  43. input, textarea, select, button {
  44.     font-size: 100%;
  45.     font-family: inherit;
  46.     margin: 0;
  47.     padding: 0;
  48.     border: none;
  49.     outline: none;
  50. }
  52. label, button {
  53.     cursor: pointer
  54. }
  56. textarea {
  57.     white-space: pre;
  58.     resize: none;
  59.     border: 1px solid #ececec;
  60. }
  62. article, aside, figcaption, figure, footer, header, hgroup, nav, section, summary {
  63.     display: block;
  64. }
  66. /*清楚浮动*/
  67. .clearfix:after {
  68.     content: "";
  69.     display: block;
  70.     clear: both;
  71.     height: 0;
  72.     line-height: 0;
  73.     visibility: hidden;
  74. }
  76. .clearfix {
  77.     zoom: 1;
  78. }
  80. /*解决ie6的兼容性问题*/
  81. .fl {
  82.     float: left;
  83. }
  85. .fr {
  86.     float: right;
  87. }
  89. .mt {
  90.     margin-top: 80px;
  91. }
  93. .wrapper {
  94.     width: 1160px;
  95.     margin: 0 auto;
  96. }
  98. /*********************head********************/
  99. .head {
  100.     margin-top: 30px;
  101.     min-width: 1160px;
  102.     position: relative;
  103.     border-bottom: 1px solid #e0e0e0;
  104. }
  106. .head h1 img {
  107.     width: 80%;
  108.     display: block;
  109. }
  111. .head div p {
  112.     margin-top: 20px;
  113. }
  115. .head div p a {
  116.     color: #262626;
  117.     padding: 0 10px;
  118.     font-size: 14px;
  119. }
  121. .head div p a:nth-child(1) {
  122.     border-right: 1px solid #dbdbdb;
  123. }
  125. .head div form {
  126.     width: 160px;
  127.     height: 30px;
  128.     line-height: 30px;
  129.     margin: 0 10px;
  130.     margin-top: 13px;
  131.     border-bottom: 1px solid #262626;
  132. }
  134. .head div form input:nth-child(1) {
  135.     background: none;
  136.     text-indent: 8px;
  137. }
  139. .head div form input:nth-child(2) {
  140.     float: right;
  141.     width: 13%;
  142.     padding-bottom: 10px;
  143.     background: url("../img/ss.png") no-repeat right 5px;
  144.     cursor: pointer;
  145. }
  147. .head div.btn {
  148.     margin-top: 20px;
  149.     position: relative;
  150. }
  152. .head div.btn a {
  153.     float: left;
  154.     margin: 0 10px;
  155. }
  157. .head ul {
  158.     float: left;
  159.     margin-left: 18%;
  160.     line-height: 50px;
  161. }
  163. .head ul li {
  164.     float: left;
  165.     padding: 0 20px;
  166. }
  168. .head ul li > a {
  169.     color: #262626;
  170.     font-size: 14px;
  171.     display: inline-block;
  172.     position: relative;
  173. }
  175. .head ul li a:before {
  176.     content: "";
  177.     background: #A10000;
  178.     position: absolute;
  179.     bottom: -3px;
  180.     z-index: -1;
  181.     transform: scaleX(0);
  182.     transition: all .5s ease;
  183.     -webkit-transition: all .5s ease;
  184. }
  186. .head ul li:nth-child(1) a:before {
  187.     left: -12px;
  188. }
  190. .head ul li > a:hover {
  191.     color: #A10000;
  192. }
  194. .head ul li > a:hover:before {
  195.     width: 56px;
  196.     height: 2px;
  197.     transform: scaleX(1);
  198.     transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  199.     -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);;
  200.     z-index: 9999;
  201. }
  203. .head div.sList {
  204.     position: absolute;
  205.     top: 113px;
  206.     left: 0;
  207.     z-index: 3;
  208.     background: #fff;
  209.     width: 100%;
  210.     display: none;
  211. }
  213. .head div.sList div {
  214.     text-align: center;
  215.     padding: 20px 0;
  216.     display: flex;
  217. }
  219. .head div.sList div a {
  220.     flex: 1 1 20%;
  221.     border-right: 1px solid #dbdbdb;
  222. }
  224. .head div.sList div a:last-child {
  225.     border-right: none;
  226. }
  228. .head div.sList div dl dt img {
  229.     width: 70%;
  230. }
  232. .head div.sList div dl dd {
  233.     font-size: 14px;
  234. }
  236. .head div.sList2 {
  237.     display: none;
  238.     position: absolute;
  239.     top: 113px;
  240.     left: 0;
  241.     z-index: 3;
  242.     background: #fff;
  243.     opacity: 0.5;
  244.     width: 100%;
  245. }
  247. .head div.sList2 div {
  248.     width: 46%;
  249.     margin: 0 auto;
  250. }
  252. .head div.sList2 a {
  253.     float: left;
  254.     margin-right: 40px;
  255. }
  1. $(function () {
  2.     $(".head ul>li").hover(function () {
  3.         var a = $(this).children().length;
  4.         if (a != 1) {
  5.             $(this).children("div").stop().slideToggle(200).end().siblings().children("div").hide()
  6.         } else {
  7.             $(this).child```javascript
  8. $(function () {
  9.             $('#home_slider').flexslider({
  10.                 animation: 'slide',
  11.                 controlNav: true,
  12.                 directionNav: true,
  13.                 animationLoop: true,
  14.                 slideshow: true,
  15.                 slideshowSpeed: 2000,
  16.                 useCSS: false
  17.             });
  18.         });
  19. ```ren("div").hide()
  20.         }
  21.     });
  22. });

![](https://img.php.cn/upload/image/236/232/224/1652150831692241.png)

上一条：网页生成水印下一条：0509作业——制作太极图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议