• <dl id="ke2kd"><ins id="ke2kd"></ins></dl>
    <dl id="ke2kd"><ins id="ke2kd"></ins></dl>
  • <div id="ke2kd"></div>
  • 设为首页 - 加入收藏 织梦模板之家(Mubanzhijia.Com),专注织梦模板设计制作!
    热搜: sp1 dedecms5.1 免费版
    广告位
    当前位置: 主页 > 网页基础 > DIV&CSS >

    用CSS设计你的搜索框

    2010-04-07 09:32 [DIV&CSS] 来源于:
    导读:今天我将介绍一下如何使用CSS中的背景?#35745;?#26469;设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框,但是这?#22336;?#27861;看起来会更容易些,所以我想将它与感兴趣的朋友分享。 View Demo 原始方式 首先来让我们看看我的原始的使用input type=image src=image_u

    今天我将介绍一下如何使用CSS中的背景?#35745;?#26469;设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框,但是这?#22336;?#27861;看起来会更容易些,所以我想将它与感兴趣的朋友分享。

    原始方式


    首先来让我们看看我的原始的使用的方法:







    这看起来挺不错的,但是它有一个不好的地方,这个?#35745;?#25353;钮不会和搜索框对其,我必须使用一个负的margin-top属性来修正这个bug。

    改良方法

    在这个改良版的方法中,我决定不再使用 type=”image” ,而是使用


    CSS
    fieldset.search {
    border: none;
    width: 243px;
    margin: 0 auto;
    background: #222;
    }
    .search input, .search button {
    border: none;
    float: left;
    }
    .search input.box {
    color: #fff;
    font-size: 1.2em;
    width: 190px;
    height: 30px;
    padding: 8px 5px 0;
    background: #616161 url(search_bg.gif) no-repeat;
    margin-right: 5px;
    }
    .search input.box:focus {
    background: #616161 url(search_bg.gif) no-repeat left -38px;
    outline: none;
    }
    .search button.btn {
    width: 38px;
    height: 38px;
    cursor: pointer;
    text-indent: -9999px;
    background: #fbc900 url(search_bg.gif) no-repeat top right;
    }
    .search button.btn:hover {
    background: #fbc900 url(search_bg.gif) no-repeat bottom right;
    }

    IE特别注释

    IE 样式- ie.css
    朋友评论说如果输入文字过多IE6和IE7会水平滚动背景?#35745;?#25152;以我的方法是专门为IE使用一个单独的背景?#35745;?,而且不是让它左对齐,我翻转了它,通过让背景?#35745;?#21491;对齐来修正这个。
    .search input.box {
    background: url(search_bg_ie.gif) no-repeat right bottom;
      /* 专门为IE的独立背景?#35745;?#32780;且这个?#35745;?#24517;须是右对齐的。***/
    }

    (编辑:admin)

    网友评论
    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    验证码:
    推荐文章
    广告位
    广告位
    广告位
    红叶高手联盟心水论坛
  • <dl id="ke2kd"><ins id="ke2kd"></ins></dl>
    <dl id="ke2kd"><ins id="ke2kd"></ins></dl>
  • <div id="ke2kd"></div>
  • <dl id="ke2kd"><ins id="ke2kd"></ins></dl>
    <dl id="ke2kd"><ins id="ke2kd"></ins></dl>
  • <div id="ke2kd"></div>
  • 双色球宝典2019136 500彩票网主页 湖南快乐十分开奖记录 一句解特码 组六有多少组合 广东好彩1玩法介绍 福彩 重庆快乐10分钟玩法 七乐彩走势图表 安徽快三开奖结果查询 一码中特免费公开 水晶体育对最强者 海南41中奖规则和奖金 ag真人视讯套利 3d241期彩经网一注