创建Google网页等按钮和文本框

时间:2013-08-13 07:44:33

标签: jquery css jsp

如何创建Google搜索,Google +和Google Play等Google网页中的轻量级按钮和文本框。我正在使用JSP和CSS ..我准备使用jQuery ..请做那个需要。提前谢谢..

2 个答案:

答案 0 :(得分:1)

参见..示例 http://purecss.io/ 可能对你有用....

答案 1 :(得分:0)

要创建Google搜索等按钮,您可以使用此代码创建不同的按钮。 将此代码用作html代码

  <div class="input-box">
        <input type="text" value="" placeholder="search text here" class="input-1" />
        <input type="submit" value=" OK " class="input-2" />
    </div>

将此用作css

.input-1, .input-2{
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.input-1{
    width: 70%; /* input-1 + input-2 = 100% */
}
.input-2{
    width: 30%; /* input-1 + input-2 = 100% */
}
.input-box{
    height: 32px; /* Own value - full height */
    width: 200px; /* Own value - full width */
}