devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

8.8 Web前端-小米商城项目实战_写一个做小米商城的文本思路

作者：Gausst松鼠会 | 2024-04-02 19:38:44

赞

踩

写一个做小米商城的文本思路

hello大家好，人总是会在写项目的时候发现自己的许多不足之处，然后加以改进，并且记住这些东西，所以今天我给大家带来的是我的第二个项目，小米商城首页的书写。我觉得这个项目相比于我第一个淘宝的项目的难度更大一点，当然，完成之后带给我的经验也比之前多很多，而且许多细节也比之前好很多，那么话不多说就让我来给大家讲解一下我的编写过程吧，首先给大家看一下完成的效果图：

 

 然后接下来给大家详细说明一下我的编写过程：

1.结构划分：

无论是做哪个项目，首先对于大体的结构要有明确的划分，这样在后续的内容编写的时候，才可以得心应手，一般做网页中，我们都会吧页面分为头部，主体和尾部三大部分，也可以在此三个基础上扩展，编写搜索栏或者侧边栏的部分，显然小米商城的界面划分还是比较容易的，很清楚的就可以分为三个板块，但是该页面中充斥着大量的下拉栏和侧拉栏，类似下图一样：

 

 那么我们先从头部开始，慢慢向下书写整个页面。

2.头部：

对于头部的划分，我包了整个上部分内容做为一个盒子，然后在内部分为上头部和下头部两部分做两个盒子， 然后再对其中的内容进行填充：

在头部代码书写的部分我是这样编写的：

  1. <!--头部-->
  2.     <header>
  3.       <div class="t-header">
  4.         <div class="htbbox">
  5.           <ul
  6.             style="width: 795px; height: 40px; float: left; position: relative"
  7.           >
  8.             <li><a href="#">小米官网</a><span>|</span></li>
  9.             <li><a href="#">小米商城</a><span>|</span></li>
  10.             <li><a href="#">MIUI</a><span>|</span></li>
  11.             <li><a href="#">IoT</a><span>|</span></li>
  12.             <li><a href="#">云服务</a><span>|</span></li>
  13.             <li><a href="#">天星数科</a><span>|</span></li>
  14.             <li><a href="#">有品</a><span>|</span></li>
  15.             <li><a href="#">小爱开放平台</a><span>|</span></li>
  16.             <li><a href="#">企业团购</a><span>|</span></li>
  17.             <li><a href="#">资质证照</a><span>|</span></li>
  18.             <li><a href="#">协议规则</a><span>|</span></li>
  19.             <li id="xiazaiapp"><a href="#">下载App</a><span>|</span></li>
  20.             <div class="erweima">
  21.               <a href="#"
  22.                 ><img
  23.                   src="./图片素材/商城二维码.png"
  24.                   alt="1"
  25.                   style="margin-left: 3px"
  26.               /></a>
  27.             </div>
  28.             <li><a href="#">Select Location</a><span>|</span></li>
  29.           </ul>
  30.           <ul
  31.             style="width: 263px; height: 40px; float: right; position: relative"
  32.           >
  33.             <li><a href="#">登录</a><span>|</span></li>
  34.             <li><a href="#">注册</a><span>|</span></li>
  35.             <li><a href="#">消息通知</a></li>
  36.             <li id="gouwuche">
  37.               <a href="#" id="spe-a"
  38.                 ><i class="iconfont">&#xf0179;</i> 购物车（0）</a
  39.               >
  40.             </li>
  41.             <div class="gouwuche">
  42.               <p>购物车中还没有商品，赶紧选购吧！</p>
  43.             </div>
  44.           </ul>
  45.         </div>
  46.       </div>
  47.       <div class="b-header" style="position: relative">
  48.         <div class="bhbbox">
  49.           <div class="bhmbox1">
  50.             <a href="https://www.mi.com/"
  51.               ><img src="./图片素材/logo-mi2.png" alt="1" height="56px"
  52.             /></a>
  53.           </div>
  54.           <div class="bhmbox2">
  55.             <ul>
  56.               <li
  57.                 style="
  58.                   position: relative;
  59.                   float: left;
  60.                   width: 127px;
  61.                   height: 88px;
  62.                   padding: 0 15px 0 0;
  63.                 "
  64.               ></li>
  65.               <li><a href="#">xiaomi手机</a></li>
  66.               <div class="bhsbox1">
  67.                 <div class="auto">
  68.                   <ul>
  69.                     <li>
  70.                       <a href="#"
  71.                         ><img src="./图片素材/头部商品1.webp" alt="1" />
  72.                         <div class="titie123">Xiaomi 12S Ultra</div>
  73.                         <p class="jiage123">5999元起</p>
  74.                       </a>
  75.                     </li>
  76.                     <li>
  77.                       <a href="#"
  78.                         ><img src="./图片素材/头部商品2.webp" alt="1" />
  79.                         <div class="titie123">Xiaomi 12S Pro</div>
  80.                         <p class="jiage123">5999元起</p></a
  81.                       >
  82.                     </li>
  83.                     <li>
  84.                       <a href="#"
  85.                         ><img src="./图片素材/头部商品3.webp" alt="1" />
  86.                         <div class="titie123">Xiaomi 12S</div>
  87.                         <p class="jiage123">5999元起</p></a
  88.                       >
  89.                     </li>
  90.                     <li>
  91.                       <a href="#"
  92.                         ><img src="./图片素材/头部商品4.webp" alt="1" />
  93.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  94.                         <p class="jiage123">5999元起</p></a
  95.                       >
  96.                     </li>
  97.                     <li>
  98.                       <a href="#"
  99.                         ><img src="./图片素材/头部商品5.webp" alt="1" />
  100.                         <div class="titie123">Xiaomi Civi 1S</div>
  101.                         <p class="jiage123">5999元起</p></a
  102.                       >
  103.                     </li>
  104.                     <li>
  105.                       <a href="#"
  106.                         ><img src="./图片素材/头部商品6.webp" alt="1" />
  107.                         <div class="titie123">Xiaomi 12 Pro</div>
  108.                         <p class="jiage123">5999元起</p></a
  109.                       >
  110.                     </li>
  111.                   </ul>
  112.                 </div>
  113.               </div>
  114.               <li><a href="#">Redmi手机</a></li>
  115.               <div class="bhsbox1">
  116.                 <div class="auto">
  117.                   <ul>
  118.                     <li>
  119.                       <a href="#"
  120.                         ><img src="./图片素材/Redmi手机.webp" alt="1" />
  121.                         <div class="titie123">Xiaomi 12S Ultra</div>
  122.                         <p class="jiage123">5999元起</p>
  123.                       </a>
  124.                     </li>
  125.                     <li>
  126.                       <a href="#"
  127.                         ><img src="./图片素材/Redmi手机.webp" alt="1" />
  128.                         <div class="titie123">Xiaomi 12S Pro</div>
  129.                         <p class="jiage123">5999元起</p></a
  130.                       >
  131.                     </li>
  132.                     <li>
  133.                       <a href="#"
  134.                         ><img src="./图片素材/Redmi手机.webp" alt="1" />
  135.                         <div class="titie123">Xiaomi 12S</div>
  136.                         <p class="jiage123">5999元起</p></a
  137.                       >
  138.                     </li>
  139.                     <li>
  140.                       <a href="#"
  141.                         ><img src="./图片素材/Redmi手机.webp" alt="1" />
  142.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  143.                         <p class="jiage123">5999元起</p></a
  144.                       >
  145.                     </li>
  146.                     <li>
  147.                       <a href="#"
  148.                         ><img src="./图片素材/Redmi手机.webp" alt="1" />
  149.                         <div class="titie123">Xiaomi Civi 1S</div>
  150.                         <p class="jiage123">5999元起</p></a
  151.                       >
  152.                     </li>
  153.                     <li>
  154.                       <a href="#"
  155.                         ><img src="./图片素材/Redmi手机.webp" alt="1" />
  156.                         <div class="titie123">Xiaomi 12 Pro</div>
  157.                         <p class="jiage123">5999元起</p></a
  158.                       >
  159.                     </li>
  160.                   </ul>
  161.                 </div>
  162.               </div>
  163.               <li><a href="#">电视</a></li>
  164.               <div class="bhsbox1">
  165.                 <div class="auto">
  166.                   <ul>
  167.                     <li>
  168.                       <a href="#"
  169.                         ><img src="./图片素材/电视.webp" alt="1" />
  170.                         <div class="titie123">Xiaomi 12S Ultra</div>
  171.                         <p class="jiage123">5999元起</p>
  172.                       </a>
  173.                     </li>
  174.                     <li>
  175.                       <a href="#"
  176.                         ><img src="./图片素材/电视.webp" alt="1" />
  177.                         <div class="titie123">Xiaomi 12S Pro</div>
  178.                         <p class="jiage123">5999元起</p></a
  179.                       >
  180.                     </li>
  181.                     <li>
  182.                       <a href="#"
  183.                         ><img src="./图片素材/电视.webp" alt="1" />
  184.                         <div class="titie123">Xiaomi 12S</div>
  185.                         <p class="jiage123">5999元起</p></a
  186.                       >
  187.                     </li>
  188.                     <li>
  189.                       <a href="#"
  190.                         ><img src="./图片素材/电视.webp" alt="1" />
  191.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  192.                         <p class="jiage123">5999元起</p></a
  193.                       >
  194.                     </li>
  195.                     <li>
  196.                       <a href="#"
  197.                         ><img src="./图片素材/电视.webp" alt="1" />
  198.                         <div class="titie123">Xiaomi Civi 1S</div>
  199.                         <p class="jiage123">5999元起</p></a
  200.                       >
  201.                     </li>
  202.                     <li>
  203.                       <a href="#"
  204.                         ><img src="./图片素材/电视.webp" alt="1" />
  205.                         <div class="titie123">Xiaomi 12 Pro</div>
  206.                         <p class="jiage123">5999元起</p></a
  207.                       >
  208.                     </li>
  209.                   </ul>
  210.                 </div>
  211.               </div>
  212.               <li><a href="#">笔记本</a></li>
  213.               <div class="bhsbox1">
  214.                 <div class="auto">
  215.                   <ul>
  216.                     <li>
  217.                       <a href="#"
  218.                         ><img src="./图片素材/笔记本.webp" alt="1" />
  219.                         <div class="titie123">Xiaomi 12S Ultra</div>
  220.                         <p class="jiage123">5999元起</p>
  221.                       </a>
  222.                     </li>
  223.                     <li>
  224.                       <a href="#"
  225.                         ><img src="./图片素材/笔记本.webp" alt="1" />
  226.                         <div class="titie123">Xiaomi 12S Pro</div>
  227.                         <p class="jiage123">5999元起</p></a
  228.                       >
  229.                     </li>
  230.                     <li>
  231.                       <a href="#"
  232.                         ><img src="./图片素材/笔记本.webp" alt="1" />
  233.                         <div class="titie123">Xiaomi 12S</div>
  234.                         <p class="jiage123">5999元起</p></a
  235.                       >
  236.                     </li>
  237.                     <li>
  238.                       <a href="#"
  239.                         ><img src="./图片素材/笔记本.webp" alt="1" />
  240.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  241.                         <p class="jiage123">5999元起</p></a
  242.                       >
  243.                     </li>
  244.                     <li>
  245.                       <a href="#"
  246.                         ><img src="./图片素材/笔记本.webp" alt="1" />
  247.                         <div class="titie123">Xiaomi Civi 1S</div>
  248.                         <p class="jiage123">5999元起</p></a
  249.                       >
  250.                     </li>
  251.                     <li>
  252.                       <a href="#"
  253.                         ><img src="./图片素材/笔记本.webp" alt="1" />
  254.                         <div class="titie123">Xiaomi 12 Pro</div>
  255.                         <p class="jiage123">5999元起</p></a
  256.                       >
  257.                     </li>
  258.                   </ul>
  259.                 </div>
  260.               </div>
  261.               <li><a href="#">平板</a></li>
  262.               <div class="bhsbox1">
  263.                 <div class="auto">
  264.                   <ul>
  265.                     <li>
  266.                       <a href="#"
  267.                         ><img src="./图片素材/平板.webp" alt="1" />
  268.                         <div class="titie123">Xiaomi 12S Ultra</div>
  269.                         <p class="jiage123">5999元起</p>
  270.                       </a>
  271.                     </li>
  272.                     <li>
  273.                       <a href="#"
  274.                         ><img src="./图片素材/平板.webp" alt="1" />
  275.                         <div class="titie123">Xiaomi 12S Pro</div>
  276.                         <p class="jiage123">5999元起</p></a
  277.                       >
  278.                     </li>
  279.                     <li>
  280.                       <a href="#"
  281.                         ><img src="./图片素材/平板.webp" alt="1" />
  282.                         <div class="titie123">Xiaomi 12S</div>
  283.                         <p class="jiage123">5999元起</p></a
  284.                       >
  285.                     </li>
  286.                     <li>
  287.                       <a href="#"
  288.                         ><img src="./图片素材/平板.webp" alt="1" />
  289.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  290.                         <p class="jiage123">5999元起</p></a
  291.                       >
  292.                     </li>
  293.                     <li>
  294.                       <a href="#"
  295.                         ><img src="./图片素材/平板.webp" alt="1" />
  296.                         <div class="titie123">Xiaomi Civi 1S</div>
  297.                         <p class="jiage123">5999元起</p></a
  298.                       >
  299.                     </li>
  300.                     <li>
  301.                       <a href="#"
  302.                         ><img src="./图片素材/平板.webp" alt="1" />
  303.                         <div class="titie123">Xiaomi 12 Pro</div>
  304.                         <p class="jiage123">5999元起</p></a
  305.                       >
  306.                     </li>
  307.                   </ul>
  308.                 </div>
  309.               </div>
  310.               <li><a href="#">家电</a></li>
  311.               <div class="bhsbox1">
  312.                 <div class="auto">
  313.                   <ul>
  314.                     <li>
  315.                       <a href="#"
  316.                         ><img src="./图片素材/家电.webp" alt="1" />
  317.                         <div class="titie123">Xiaomi 12S Ultra</div>
  318.                         <p class="jiage123">5999元起</p>
  319.                       </a>
  320.                     </li>
  321.                     <li>
  322.                       <a href="#"
  323.                         ><img src="./图片素材/家电.webp" alt="1" />
  324.                         <div class="titie123">Xiaomi 12S Pro</div>
  325.                         <p class="jiage123">5999元起</p></a
  326.                       >
  327.                     </li>
  328.                     <li>
  329.                       <a href="#"
  330.                         ><img src="./图片素材/家电.webp" alt="1" />
  331.                         <div class="titie123">Xiaomi 12S</div>
  332.                         <p class="jiage123">5999元起</p></a
  333.                       >
  334.                     </li>
  335.                     <li>
  336.                       <a href="#"
  337.                         ><img src="./图片素材/家电.webp" alt="1" />
  338.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  339.                         <p class="jiage123">5999元起</p></a
  340.                       >
  341.                     </li>
  342.                     <li>
  343.                       <a href="#"
  344.                         ><img src="./图片素材/家电.webp" alt="1" />
  345.                         <div class="titie123">Xiaomi Civi 1S</div>
  346.                         <p class="jiage123">5999元起</p></a
  347.                       >
  348.                     </li>
  349.                     <li>
  350.                       <a href="#"
  351.                         ><img src="./图片素材/家电.webp" alt="1" />
  352.                         <div class="titie123">Xiaomi 12 Pro</div>
  353.                         <p class="jiage123">5999元起</p></a
  354.                       >
  355.                     </li>
  356.                   </ul>
  357.                 </div>
  358.               </div>
  359.               <li><a href="#">路由器</a></li>
  360.               <div class="bhsbox1">
  361.                 <div class="auto">
  362.                   <ul>
  363.                     <li>
  364.                       <a href="#"
  365.                         ><img src="./图片素材/路由器.webp" alt="1" />
  366.                         <div class="titie123">Xiaomi 12S Ultra</div>
  367.                         <p class="jiage123">5999元起</p>
  368.                       </a>
  369.                     </li>
  370.                     <li>
  371.                       <a href="#"
  372.                         ><img src="./图片素材/路由器.webp" alt="1" />
  373.                         <div class="titie123">Xiaomi 12S Pro</div>
  374.                         <p class="jiage123">5999元起</p></a
  375.                       >
  376.                     </li>
  377.                     <li>
  378.                       <a href="#"
  379.                         ><img src="./图片素材/路由器.webp" alt="1" />
  380.                         <div class="titie123">Xiaomi 12S</div>
  381.                         <p class="jiage123">5999元起</p></a
  382.                       >
  383.                     </li>
  384.                     <li>
  385.                       <a href="#"
  386.                         ><img src="./图片素材/路由器.webp" alt="1" />
  387.                         <div class="titie123">Xiaomi 12S Pro 天玑版</div>
  388.                         <p class="jiage123">5999元起</p></a
  389.                       >
  390.                     </li>
  391.                     <li>
  392.                       <a href="#"
  393.                         ><img src="./图片素材/路由器.webp" alt="1" />
  394.                         <div class="titie123">Xiaomi Civi 1S</div>
  395.                         <p class="jiage123">5999元起</p></a
  396.                       >
  397.                     </li>
  398.                     <li>
  399.                       <a href="#"
  400.                         ><img src="./图片素材/路由器.webp" alt="1" />
  401.                         <div class="titie123">Xiaomi 12 Pro</div>
  402.                         <p class="jiage123">5999元起</p></a
  403.                       >
  404.                     </li>
  405.                   </ul>
  406.                 </div>
  407.               </div>
  408.               <li><a href="#">服务中心</a></li>
  409.               <li><a href="#">社区</a></li>
  410.             </ul>
  411.           </div>
  412.           <div class="bhmbox3">
  413.             <input
  414.               type="text"
  415.               placeholder="手机"
  416.               style="
  417.                 width: 210px;
  418.                 height: 48px;
  419.                 border: 0;
  420.                 border-right: 1px solid rgb(224, 224, 224);
  421.                 padding: 0 10px 0 10px;
  422.                 outline: none;
  423.               "
  424.             />
  425.             <div class="sssp">
  426.               <p><a href="#">全部商品</a></p>
  427.               <p><a href="#">红米</a></p>
  428.               <p><a href="#">手机</a></p>
  429.               <p><a href="#">黑鲨5</a></p>
  430.               <p><a href="#">冰箱</a></p>
  431.               <p><a href="#">电视</a></p>
  432.               <p><a href="#">洗衣机</a></p>
  433.               <p><a href="#">Redmi G 2021</a></p>
  434.             </div>
  435.             <a href="#"
  436.               ><i
  437.                 class="iconfont"
  438.                 style="font-size: 26px; margin-left: 11px; line-height: 48px; color: rgb(97,97,97);"
  439.                 >&#xeafe;</i
  440.               ></a
  441.             >
  442.           </div>
  443.         </div>
  444.       </div>
  445.     </header>

头部部分分为上下两部分，上部分的黑色部分用 | 符号隔开就行，然后利用浮动将元素横向排列，在下载App和购物车两个盒子下面分别再使用定位做一个盒子，填充进官网的内容，将其高度和边框设置为无，然后在css中使用hover效果给其一个高度和边框线，最终可完成效果。

下部分是分为三个中盒子，第一个放小米的logo图片，第二个同ul放入文字内容，第三个放搜索框，将中盒子左浮动，调整间距，然后中间的盒子内部左浮动，完成表面效果图。

但是还有下拉框，在中盒子中每个小方块下面再定位一个横向盒子，里面填充内容，分隔线用伪类去做，具体做法可以参考我之前的文章，如何用伪类书写分隔线，然后给每一个小方块下方都加上这个，然后给一个移入hover效果，当鼠标移入时，给下面的盒子一个高度就可以了。

具体头部的css样式书写部分代码如下：

  1. body {
  2.   margin: 0;
  3. }
  4. a {
  5.   text-decoration: none;
  6. }
  7. li {
  8.   list-style: none;
  9. }
  10. ul {
  11.   padding-left: 0;
  12.   margin: 0;
  13. }
  14. .t-header {
  15.   width: 100%;
  16.   height: 40px;
  17.   background-color: rgb(51, 51, 51);
  18. }
  19. .htbbox {
  20.   width: 1226px;
  21.   height: 40px;
  22.   margin: 0 auto;
  23. }
  24. .htbbox a {
  25.   color: rgb(176, 176, 176);
  26.   font-size: 12px;
  27. }
  28. .htbbox span {
  29.   color: rgb(57, 63, 63);
  30.   font-size: 12px;
  31.   display: inline-block;
  32.   margin: 0 5px;
  33. }
  34. .htbbox li {
  35.   float: left;
  36.   height: 40px;
  37.   line-height: 39px;
  38. }
  39. #spe-a {
  40.   display: block;
  41.   width: 120px;
  42.   height: 40px;
  43.   font-size: 12px;
  44.   color: rgb(176, 176, 176);
  45.   text-align: center;
  46.   background-color: rgb(66, 66, 66);
  47.   margin-left: 20px;
  48. }
  49. .htbbox li:hover a {
  50.   color: rgb(255, 255, 255);
  51. }
  52. .erweima {
  53.   z-index: 100;
  54.   position: absolute;
  55.   background-color: white;
  56.   width: 125px;
  57.   height: 0px;
  58.   top: 40px;
  59.   left: 569px;
  60.   overflow: hidden;
  61. }
  62. #xiazaiapp:hover + .erweima {
  63.   height: 150px;
  64.   border: 1px solid rgb(219, 219, 219);
  65.   border-top: none;
  66. }
  67. #xiazaiapp:hover::before {
  68.   display: block;
  69. }
  70. .erweima:hover {
  71.   height: 150px;
  72.   border: 1px solid rgb(219, 219, 219);
  73.   border-top: none;
  74. }
  75. .gouwuche > p {
  76.   margin: 0;
  77.   font-size: 12px;
  78.   color: rgb(66, 66, 66);
  79.   line-height: 100px;
  80.   text-align: center;
  81. }
  82. .gouwuche {
  83.   z-index: 100;
  84.   background-color: white;
  85.   position: absolute;
  86.   width: 316px;
  87.   height: 0px;
  88.   top: 40px;
  89.   left: -56px;
  90.   overflow: hidden;
  91. }
  92. #spe-a:hover {
  93.   color: rgb(255, 103, 0);
  94.   background-color: white;
  95.   border-bottom: none;
  96. }
  97. #gouwuche:hover + .gouwuche {
  98.   height: 100px;
  99.   border: 1px solid rgb(219, 219, 219);
  100.   border-top: none;
  101. }
  102. .gouwuche:hover {
  103.   height: 100px;
  104.   border: 1px solid rgb(219, 219, 219);
  105.   border-top: none;
  106. }
  107. .gouwuche:hover + #gouwuche {
  108.   color: rgb(255, 103, 0);
  109.   background-color: white;
  110.   border-bottom: none;
  111. }
  112. #xiazaiapp {
  113.   position: relative;
  114. }
  115. #xiazaiapp::before {
  116.   display: none;
  117.   content: "";
  118.   width: 0;
  119.   height: 0;
  120.   bottom: 0;
  121.   left: 16px;
  122.   position: absolute;
  123.   border: 8px solid transparent;
  124.   border-bottom: 8px solid white;
  125. }
  126. .b-header {
  127.   width: 100%;
  128.   height: 100px;
  129. }
  130. .bhbbox {
  131.   width: 1226px;
  132.   height: 100px;
  133.   margin: 0 auto;
  134. }
  135. .bhmbox1 {
  136.   float: left;
  137.   width: 62px;
  138.   margin-top: 22px;
  139. }
  140. .bhmbox2 {
  141.   float: left;
  142.   width: 850px;
  143.   height: 88px;
  144.   margin: 0;
  145.   padding: 12px 0 0 30px;
  146.   list-style-type: none;
  147.   font-size: 16px;
  148. }
  149. .bhmbox2 > ul > li {
  150.   float: left;
  151.   display: block;
  152.   padding: 26px 10px 38px;
  153. }
  154. .bhmbox2 a {
  155.   color: black;
  156. }
  157. .bhmbox2 li:hover a {
  158.   color: rgb(255, 103, 0);
  159. }
  160. .bhsbox1 {
  161.   z-index: 100;
  162.   background-color: white;
  163.   position: absolute;
  164.   width: 100%;
  165.   height: 0px;
  166.   top: 100px;
  167.   left: 0px;
  168.   overflow: hidden;
  169. }
  170. .auto {
  171.   width: 1224px;
  172.   height: 232px;
  173.   margin: 0 auto;
  174. }
  175. .auto > ul > li {
  176.   position: relative;
  177.   float: left;
  178. }
  179. .auto > ul > li {
  180.   width: 180px;
  181.   height: auto;
  182.   padding: 35px 12px 0 12px;
  183. }
  184. .auto img {
  185.   margin-left: 10px;
  186. }
  187. .titie123 {
  188.   font-size: 10px;
  189.   color: rgb(94, 94, 94);
  190.   width: 180px;
  191.   text-align: center;
  192. }
  193. .jiage123 {
  194.   font-size: 10px;
  195.   color: rgb(255, 103, 0);
  196.   width: 180px;
  197.   text-align: center;
  198. }
  199. .auto > ul > li + li::after {
  200.   content: "";
  201.   width: 1px;
  202.   height: 100px;
  203.   position: absolute;
  204.   top: 40px;
  205.   left: 0;
  206.   background-color: rgb(224, 224, 224);
  207. }
  208. .bhmbox2 li:hover + .bhsbox1 {
  209.   border: 1px solid rgb(224, 224, 224);
  210.   height: 230px;
  211. }
  212. .bhsbox1:hover {
  213.   border: 1px solid rgb(224, 224, 224);
  214.   height: 230px;
  215. }
  216. .bhmbox3 {
  217.   position: relative;
  218.   float: left;
  219.   width: 276px;
  220.   height: 48px;
  221.   margin-top: 25px;
  222.   border: 1px solid rgb(224, 224, 224);
  223. }
  224. .bhmbox3 > a {
  225.   position: absolute;
  226.   display: block;
  227.   width: 45px;
  228.   height: 48px;
  229.   top: 0px;
  230.   left: 231px;
  231. }
  232. .bhmbox3 > a:hover {
  233.   background-color: rgb(255, 103, 0);
  234. }
  235. .sssp {
  236.   z-index: 100;
  237.   position: absolute;
  238.   width: 245px;
  239.   height: 0px;
  240.   background-color: white;
  241.   margin-left: -1px;
  242.   overflow: hidden;
  243. }
  244. .sssp > p {
  245.   margin: 0;
  246.   padding-left: 15px;
  247.   height: 12.5%;
  248.   line-height: 28px;
  249. }
  250. .sssp a {
  251.   font-size: 12px;
  252.   color: black;
  253. }
  254. .sssp p:hover {
  255.   background-color: rgb(250, 250, 250);
  256. }
  257. input:focus + .sssp {
  258.   height: 242px;
  259.   border: 1px solid rgb(255, 103, 0);
  260. }
  261. input:focus {
  262.   border-color: rgb(255, 103, 0);
  263. }

 那么头部的部分今天就先介绍到这里，后续我会把这个项目完整的说完，感谢大家的观看，如果想要源码点个关注私聊我哦。

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/353498
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号