如何用html把文本框外观格式设为只显示底部的横线

 

 html把文本框外观格式设为只显示底部的横线

<style>
input[type='text']{background:none;border:none;border-bottom:1px solid #ddd;}//所有input框类型为text的
.inp{background:none;border:none;border-bottom:1px solid #ddd;}
</style>
<input type="number" value="" class="inp"/>

参考:https://zhidao.baidu.com/question/1242984244365752339.html

 

设置图片居中

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style>
        *{
            padding:0px;
            margin:0px;
            font-family:"微软雅黑";
        }


        .homeback {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            margin-left: auto;
            margin-right: auto;
            z-index: -1;
        }
        .div2 {
            position: absolute;        
        }
        @media screen and (max-width: 1100px) { /*当屏幕尺寸小于1100px时，应用下面的CSS样式*/
            .icontype {
           width:40%;margin-top:20%;margin-left:30%
          }
           .grouptype {
           width:50%;margin-top:60%;margin-left:25%
          }
   
            .checktype {
                width: 35%;
                margin-top: 90%;
                margin-left: 58%
            }

            .searchtype {
                width: 30%;
                margin-top: 68%;
                margin-left: 33%
            }
        }
        @media screen and (min-width: 1100px) { /*当屏幕尺寸大于1100px时，应用下面的CSS样式*/
            .icontype {
                width: 30%;
                margin-top: 5%;
                margin-left: 35%
            }

            .grouptype {
                width: 30%;
                margin-top: 25%;
                margin-left: 35%
            }

            .checktype {
                width: 20%;
                margin-top: 40%;
                margin-left: 58%
            }

            .searchtype {
                width: 15%;
                margin-top: 32%;
                margin-left: 42%
            }
        }

        .input2{
            border: none;
            background: none;
            border-bottom: solid 1px #0c0c0c;
        }
    </style>

        <img class="homeback" src="../Images/ECheck/背景拷贝.png" />
        <img class="div2 icontype" src="../Images/ECheck/icon.png" />

 

        $(function () {
            $("#bodyground").css({ "width": screenwidth + "px", "height": screenwidth + "px" });
        });

        //获取屏幕总高度,宽度
        var screenheight = window.screen.availHeight
        var screenwidth = window.screen.availWidth