Question

我想创建一个类似于https://www.zomato.com/的搜索栏，完全相同的布局。

我可以在背景图片上创建一个浮动搜索框。不确定如何并排加入各种输入字段和按钮。这是我现在的css。

.search {
    background:rgba(0,0,0,0.6);
    border: 2px solid #414141;
    border-radius: 5px;
    padding: 10px;
}

header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/header-bg.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
}

header .intro-text .intro-lead-in {
    margin-bottom: 25px;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 22px;
    font-style: italic;
    line-height: 22px;
}

至于HTML：

<body id="page-top" class="index">

    <!-- I have a navbar here -->

    <!-- Header -->
    <header>

               <div class="intro-text">
                            <div class="intro-lead-in">Welcome To Our Studio!</div>
                            <div class="intro-heading">It's Nice To Meet You</div>
               </div>     

    </header>
</body>

如何创建Zomato样式搜索栏？

0 个答案: