search

博客列表 >12月26日网站各个组件的实战，以及FLEX的具体应用

12月26日网站各个组件的实战，以及FLEX的具体应用

曾
曾原创
2019年12月27日 17:18:08624浏览

今天继续实战前端网页的各类型组件编写，以及FLEX弹性盒子的运用。

这个组件主要是运用FLEX弹性盒子，嵌套完成，主要使用到Flex-flow：row|column；nowarp|warp来实现FLEX项目的排列方式以及是否换行。
运用justify-content来实现Flex项目的对齐方式，这次的组件对齐方式主要是运用justify-content:space-between来实现的两端对齐。

  1. <div class="public-second-hand">
  2. <!--    标题1-->
  3.     <div class="title1">
  4.         <a href="">抢好货</a>
  5.         <span>0低价</span>
  6.         <span>便捷</span>
  7.         <span>安全</span>
  8.         <span>快速</span>
  9.     </div>
  10. <!--    标题2-->
  11.     <div class="title2">
  12.         <span>热门分类</span>
  13.         <a href="">美女写真</a>
  14.         <a href="">日本美女</a>
  15.         <a href="">美国美女</a>
  16.         <a href="">国内美女</a>
  17.         <a href="">AV美女</a>
  18.     </div>
  19. <!--    交易内容-->
  20.     <div class="exhibition">
  21. <!--        交易内容左边-->
  22.         <div class="exhibition-lt">
  23.             <div class="exhibition-lt-shop">
  24.                     <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  25.                     <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  26.                     <div>
  27.                         <spa>&yen;333</spa>
  28.                         <span>美女</span>
  29.                     </div>
  30.             </div>
  31.             <div class="exhibition-lt-shop">
  32.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  33.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  34.                 <div>
  35.                     <spa>&yen;333</spa>
  36.                     <span>美女</span>
  37.                 </div>
  38.             </div>
  39.             <div class="exhibition-lt-shop">
  40.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  41.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  42.                 <div>
  43.                     <spa>&yen;333</spa>
  44.                     <span>美女</span>
  45.                 </div>
  46.             </div>
  47.             <div class="exhibition-lt-shop">
  48.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  49.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  50.                 <div>
  51.                     <spa>&yen;333</spa>
  52.                     <span>美女</span>
  53.                 </div>
  54.             </div>
  55.             <div class="exhibition-lt-shop">
  56.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  57.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  58.                 <div>
  59.                     <spa>&yen;333</spa>
  60.                     <span>美女</span>
  61.                 </div>
  62.             </div>
  63.             <div class="exhibition-lt-shop">
  64.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  65.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  66.                 <div>
  67.                     <spa>&yen;333</spa>
  68.                     <span>美女</span>
  69.                 </div>
  70.             </div>
  71.             <div class="exhibition-lt-shop">
  72.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  73.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  74.                 <div>
  75.                     <spa>&yen;333</spa>
  76.                     <span>美女</span>
  77.                 </div>
  78.             </div>
  79.             <div class="exhibition-lt-shop">
  80.                 <img src="../../static/images/shop/shop5.jpg" alt="" width="178" height="122">
  81.                 <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  82.                 <div>
  83.                     <spa>&yen;333</spa>
  84.                     <span>美女</span>
  85.                 </div>
  86.             </div>
  87.         </div>
  88. <!--        交易内容右边-->
  89.         <div class="exhibition-rt">
  90.             <a href=""><img src="../../static/images/ad/1.png" alt="" width="190" height="130"></a>
  91.             <a href=""><img src="../../static/images/ad/2.png" alt="" width="190" height="130"></a>
  92.             <a href=""><img src="../../static/images/ad/3.png" alt="" width="190" height="130"></a>
  93.             <a href=""><img src="../../static/images/ad/4.png" alt="" width="190" height="130"></a>
  95.             <div class="exhibition-rt-ad2">
  96.                 <a href=""><img src="../../static/images/ad/image.png" alt=""width="393" height="60"></a>
  97.                 <a href=""><img src="../../static/images/ad/ad2.jpg" alt="" width="393" height="60"></a>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </div>
  1. .public-second-hand {
  2.     width: 1200px;
  3.     margin: auto;
  4.     padding: 10px;
  5.     border-radius: 3px;
  6.     box-sizing: border-box;
  7.     background-color: #fff;
  9. }
  11. .public-second-hand:hover{
  12.     box-shadow: 0 0 3px;
  13. }
  15. .public-second-hand > div{
  16.     margin: 10px 0;
  17. }
  19. .public-second-hand >.title1{
  20.     height: 40px;
  21.     border-bottom: 1px solid lightgray;
  22. }
  24. .public-second-hand >.title1 > a {
  25.     font-size: 24px;
  26.     color: black;
  27.     margin-right: 20px;
  28. }
  30. .public-second-hand >.title1 > span {
  31.     color: red;
  32. }
  34. .public-second-hand >.title2{
  35.     height: 40px;
  36. }
  37. .public-second-hand >.title2 >span{
  38.     font-size: 24px;
  39.     color: red;
  40. }
  41. .public-second-hand >.title2 >a{
  42.     color: black;
  43.     margin: 0 10px;
  44. }
  45. .public-second-hand >.title2 > a:hover{
  46.     color: #DD4A68;
  47. }
  48. .public-second-hand >.exhibition{
  49.     height: 440px;
  50.     display: flex;
  51. }
  52. .public-second-hand >.exhibition >.exhibition-lt{
  53.     flex-basis: 800px;
  54.     padding: 10px;
  55.     display: flex;
  56.     flex-flow: row wrap;
  57.     justify-content: space-between;
  58. }
  59. .public-second-hand >.exhibition >.exhibition-lt>.exhibition-lt-shop{
  60.     width: 178px;
  61.     height: 200px;
  62.     display: flex;
  63.     flex-flow: column nowrap;
  64.     justify-content: space-between;
  66. }
  67. .public-second-hand >.exhibition >.exhibition-lt>.exhibition-lt-shop>img{
  68.     border-radius: 5px;
  69.     border: 1px solid #cccccc;
  70. }
  71. .public-second-hand >.exhibition >.exhibition-lt>.exhibition-lt-shop>div{
  72.     display: flex;
  73.     justify-content: space-between;
  74. }
  75. .public-second-hand >.exhibition >.exhibition-lt>.exhibition-lt-shop>div>span:first-child{
  76.     color: red;
  77. }
  78. .public-second-hand >.exhibition >.exhibition-lt>.exhibition-lt-shop>div>span:nth-last-child(1){
  79.     color: white;
  80.     padding: 0 5px;
  81.     background-color: lightgreen;
  82. }
  83. .public-second-hand >.exhibition >.exhibition-rt{
  84.     flex-basis: 400px;
  85.     padding: 10px;
  86.     display: flex;
  87.     flex-flow: row wrap;
  88.     justify-content: space-between;
  89. }
  90. .public-second-hand >.exhibition >.exhibition-rt >.exhibition-rt-ad2{
  91.     display: flex;
  92.     flex-flow: column;
  93. }

效果图，两端对齐剩余空间再平均分配给项目左右，自然间距就出来了（前提是有剩余空间可供分配）

评论区主要使用了flex-flow：column垂直排列方式，来实现的效果，评论列表以多个Flex弹性盒子嵌套完成，button按钮组件使用align-self实现单个项目的对齐方式嵌套多个flex盒子完成。（Flex弹性盒子下面可以嵌套很多个Flex,不建议嵌套多了，以免混乱）

分页区比较简单，使用Flex把A标签变为弹性盒子，使用justify-content:center实现居中效果

代码都是写完了，有些排版不一样，然后在根据老师的代码 进行修改，大体架构是清楚了，还需要多加磨炼。

上一条：前端学习-1220号作业下一条：二手商品列表+回复组件（2019年12月26日）--PHP培训第十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多