html里面的表格问题

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

落落Plus 2021-12-21 17:27

关注


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    body {
        background: #ccc;
    }
    .box {
        width: 1000px;
        height: 726px;
        margin: 0 auto;
        color: rgb(51, 51, 51);
        background-color: rgb(163, 208, 241);
        box-sizing: border-box;
    }
    .title {
        margin: 10px 0;
        padding: 0 5px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 28px;
    }
    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .goodsList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0;
        padding: 0 7px 0 8px;
        overflow: visible!important;
        box-sizing: border-box;
    }
    .goodsItem {
        width: calc(20% - 10px);
        height: 320px;
        position: relative;
        margin-bottom: 8px;
        float: left;
        box-sizing: border-box;
    }
    .goods-bd {
        position: relative;
        width: 100%;
        padding: 0 0 8px;
        background: #fff;
        border: 1px solid rgb(163, 208, 241);
        border-radius: 4px;
        box-sizing: border-box;

    }
    .goods-bd img {
        width: 100%;
    }
    .goodsTitle {
        transition: .5s ease-out;
        max-height: 25px;
        color: #333;
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .content {
        padding: 7px 12px 0;
        position: relative;
    }
    .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left {
        height: 52px;
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .left .price {
        color: rgb(255, 30, 50);
        font-size: 24px;
    }
    .left .price i {
        font-size: 14px;
    }
    .left .box-yen {
        position: relative;
        display: flex;
        height: 24px;
        padding-right: 4px;
        margin-bottom: 4px;
        align-items: center;
    }
    .left .box-yen img {
        width: 28px;
        height: 16px;
        margin-right: 3px;
    }
    .left .box-yen .price {
        color: #2c2c32;
        font-weight: 700;
        margin-right: 2px;
        font-size: 24px;
    }
    .left .box-yen .price i {
        font-size: 14px;
    }
    .right {
        height: 22px;
        line-height: 22px;
    }
    .right img {
        width: 32px;
        height: 32px;
    }
    .goodsItem:hover {
        z-index: 100;
    }
    .goodsItem:hover .goods-bd {
        position: absolute;
        top: 0;
    }
    .goodsItem:hover .goodsTitle {
        max-height: 100px;
        height: auto;
        text-overflow: unset;
        white-space: normal;
        word-wrap: break-word;
    }
</style>
<body>
<div class="box">
    <div class="title">品质a2</div>
    <ul class="goodsList">
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="goodsItem">
            <div class="goods-bd">
                <img src="https://kaola-haitao.oss.kaolacdn.com/3a8483ef-1ab9-4040-a16c-686983f43963.jpg?x-oss-process=image/resize,w_190,h_190/quality,q_95/format,webp" alt="">
                <div class="content">
                    <div class="goodsTitle">新西兰原装进口 a2白金版 较大婴儿配方奶粉2段(6-12个月) 900克/罐</div>
                    <div class="info">
                        <div class="left">
                            <div class="price"><i>¥</i>245</div>
                            <div class="box-yen">
                                <img src="https://kaola-haitao.oss.kaolacdn.com/a2e7948c-86cc-4e00-bbf4-1e5baedd2610.png?x-oss-process=image/resize,w_57,h_24/quality,q_95" alt="">
                                <div class="price"><i>¥</i>209</div>
                            </div>
                        </div>
                        <div class="right">
                            <img src="https://kaola-haitao.oss.kaolacdn.com/69b9a188-c930-4d98-984b-33d7ef847916_81_81.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(1条)

报告相同问题？

关注问题

【网页前端设计HTML】表格
2024-07-14 17:47

5 12霞的博客表格的主要作用表格的基本语法⭐表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把...
4.11前端 HTML表格笔记
2025-04-12 18:18

yuankuna_的博客这些标签一起构成了一个完整的 HTML 表格结构，用于在网页中呈现数据和信息。
前端html中的表格滚动显示.rar
2021-03-22 15:06

前端html中的表格table滚动显示,前端html中的表格table滚动显示前端html中的表格table滚动显示前端html中的表格table滚动显示前端html中的表格table滚动显示前端html中的表格table滚动显示前端html中的表格...
前端学习Day4 HTML 表格（定义➕举例）
2024-09-20 21:04

As977_的博客 HTML中表格是由行和列组成的结构化数据集（表格数据），它让你快速简单地查找某个表示不同类型数据之间的某种关系的值。
前端入门：HTML（表格）
2024-03-25 19:11

今天天气有点好~的博客 1.表格的基础信息两行三列，tr代表行，td代表列，td必须在tr中间，每个tr里的td数量是相同的 2.table标签的修饰属性 3.表格行tr的属性当父标签和子标签中都有相同属性的时候，选择就近原则，即tr标签中的属性。 ...
HTML 前端表格处理与保存
2022-08-18 12:19

渊季的博客前端处理完成表格内容，传送后端查询完成后更新页面表格；上述内容为读取表格内容并展示的基础方法，但是展示的内容会不太美观，可以写一点简单的。开发时，使用到的 EXCEL 表格的处理方法，其中包含读取、...
Web前端——HTML表单及表格
2022-09-26 21:38

枕鸿的博客 3、form的属性：（1）action：放置后台地址（2）method：请求方式 get post。代表表头代表行代表表头中的列。元素在元素中使用，用来声明允许用户输入数据的 input 控件...1、在html中，通常把form标签称为表单。
前端html 不规则表格制作
2020-07-08 14:21

LOI_DawnKing-的博客占用多行，在td里属性rowspan=2 占用多列，在td里属性colspan=2 td里还可以加WIDTH属性
前端页面HTML表格生成EXCEL下载
2019-03-02 15:01

huahua.Dr的博客主要使用jquery插件工具table2excel来实现将HTML页面上的table表格生成Excel下载到客户端。（兼容IE和chrome浏览器）由于功能比较简单，会使用jquery的相关工具就可以了；实现这个功能的方法还有很多，例如还可以...
前端系列之HTML（表格）
2018-01-18 10:39

众拾达人的博客了解表格应用场景表格基本结构如何操作表格？添加、删除行与列表格属性<caption></caption>定义表格的标题表格跨行跨列表格嵌套案例：表格网页布局<!DOCTYPE html> <html lang="en"> 表格布局 ...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 12月29日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 12月21日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 12月21日

html里面的表格问题

2条回答 默认 最新

问题事件

2条回答默认最新