美文网首页
品优购 推荐模块

品优购 推荐模块

作者: Jay_ZJ | 来源:发表于2020-05-22 10:04 被阅读0次

设计

这个部分分为左右两个模块,较为简单


今日推荐
  • 左侧图片加文字,居中 - recom_hd
  • 右侧用ul li加链接放图片 - recom_bd
  <div class="w recom">
     <div class="recom_hd fl">
     </div>
     <div class="recom_bd fl">
     </div>
   </div>
.recom {
  margin-top: 12px;
  height: 163px;
}

recom_hd

    <div class="recom_hd fl">
       <img src="./images/clock.png" alt="">
       <h5>今日推荐</h5>
     </div>
.recom_hd {
  padding-top: 30px;
  height: 163px;
  text-align: center;
  width: 205px;
  background-color: #5C5251;
}
.recom_hd h5 {
  padding-top: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

recom_bd

    <div class="recom_bd fl">
       <ul>
         <li><img src="./upload/pic.jpg" alt=""></li>
         <li><img src="./upload/pic.jpg" alt=""></li>
         <li><img src="./upload/pic.jpg" alt=""></li>
         <li><img src="./upload/pic.jpg" alt=""></li>
       </ul>
     </div>
.recom_bd {
  background-color: #EBEBEB;
}
.recom_bd ul li {
  position: relative;
  float: left;
  padding: 10px 0;
}
.recom_bd ul li:nth-child(-n+3)::after {
  position: absolute;
  right: 0;
  top: 10px;
  content: '';
  width: 1px;
  height: 145px;
  background-color: #ddd;
}

相关文章

  • 品优购 推荐模块

    设计 这个部分分为左右两个模块,较为简单 左侧图片加文字,居中 - recom_hd 右侧用ul li加链接放图片...

  • 品优购 主体模块

    设计 主体模块-main,是index里面专有的,之一需要新的样式文件 index.css mian盒子宽度为98...

  • 品优购 模块化开发

    概念 将一个项目按照功能划分为一个功能一个模块,互不影响。 优点 具有重复使用,更换方便等优点 代码模块化 有些样...

  • 人人优品优品大学:对于普通人而言,为什么人人优品是一次机遇。

    人人优品邀请码是多少?人人优品推荐码人人优品推荐ID:150289430 其余对于很多人提起人人优品,并不陌生,原...

  • 品优购实战

    目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺...

  • 品优购 底部

    设计 分为三部分: mod_service 服务模块 mod_help 帮助模块 mod_copyright 版权...

  • 品优购总结

    项目知识点: 1.@RequestBody--对应实体类封装和@RequestParam 2.mybatis中ex...

  • 品优购 favicon

    概念 favicon.ico 一般用于缩略的网站标志,它显示在浏览器的地址栏或者标签上,主流浏览器都支持。 使用流...

  • 品优购项目

    使用HTML+CSS+JS实现的模仿京东电商界面,文档及代码如下:品优购项目[https://github.com...

  • 品优购(IDEA版)-第一天

    品优购(IDEA版)-第一天 品优购IDEA版应该是2019年的新项目。目前只有视频。资料其他都还是旧的。 1.学...

网友评论

      本文标题:品优购 推荐模块

      本文链接:https://www.haomeiwen.com/subject/dgotahtx.html