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

1、index.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;
}