HTML搭配CSS的常用样式

搜索框带按钮

CSS样式

.search_one input:first-child{width: 300px;border:2px solid #01AAED;padding:0 10px;float: left;color: #333;height: 34px;}
.search_one input:last-child{padding:0 10px;border:0;background: #01AAED;color: #fff;height: 38px;}

HTML结构

    <div class="search_one">
        <input type="text"><input type="button" value="搜索">
    </div>

效果

下拉菜单优化

CSS样式

select {
    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
    border:0;
    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

html结构

        <select>
            <option value="广东">广东</option>
            <option value="北京">北京</option>
        </select>
        <select>
            <option value="广东">深圳</option>
            <option value="北京">广州</option>
        </select>

效果

按钮

CSS样式

.but_one{
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #009688;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: #fff;
}

Html结构

    <button class="but_one">我是按钮</button>

效果

很有质感的hr水平线

CSS

    hr{
        background-color: transparent;
        height: 0;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        border-top: 1px solid rgba(0,0,0,0.9);
        margin: 0;
        clear: both;
    }

input['file'] 优化

<span class="img">选择文件<input type="file" name="file"></span>

 .img {position: relative;display: inline-block;padding: 8px 16px;background: #576274;color: #fff;}
 .img input {position: absolute;font-size: 100px;right: 0;top:0;opacity: 0;cursor:pointer;}

上一篇：原生JS，onkeydown事件，回车键盘事件

下一篇：TP5使用wangEditor编辑器结合七牛云存储实现图片上传