项目实战：在页面上添加根据关键字查询html代码

原创于 2023-11-04 20:12:33 发布 · 511 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #CSS

IOC_MVC 专栏收录该内容

21 篇文章

订阅专栏

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="script/axios.min.js"></script>
    <script src="script/index.js"></script>
    <script src="script/common.js"></script>
</head>
<body>
<div id="div0">
    <div id="div_title">
        <p>欢迎使用水果库存系统</p>
        <div style="float: left;border: 0px solid red;margin-left: 18%;margin-bottom: 4px">
            请输入查询的关键字：<input type="text" name="keyword" size="30"
                                      style="border: 1px solid lightgray;height: 24px; margin-left: 8px;padding-left: 4px"/>
            <input type="button" value="查询" class="btn"/>
        </div>
        <div style="float: right;border: 0px solid red;margin-right:8%;margin-bottom: 4px">
            <a href="add.html" style="text-decoration: none">添加新库存</a>
        </div>
    </div>
    <div id="div_fruit_table">
        <table id="fruit_tbl">
            <tr>
                <th class="w25">名称</th>
                <th class="w25">单价</th>
                <th class="w25">库存</th>
                <th>操作</th>
            </tr>
            <!--
            <tr>
              <td><a href='edit.html?fid=1'>苹果</a></td>
              <td>5</td>
              <td>100</td>
              <td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td>
            </tr>
            -->
        </table>
    </div>

    <div id="div_pagination">
        <input type="button" class="btn" onclick="page('first')" value="首页"/>
        <input type="button" class="btn" onclick="page('pre')" value="上一页"/>
        <input type="button" class="btn" onclick="page('next')" value="下一页"/>
        <input type="button" class="btn" onclick="page('last')" value="尾页"/>
    </div>

</div>
</body>
</html>

2、index.css

.delImg{
    width:24px;
    height:24px;
}
body{
    padding:0;
    margin:0;
    background-color: #333333;
}
div{
    position:relative;
    float:left;
}
*{
    color:indigo;
}
#div0{
    width:80%;
    margin-left:10%;
    background-color: aliceblue;
    padding: 60px 0px;
    margin-top:20px;
    border-radius: 8px;
}
#div_title{
    width:80%;
    margin-left:10%;
}
#div_title p{
    text-align: center;
    font-size:28px;
    letter-spacing: 8px;
}
#div_fruit_table{
    width:80%;
    margin-left:10%;
}
#fruit_tbl{
    width:88%;
    margin-left:6%;
    border:1px solid lightgray;
    line-height: 32px;
    border-collapse: collapse;
}
#fruit_tbl td , #fruit_tbl th{
    border:1px solid lightgray;
    text-align: center;
    font-weight: lighter;
}
.w25{
    width:25%;
}
#div_pagination {
    width: 70%;
    margin-left: 15%;
    border: 0px solid red;
    text-align: center;
    margin-top: 16px;
}
.btn{
    width: 100px;
    height: 26px;
    border: 1px solid lightgray;
}