内向♛男孩卍 2021-12-21 07:49 采纳率: 50%
浏览 72
已结题

用html5做出来，有点不会

img

  • 写回答

2条回答 默认 最新

  • 落落Plus 2021-12-21 09:35
    关注
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    body {
        background: #ccc;
    }
    .box {
        width: 260px;
        margin: 0 7px 14px;
        background-color: #fff;
        font-size: 12px;
        padding: 0 14px 11px;
        box-sizing: border-box;

    }
    .box:hover .content span{
        white-space: normal;
    }
    img {
        width: 100%;
    }
    .content {
        width: 234px;
    }
    .content span {
        display: block;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
    }
    .price {
        color: red;
        font-size: 22px;
    }
</style>
<body>
<div class="box">
    <img src="https://kaola-haitao.oss.kaolacdn.com/vangoghTemp202112/b4c935fa32394ca6a26efc81da94ae9e_800_800.jpg?x-oss-process=image/resize,w_262,h_262/quality,q_90/ignore-error,1" alt="">
    <div class="content">
        <div class="price">新人价¥381</div>
        <span>美赞臣第二代蓝臻幼儿配方奶粉3段820克罐装美赞臣第二代蓝臻幼儿配方奶粉3段820克罐装</span>
    </div>
</div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 12月29日
  • 已采纳回答 12月21日
  • 修改了问题 12月21日
  • 修改了问题 12月21日
  • 展开全部