08 CSS-水果库存静态页面展示【尚硅谷JavaWeb教程】

Blueming_first

已于 2023-02-01 16:41:52 修改

阅读量164

点赞数

分类专栏： JavaWEB 文章标签： css 前端 html

于 2023-02-01 16:40:10 首次发布

本文链接：https://blog.csdn.net/Cypresszky/article/details/128836567

版权

JavaWEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

08 CSS-水果库存静态页面展示【尚硅谷JavaWeb教程】

JAVAWEB 学习笔记
学习视频：https://www.bilibili.com/video/BV1AS4y177xJ/?p=11&spm_id_from=333.880.my_history.page.click&vd_source=75dce036dc8244310435eaf03de4e330

布局效果：
在这里插入图片描述

CSS部分：

body{
    margin: 0;
    padding: 0;
    background-color: gray;
}
div{
    position: relative;
    float: left;
}
#div_container{
    width: 80%;
    height: 100%;
    border: 0px solid blue;
    margin-left: 10%;
    float: left;
    background-color: honeydew;
    border-radius: 25px;/*轮廓变成圆角效果*/
}
#tbl_fruit{
    width: 60%;
    line-height: 28px;
    margin-top: 120px; /*设计表格位置*/
    margin-left: 20%;
}
#tbl_fruit, #tbl_fruit tr, #tbl_fruit td{ /* tr td 也遵从这样的样式 */
    border: 1px solid gray;

    table-layout: fixed; /*加上这个和老师效果一样*/
    border-collapse: collapse; /*边框合并*/
    text-align: center; /*居中合并*/
    font-size: 16px;
    font-family: "黑体";
    font-weight: lighter;
    color: gray;
}

.w20{
    width: 20%;
}
.delImg{
    width: 24px;
    height: 24px;
}

html部分：

<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 内部样式表 -->
    <link rel="stylesheet" href="static/css/cs_demo05.css">
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
            <table id="tbl_fruit">
                <tr>
                    <th class="w20">名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>西瓜</td>
                    <td>3</td>
                    <td>20</td>
                    <td>60</td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>菠萝</td>
                    <td>4</td>
                    <td>25</td>
                    <td>100</td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>榴莲</td>
                    <td>3</td>
                    <td>30</td>
                    <td>90</td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">999</td>
                </tr>
            </table>
        </div>

    </div>

</body>
</html>