我的远程实习笔记day4---电子商城（商品信息）

最新推荐文章于 2024-08-14 16:34:57 发布

wendyzhouwendy

最新推荐文章于 2024-08-14 16:34:57 发布

阅读量37

点赞数

分类专栏：微信小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/wendyzhouwendy/article/details/129319413

版权

微信小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天是我在第二大学远程实习的第四天，正在学习如何用HTML构建电子商城的商品信息展示。我创建了包含爆款热卖区域和商品详情的布局，每个商品项包括图片、名称和价格。通过CSS调整了各元素的位置和样式，注重文字排列和视图设计，以实现清晰的商品展示效果。

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

今天是在第二大学远程实习的第四天，偷偷发个博客记录一下自己的成长哈哈（今天继续学习电子商城）
html：

<!--构建假的商品信息-->
<view class="works">
  <view class="container">
    <!--爆款热卖+更多-->
    <view class="pubTile">
      <view class="txt">爆款热卖</view>
      <navigator url="" class="more">更多</navigator>
    </view>
    <!--商品详情-->
    <view class="wkMain">
      <navigator url="" hover-class="none" class="box">
        <view style="height: 380rpx;width: 350rpx;">
          <image class="pic" src="https://img14.360buyimg.com/n7/jfs/t1/46331/32/18165/29244/63612692E8c9f0c92/ee169c476757a077.jpg"></image>
        </view>
        <view class="ceng">
          <view class="tit">Apple iPhone 14 (A2884) 128GB 紫色 5G 双卡双待手机</view>
          <view class="des">
            <view style="font-size:24rpx ;color: red;">￥5999.00元</view>
            <view style="font-size: 20rpx;color: slategray;">200+人付款</view>
          </view>
        </view>
      </navigator>
      <navigator url="" hover-class="none" class="box">
        <view style="height: 380rpx;width: 350rpx;">
          <image class="pic" src="https://img14.360buyimg.com/n7/jfs/t1/46331/32/18165/29244/63612692E8c9f0c92/ee169c476757a077.jpg"></image>
        </view>
        <view class="ceng">
          <view class="tit">Apple iPhone 14 (A2884) 128GB 紫色 5G 双卡双待手机</view>
          <view class="des">
            <view style="font-size:24rpx ;color: red;">￥5999.00元</view>
            <view style="font-size: 20rpx;color: slategray;">200+人付款</view>
          </view>
        </view>
      </navigator>
      <navigator url="" hover-class="none" class="box">
        <view style="height: 380rpx;width: 350rpx;">
          <image class="pic" src="https://img14.360buyimg.com/n7/jfs/t1/46331/32/18165/29244/63612692E8c9f0c92/ee169c476757a077.jpg"></image>
        </view>
        <view class="ceng">
          <view class="tit">Apple iPhone 14 (A2884) 128GB 紫色 5G 双卡双待手机</view>
          <view class="des">
            <view style="font-size:24rpx ;color: red;">￥5999.00元</view>
            <view style="font-size: 20rpx;color: slategray;">200+人付款</view>
          </view>
        </view>
      </navigator>
      <navigator url="" hover-class="none" class="box">
        <view style="height: 380rpx;width: 350rpx;">
          <image class="pic" src="https://img14.360buyimg.com/n7/jfs/t1/46331/32/18165/29244/63612692E8c9f0c92/ee169c476757a077.jpg"></image>
        </view>
        <view class="ceng">
          <view class="tit">Apple iPhone 14 (A2884) 128GB 紫色 5G 双卡双待手机</view>
          <view class="des">
            <view style="font-size:24rpx ;color: red;">￥5999.00元</view>
            <view style="font-size: 20rpx;color: slategray;">200+人付款</view>
          </view>
        </view>
      </navigator>
    </view>

  </view>
</view>

wxss：

/*假的商品信息*/
.works{
  background:#f0f3f8;
  padding: 90rpx 0 0;
}
/*（爆款热卖+更多）*/
.pubTile{
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  margin-bottom: 40rpx;
}
.pubTile .txt{
  font-size: 40rpx;
  height: 100%;
  position: relative;
  padding-left: 20rpx;
}
.pubTile.txt ::before{
  display:block;
   width: 10rpx;
    height: 34rpx;
    background: #d80b07;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15rpx;
}
.pubTile .more{
  font-size: 34rpx;
  color: #666;
}
/*（商品详情）*/
.wkMain{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wkMain .box{
  width: 344rpx;
  height: 550rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.wkMain .pic{
  width: 100%;
  height: 100%;
}
.wkMain .ceng{
  width: 350rpx;
  height: 200rpx;
  background: rgba(0,0,0,0,3);
  top:0;
  left: 0;
  color:  #666;
  display: flex;
  flex-direction: column;
}
.tit{
  font-size: 34rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wkMain .ceng .des{
  display: flex;
  justify-content: space-between;
  opacity: 1.2;
  text-transform: uppercase;
  letter-spacing: 5rpx;}