博主信息
小追
小追
博文
13
粉丝
0
评论
0
访问量
4467
积分：0
P豆：26
最新更新
php学习之变量属性2020-07-03
grid实战 仿php中文网课程列表2020-07-03
flex弹性盒子学习三：仿站实战2020-06-29
flex学习二：pc端手机端通用解决方案2020-06-28
flex学习一2020-06-27
背景属性、精灵图、阿里图标的学习2020-06-22
浮动元素高度产生塌陷的原因及解决方案+定位元素经典3列布局实现2020-06-21
盒模型的大小定位的计算理解2020-06-19
博文分类
PHP学习13篇
热门文章
vscode及phpstudy安装配置过程1070
默写HTML文本结构及HTML三大属性447
php学习之变量属性345
浮动元素高度产生塌陷的原因及解决方案+定位元素经典3列布局实现329
导航及下拉菜单306
css选择器302
flex学习二：pc端手机端通用解决方案271
背景属性、精灵图、阿里图标的学习260

flex弹性盒子学习三：仿站实战

2020年06月29日 22:51:34阅读数：217博客 / 小追/ PHP学习

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

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不熟练的地方，还需要多熟悉。仿站成果很多细节不到位，加油吧！
批改老师：GuanhuiGuanhui

批改状态：合格

老师批语：goods中的宽高都是一样的，可以抽出来写成一个公共的class。

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 提交
    首页视频教程原生手册编程词典工具下载免责声明赞助与捐赠

    Copyright 2014-2021 //m.sbmmt.com/ All Rights Reserved PHP中文网 版权所有

    php中文网：公益在线php培训，帮助PHP学习者快速成长！

    苏ICP备2020058653号-1

    关注公众号QQ交流群