Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex弹性盒子学习三：仿站实战
Blogger Information
Blog 13
fans 0
comment 0
visits 13150
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex弹性盒子学习三：仿站实战
小追
Original
849 people have browsed it

仿站实战，随意仿一个网站

html代码：

  1.                <!DOCTYPE html>
  2.         <html lang="en">
  3.         <head>
  4.             <meta charset="UTF-8">
  5.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.             <link href="font-icon.css" rel="stylesheet" />
  7.             <link href="index.css" rel="stylesheet" />
  8.             <title>仿站：每一件小事都值得庆祝！！！</title>
  9.         </head>
  10.         <body>
  11.             <header>
  12.                     <!-- logo -->
  13.                     <div><img src="images/logo.png" alt="" /></div>
  14.                     <!-- 导航 -->
  15.                     <div>
  16.                         <a href=""><span class="iconfont"></span></a>
  17.                         <a href="">上海市</a>
  18.                     </div>
  19.                     <div>
  20.                         <a href=""><span class="iconfont"></span></a>
  21.                         <a href="">所有产品</a>
  22.                     </div>
  23.                     <div>
  24.                         <a href=""><span class="iconfont"></span></a>
  25.                         <a href="">首页</a>
  26.                     </div>
  27.                     <div>
  28.                         <a href=""><span class="iconfont"></span></a>
  29.                         <a href="">蛋糕</a>
  30.                     </div>
  31.                     <div>
  32.                         <a href=""><span class="iconfont"></span></a>
  33.                         <a href="">小食</a>
  34.                     </div>
  35.                     <div>
  36.                         <a href=""><span class="iconfont"></span></a>
  37.                         <a href="">最新活动</a>
  38.                     </div>
  39.                     <div>
  40.                         <a href=""><span class="iconfont"></span></a>
  41.                         <a href="">银行活动</a>
  42.                     </div>
  43.                     <div>
  44.                         <a href=""><span class="iconfont"></span></a>
  45.                         <a href="">会员中心</a>
  46.                     </div>
  47.                     <div>
  48.                         <a href=""><span class="iconfont"></span></a>
  49.                         <a href="">注册|登录</a>
  50.                     </div>
  51.                     <div>
  52.                         <a href=""><span class="iconfont"></span></a>
  53.                         <a href="">购物车</a>
  54.                     </div>
  55.                     <div>
  56.                         <a href=""><span class="iconfont"></span></a>
  57.                         <a href="">更多</a>
  58.                     </div>
  59.             </header>
  61.               <!--主内容1  轮播图 -->
  62.               <div class="slider"><a href=""><img src="images/slider.png" alt="" /></a></div>
  64.         <div class="container">
  66.             <!-- 主内容2 标题 -->
  67.             <div class="title">
  68.                 <img src="images/knifeFork.png" />
  69.                 <h3>新品推荐</h3>
  70.                 <p>New Recommend</p>
  71.                 <h4>New</h4>
  72.             </div>
  73.             <!-- 主内容3 广告商品组合 -->
  74.             <div class="goods-hot">
  75.                 <a href=""><img src="images/1.jpg" alt="" /></a>
  76.                 <a href=""><img src="images/2.jpg" alt="" /></a>
  77.                 <a href=""><img src="images/3.jpg" alt="" /></a>
  78.             </div>
  79.             <!-- 主内容4  标题 -->
  80.             <div class="title">
  81.                 <img src="images/knifeFork.png" alt="">
  82.                 <h3>本季推荐</h3>
  83.                 <p>Seasonal Recommend</p>
  84.                 <h4>Seasonal</h4>
  85.             </div>
  86.             <!--主内容5  广告商品大图 -->
  87.             <div class="goods-hot"><img src="images/shangpin1.jpg" alt="" /></div>
  88.             <!--主内容6 商品大区1 -->
  89.             <!-- 商品区1 -->
  90.             <div class="goods">
  91.             <div class="goods-1">
  92.                 <div class="goods-title">
  93.                     <div class="goods-name">
  94.                         <p>海岸蓝调</p>
  95.                         <p>Côte d'Azur</p>
  96.                     </div>
  97.                     <div class="goods-go">
  98.                         <p>￥198</p>
  99.                         <span class="iconfont"></span>
  100.                     </div>
  101.                 </div>    
  102.             </div>
  103.             <div class="goods-2">
  104.                 <div class="goods-title">
  105.                     <div class="goods-name">
  106.                         <p>海岸蓝调</p>
  107.                         <p>Côte d'Azur</p>
  108.                     </div>
  109.                     <div class="goods-go">
  110.                         <p>￥198</p>
  111.                         <span class="iconfont"></span>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.             <div class="goods-3">
  116.                 <div class="goods-title">
  117.                     <div class="goods-name">
  118.                         <p>海岸蓝调</p>
  119.                         <p>Côte d'Azur</p>
  120.                     </div>
  121.                     <div class="goods-go">
  122.                         <p>￥198</p>
  123.                         <span class="iconfont"></span>
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.             </div>
  128.             <!-- 商品区2 -->
  129.             <div class="goods">
  130.                 <div class="goods-4">
  131.                     <div class="goods-title">
  132.                         <div class="goods-name">
  133.                             <p>海岸蓝调</p>
  134.                             <p>Côte d'Azur</p>
  135.                         </div>
  136.                         <div class="goods-go">
  137.                             <p>￥198</p>
  138.                             <span class="iconfont"></span>
  139.                         </div>
  140.                     </div>
  141.                 </div>
  142.                 <div class="goods-5">
  143.                     <div class="goods-title">
  144.                         <div class="goods-name">
  145.                             <p>海岸蓝调</p>
  146.                             <p>Côte d'Azur</p>
  147.                         </div>
  148.                         <div class="goods-go">
  149.                             <p>￥198</p>
  150.                             <span class="iconfont"></span>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.                 <div class="goods-6">
  155.                     <div class="goods-title">
  156.                         <div class="goods-name">
  157.                             <p>海岸蓝调</p>
  158.                             <p>Côte d'Azur</p>
  159.                         </div>
  160.                         <div class="goods-go">
  161.                             <p>￥198</p>
  162.                             <span class="iconfont"></span>
  163.                         </div>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.                 <!--主内容7 标题 -->
  168.                 <div class="title">
  169.                 <img src="images/knifeFork.png" alt="">
  170.                 <h3>萌系推荐</h3>
  171.                 <p>Seasonal Recommend</p>
  172.                 <h4>Seasonal</h4>
  173.             </div>
  174.             <!--主内容8 广告商品大图 -->
  175.             <div class="goods-hot"><img src="images/shangpin2.jpg" alt="" /></div>
  176.             <!--主内容9 商品大区2 -->
  177.             <!-- 商品区3 -->
  178.             <div class="goods">
  179.                 <div class="goods-7">
  180.                     <div class="goods-title">
  181.                         <div class="goods-name">
  182.                             <p>海岸蓝调</p>
  183.                             <p>Côte d'Azur</p>
  184.                         </div>
  185.                         <div class="goods-go">
  186.                             <p>￥198</p>
  187.                             <span class="iconfont"></span>
  188.                         </div>
  189.                     </div>
  190.                 </div>
  191.                 <div class="goods-8">
  192.                     <div class="goods-title">
  193.                         <div class="goods-name">
  194.                             <p>海岸蓝调</p>
  195.                             <p>Côte d'Azur</p>
  196.                         </div>
  197.                         <div class="goods-go">
  198.                             <p>￥198</p>
  199.                             <span class="iconfont"></span>
  200.                         </div>
  201.                     </div>
  202.                 </div>
  203.                 <div class="goods-9">
  204.                     <div class="goods-title">
  205.                         <div class="goods-name">
  206.                             <p>海岸蓝调</p>
  207.                             <p>Côte d'Azur</p>
  208.                         </div>
  209.                         <div class="goods-go">
  210.                             <p>￥198</p>
  211.                             <span class="iconfont"></span>
  212.                         </div>
  213.                     </div>
  214.                 </div>
  215.             </div>
  216.             <div class="goods">
  217.                 <div class="goods-10">
  218.                     <div class="goods-title">
  219.                         <div class="goods-name">
  220.                             <p>海岸蓝调</p>
  221.                             <p>Côte d'Azur</p>
  222.                         </div>
  223.                         <div class="goods-go">
  224.                             <p>￥198</p>
  225.                             <span class="iconfont"></span>
  226.                         </div>
  227.                     </div>
  228.                 </div>
  229.                 <div class="goods-11">
  230.                     <div class="goods-title">
  231.                         <div class="goods-name">
  232.                             <p>海岸蓝调</p>
  233.                             <p>Côte d'Azur</p>
  234.                         </div>
  235.                         <div class="goods-go">
  236.                             <p>￥198</p>
  237.                             <span class="iconfont"></span>
  238.                         </div>
  239.                     </div>
  240.                 </div>
  241.                 <div class="goods-12">
  242.                     <div class="goods-title">
  243.                         <div class="goods-name">
  244.                             <p>海岸蓝调</p>
  245.                             <p>Côte d'Azur</p>
  246.                         </div>
  247.                         <div class="goods-go">
  248.                             <span>￥198</span>
  249.                             <span class="iconfont"></span>
  250.                         </div>
  251.                     </div>
  252.                 </div>
  253.             </div>
  255.         </div>
  257.         <!-- 页脚 -->
  258.         <footer>
  259.             <!-- 上 -->
  260.             <div class="footer-up">
  261.                 <!-- 上左 -->
  262.                 <div class="up-left">
  263.                     <img src="images/logo2.png" alt="" />
  264.                     <a href="">订购热线：4006-678-678（8:00 - 20:00)</a>
  265.                     <a href="">客服邮箱：cs@mcake.com</a>
  266.                     <a href="">地址：上海市普陀区同普路1130弄3号楼</a>
  267.                     <a href="">食品生产许可证：SC12431010700121</a>
  268.                 </div>
  269.                 <!-- 上中 -->
  270.                 <div class="up-center"> 
  271.                     <div class="upcenter-left">
  272.                         <h4>关于我们</h4>
  273.                         <a href="">企业介绍</a>
  274.                         <a href="">媒体合作</a>
  275.                         <a href="">招贤纳士</a>
  276.                         <a href="">呼叫中心</a>
  277.                     </div>
  278.                 <div class="upcenter-center"> 
  279.                         <h4>帮助中心</h4>
  280.                         <a href="">投诉与建议</a>
  281.                         <a href="">会员权益</a>
  282.                         <a href="">购物指南</a>
  283.                         <a href="">支付类</a>
  284.                         <a href="">订单相关</a>
  285.                         <a href="">配送服务</a>
  286.                 </div>
  287.                 <div class="upcenter-right"> 
  288.                         <h4>发现</h4>
  289.                         <a href="">公告</a>
  290.                 </div>
  291.                 </div>
  292.                 <!-- 上右 -->
  293.                 <div class="up-right"> 
  294.                         <a href=""><img src="images/weibo.png" alt="" /></a>
  295.                         <a href=""><img src="images/weixin.png" alt="" /></a>
  296.                 </div>
  297.             </div>
  298.             <!-- 中间 -->
  299.             <div class="footer-center">
  300.                 <!-- 中左 -->
  301.                 <div class="center-left">
  302.                     <a href="">上海卡法电子商务有限公司</a>
  303.                     <a href="">地址：上海市普陀区同普路1130弄3号楼</a>
  304.                     <a href="">洽谈电话：021-52691591</a>
  305.                     <a href="">社会信用代码：913101070678091460</a>
  306.                     <a href="">食品经营许可证：JY13101070034251</a>                    
  307.                 </div>
  308.                 <!-- 中中 -->
  309.                 <div class="center-center">
  310.                     <a href="">上海卡法电子商务有限公司北京分公司</a>
  311.                     <a href="">地址：北京市朝阳区东四环中路82号3座16层1908</a>
  312.                     <a href="">洽谈电话：010-52088262</a>
  313.                     <a href="">社会信用代码：911101053484280752</a>
  314.                     <a href="">食品经营许可证：JY11105212634724</a>
  315.                 </div>
  316.               <!-- 中右 -->
  317.                 <div class="center-right">
  318.                     <a href="">上海卡法电子商务有限公司杭州分公司</a>
  319.                     <a href="">地址：杭州市拱墅区中环大厦607室</a>
  320.                     <a href="">洽谈电话：0571-28103688</a>
  321.                     <a href="">社会信用代码：913301060920344424</a>
  322.                     <a href="">食品经营许可证：JY13301050141226</a>
  323.                 </div>
  324.             </div>
  325.             <!-- 下 -->
  326.             <div class="footer-down">
  327.                 <span>Copyright © 2012-2020 上海卡法电子商务有限公司 版权所有 沪ICP备12022075号</span>
  328.             </div>
  329.         </footer>
  330.         </body>
  331.         </html>

css代码：

  1. *{
  2.     margin:0;
  3.     padding:0;
  4.     box-sizing:border-box;
  5. }
  6. a{
  7.     text-decoration:none;
  8.     color:#cccccc;
  9. }
  10. html{
  11.     font-size:16px;
  12. }
  13. body{
  14.     display:flex;
  15.     flex-flow:column nowrap;
  16. }
  17. header{
  18. background-color:white;
  19. height:130px;
  20. display:flex;
  21. position:fixed;
  22. width:100vw;
  23. border:1px solid #cccccc;
  24. }
  25. header>div{
  26. display:flex;
  27. flex-flow:column nowrap;
  28. align-items:center;
  29. border-left:1px solid #cccccc;
  30. text-align:center;
  31. flex:0 0 90px;
  32. }
  33. header>div:first-of-type{
  34.     margin-right:50px;
  35.     padding-top:10px;
  36.     width:180px;
  37. }
  38. header>div>a{
  39.     flex-flow:column wrap;
  40.     justify-content:center;
  41.     position:relative;
  42.     top:30%;
  43.     font-size:0.8rem;
  44. }
  45. .iconfont{
  46.     color:#cccccc;
  47.     font-size:1.6rem;
  48. }
  49. header div:nth-last-of-type(-n + 3){
  50.     position:relative;
  51.     left:800px; 
  52. }
  53. header div:nth-last-child(4){
  54.     border-right:1px solid #cccccc;
  55. }
  56. header div:hover:not(:first-of-type){
  57.     color:#000;
  58.     border-top:3px solid #ffe32a;
  59. }
  60. header div a:hover{
  61.     color:#000;
  62. }
  63. header div a span:hover{
  64.     color:#000;
  65. }
  67. .container{
  68.     width:1400px;
  69.     margin:auto;
  70. }
  72. /* 轮播图 */
  73. .slider{
  74.     margin:auto;
  75. }
  76. .title{
  77.     width:1400px;
  78.     margin:auto;
  79.     height:380px;
  80.     padding:120px 0;
  81. }
  82. .title>h3{
  83.     font-size:2rem;
  84.   margin-top:-15px;
  85.   margin-left:80px;  
  86. }
  87. .title>p{
  88.     color:#cccccc;
  89.     margin-left:80px;
  90. }
  91. .title>h4{
  92.     font-size:1.8rem;
  93.     margin-top:-50px;
  94.     margin-left:700px;
  95.     color:#cccccc;
  96. }
  98. /* 用商品做背景，可以做到文字在图片上显示 */
  99. .goods-1{
  100.     background:url(images/dangao1.jpg);
  101.     width:421px;
  102.     height:421px;
  103. }
  104. .goods-2{
  105.     background:url(images/dangao2.jpg);
  106.     width:421px;
  107.     height:421px;
  108. }
  109. .goods-3{
  110.     background:url(images/dangao3.jpg);
  111.     width:421px;
  112.     height:421px;
  113. }
  114. .goods-4{
  115.     background:url(images/dangao4.jpg);
  116.     width:421px;
  117.     height:421px;
  118. }
  119. .goods-5{
  120.     background:url(images/dangao5.jpg);
  121.     width:421px;
  122.     height:421px;
  123. }
  124. .goods-6{
  125.     background:url(images/dangao6.jpg);
  126.     width:421px;
  127.     height:421px;
  128. }
  129. .goods-7{
  130.     background:url(images/dangao7.jpg);
  131.     width:421px;
  132.     height:421px;
  133. }
  134. .goods-8{
  135.     background:url(images/dangao8.jpg);
  136.     width:421px;
  137.     height:421px;
  138. }
  139. .goods-9{
  140.     background:url(images/dangao9.jpg);
  141.     width:421px;
  142.     height:421px;
  143. }
  144. .goods-10{
  145.     background:url(images/dangao10.jpg);
  146.     width:421px;
  147.     height:421px;
  148. }
  149. .goods-11{
  150.     background:url(images/dangao11.jpg);
  151.     width:421px;
  152.     height:421px;
  153. }
  154. .goods-12{
  155.     background:url(images/dangao12.jpg);
  156.     width:421px;
  157.     height:421px;
  158. }
  159. .goods-hot{
  160.     display:flex;
  161.     justify-content:center;
  162. }
  163. .goods{
  164.     height:968;
  165.     margin:auto;
  166.     display:flex;
  167.     flex-flow:row nowrap;
  168.     margin:30px 0;
  169.     justify-content:space-evenly;
  170. }
  171. .goods>div{
  172.     padding:10px;
  173.     box-sizing:border-box;
  174. }
  175. .goods-name>p:last-of-type{
  176.     color:#cccccc;
  177.     font-size:0.8rem;
  178. }
  179. .goods-title{
  180.     height:inherit;
  181.     display:flex;
  182.     flex-direction:column;
  183.     justify-content:space-between;
  184.     padding:20px;
  186. }
  187. .goods-name{
  188.     width:80px;
  189. }
  190. .goods-go>.iconfont{
  191.     width:30px;
  192.     height:30px;
  193.     background-color:#ffe32a;
  194.     border-radius:50%;
  195.     text-align:center;
  196. }
  197. .goods-go{
  198.     width:100%;
  199.     display:flex;
  200.     flex-flow:row nowrap;
  201.     justify-content:space-between;
  202. }
  204. /* 页脚 */
  205. footer{
  206.     width:100vw;
  207.     background-color:#000;
  208.     color:white;
  209.     display:flex;
  210.     flex-flow:column nowrap;
  211.     height:600px;
  212.     padding-top:50px;
  213.     font-size:0.8rem;
  214. }
  215. .footer-up{
  216.     margin:auto;
  217.     height:100px;
  218.     width:1400px;
  219.     display:flex;
  220.     flex-flow:row nowrap;
  221.     justify-content:center;
  222. }
  223. .up-left{
  224.     width:400px;
  225.     display:flex;
  226.     flex-flow:column nowrap;
  227. }
  228. .up-center{
  229.     width:400px;
  230.     display:flex;
  231.     flex-flow:row wrap;
  232.     justify-content:center;
  233. }
  234. .up-right{
  235.     width:400px;
  236.     display:flex;
  237.     justify-content:center;
  239. }
  240. .upcenter-left{
  241.     width:120px;
  242.     display:flex;
  243.     flex-flow:column wrap;
  244.     justify-content:flex-start;
  245. }
  246. .upcenter-center{
  247.     width:120px;
  248.     display:flex;
  249.     flex-flow:column wrap;
  250. }
  251. .upcenter-right{
  252.     width:120px;
  253.     display:flex;
  254.     flex-flow:column wrap;
  255. }
  256. .footer-center{
  257.     width:1400px;
  258.     height:100px;
  259.     margin:auto;
  260.     display:flex;
  261.     flex-flow:row nowrap;
  262.     justify-content:center;
  263. }
  264. .center-left{
  265.     width:400px;
  266.     display:flex;
  267.     flex-flow:column nowrap;
  268. }
  269. .center-center{
  270.     width:400px;
  271.     display:flex;
  272.     flex-flow:column nowrap;
  273. }
  274. .center-right{
  275.     width:400px;
  276.     display:flex;
  277.     flex-flow:column nowrap;
  278. }
  279. .footer-down{
  280.     width:1400px;
  281.     margin:auto;
  282.     display:flex;
  283.     justify-content:center;
  284. }
  285. .up-left> img{
  286.     width:143px;
  287.     margin-bottom:10px;
  288. }

效果图：

  • 总结：仿站中发现很多对flex不熟练的地方，还需要多熟悉。仿站成果很多细节不到位，加油吧！
Correcting teacher：GuanhuiGuanhui

Correction status：qualified

Teacher's comments：goods中的宽高都是一样的，可以抽出来写成一个公共的class。
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post