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

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

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

布局效果:
08 CSS-水果库存静态页面展示【尚硅谷JavaWeb教程】_第1张图片

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>5td>
                    <td>20td>
                    <td>100td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/>td>
                tr>
                <tr>
                    <td>西瓜td>
                    <td>3td>
                    <td>20td>
                    <td>60td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/>td>
                tr>
                <tr>
                    <td>菠萝td>
                    <td>4td>
                    <td>25td>
                    <td>100td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/>td>
                tr>
                <tr>
                    <td>榴莲td>
                    <td>3td>
                    <td>30td>
                    <td>90td>
                    <td><img src="static/imgs/del.jpg" class="delImg"/>td>
                tr>
                <tr>
                    <td>总计td>
                    <td colspan="4">999td>
                tr>
            table>
        div>

    div>

body>
html>

效果展示:
08 CSS-水果库存静态页面展示【尚硅谷JavaWeb教程】_第2张图片

你可能感兴趣的:(JavaWEB,css,前端,html)