使用css样式设计搜索框-效果不错哦（仔细看还有div精准定位布局，想放哪就放哪so easy！）

1.没有css修饰的搜索框，真是没法看，预习了一下css下面来做一下搜索框：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ssk</title>
        <style type="text/css">
            .classB{
                position: absolute;
                margin: 0 auto;
                width: 460px;
                height: 36px;
                top: 100px;
                left: 400px;
                margin: 0 auto;
            }
            .classA{
                position: absolute;
                width: 538px;
                height: 36px;
                overflow:hidden;
                border: 2px solid #BD1D17;
                align-content: center;
                /*margin-left: auto;
                margin-right: auto;*/
                top: 140px;
                left: 400px;
                margin: 0 auto;
                
            }
            .classA input{
                width: 456PX;
                height: 24PX;
                float: left;
                padding: 6px 2px; /*对input内补白,使其字体不紧贴border边框,增加美感.*/
                background-color: transparent; /*让input标签的颜色为透明色*/
                border: none; /* 去input标签原来的边框属性*/
                outline: none;
                font-size: 16px;
            }
            .classA button{
                width: 76px;
                height: 36px;
                float: right;
                background-color: #BD1D17;
            }
            
        </style>
    </head>
    <body">
        <div class="classB"><span style="color: #ff00fff; font-size: 18pt;"><strong>HTML标签:</strong></span></div>
        <div class="classA" styl">
            <form >
                <input type="text" name="search" placeholder="    search练习" />
                <button>搜索</button>
            </form>
            
        </div>
    </body>
</html>

小伙伴们可以自己去敲下试试效果。

posted on 2016-08-04 15:56  宁缺John  阅读(1062)  评论(0)  编辑  收藏  举报

导航