黑马前端品优购静态网页制作——猜你喜欢模块

早间芦花

已于 2022-11-02 20:13:54 修改

阅读量485

点赞数 1

分类专栏：学习训练文章标签： html css 前端

于 2022-11-02 16:55:07 首次发布

本文链接：https://blog.csdn.net/qq_38553293/article/details/127654182

版权

该博客介绍了如何使用HTML和CSS制作前端页面中的‘猜你喜欢’模块。通过创建一个大盒子，分为头部和主体两部分，利用浮动布局和伪元素实现猜你喜欢标题和换一批按钮的样式。主要内容包括设置版心、将图片直接插入并调整尺寸等步骤。

摘要由CSDN通过智能技术生成

示例图：

思路：

1.先用一个大盒子like加版心w元素，给一个高度就可以了。

2.把大盒子分为上下两块，上面是like-hd部分，包含猜你喜欢和换一批。下面是like-bd部分可以用li做。

3.猜你喜欢我用的h4，给了一个左浮动，换一批用的a链接右浮动加一个after伪元素字体图标。

4.like-bd部分由于原素材只有抠图素材，切图切不下来，所以我用的qq截图直接把图片截下来，再直接img插入图片，样式里面指定一下img的宽高。

代码：

html

<!-- 猜你喜欢模块stat -->
  <div class="w like">
    <div class="like-hd">
      <h3>猜你喜欢</h3>
      <a href="#">换一批</a>
    </div>
    <div class="like-bd">
      <ul>
        <li>
          <img src="upload/like01.png" alt="">
          <h5><a href="#">阳光美包新款单肩包女<br />包时尚子母包四件套女&