为了账号安全,请及时绑定邮箱和手机立即绑定

竖立的搜索框怎么弄呢?

想让搜索框竖立  求帮忙

正在回答

3 回答

真大神!!!!!

0 回复 有任何疑惑可以回复我~

多谢大神     明白了

0 回复 有任何疑惑可以回复我~

<html>
<head>
    <title>bing search</title>
    <style type="text/css">
        body{background-color: #333;}
        .bg-div{
            position:relative;
            text-align:center;
            margin: 0 auto;
            height: 690px;
            width: 1228px;
            background-image: url(http://img1.sycdn.imooc.com//52da5e7d0001c0f813660768.jpg);
        }
        .logo{
            float:left;
            background: url(http://img1.sycdn.imooc.com//52da5e530001eea901070053.jpg) no-repeat;
            margin: -4px 18px 0 0;
            height: 53px;
            width: 107px;
        }
        .search-warp{
            float:left;
            background-color:#fff;
            width:30px;
            padding:5px;
        }
        .search-input{
            float:left;
            border: 0;
            font-size: 100%;
            width: 30px;
            outline: none;/**/
            height:229px;
            
        }
        .search-submit{
            float:left;
            cursor:pointer;
            line-height:25px;
            height: 29px;
            width: 29px;
            background: transparent url(http://img1.sycdn.imooc.com//52da5df800012b1e02220137.jpg) no-repeat -30px -107px;
            border: 0;
        }
        .search-box{
            position:absolute;
            top:20%;
            left:8%;
        }
    </style>
</head>
<body>
    <div class="bg-div">
    <div class="search-box">
        <div class="logo"></div>
        <form action="https://www.bing.com/search" target="_blank" method="get" class="search-warp">
                <input class="search-input" type="text" name="q">
                <input class="search-submit" type="submit" value=""/>
        </form>
    </div>
    </div>
</body>
</html>

把form、input框的width改小,input框height改大

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66041    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

竖立的搜索框怎么弄呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信