效果图：

html代码：

<!DOCTYPE html>

<head>

<title></title>

</head>

<body>

<!--定义输入框和按钮-->

<input placeholder="关键字" class="searchInput" </input>

<input type="button" class="searchBtn"></input>

<!--开始定义样式-->

<style>

/*设置输入框样式*/

.searchInput {

        position:absolute;                  /*使用绝对定位*/

        margin-left:200px;                 /*调整位置*/

        width:300px;                      /*设置宽度*/

        height:34px;                     /*设置高度*/

        padding:2px 10px;               /*内边距*/

        font-family:"宋体";             /*设置字体*/

        font-size:16px;               /*设置字体大小*/

        border:1px solid #f98e37;    /*设置边框大小、样式、颜色*/

        border-radius: 4px 0 0 4px; /*设置边框四个圆角*/

}

/*设置输入框聚焦时样式*/

.searchInput:focus {

        border-color:#51c6ea;

}

/*设置按钮样式*/

.searchBtn {

        position:absolute;                              /*使用绝对定位*/

        margin-left:514px;                             /*调整位置*/

        width: 50px;                                  /*设置宽度*/

        height: 40px;                                /*设置高度*/

        border-style:none;                          /*取消按钮边框样式*/

        border-radius: 0px 9px 9px 0px;            /*设置边框的四个圆角*/

        background: url(search.png) repeat center;/*设置按钮背景图片、平铺、居中*/

}

</style>

</body>

</html>

2017-09-29 10:15:42

CSS组合设计输入框和按钮生成自定义关键字查询栏的更多相关文章

  1. robotframework实战三--自定义关键字

    在rf的实战1中,我的登录获取验证码就使用了自定义关键字,具体怎么做的,如下 1.新建文件夹 新建一个文件夹,我的MyLibrary,并且存放在site-packages下 2.编写代码 在pytho ...

  2. 使用AJAX做关键字查询：输入框变化自动搜索、无刷新页面;

    使用AJAX做关键字查询要求:1.无刷新页面2.输入框变化自动搜索 <style type="text/css"> .k{ width:150px; height:30 ...

  3. 通过用 .NET 生成自定义窗体设计器来定制应用程序

    通过用 .NET 生成自定义窗体设计器来定制应用程序 https://www.microsoft.com/china/MSDN/library/netFramework/netframework/Cu ...

  4. 使用位图字体工具BMFont从图片生成自定义字体

    转载自:http://blog.csdn.net/keshuiyun/article/details/9960667 BMFont下载地址: http://www.angelcode.com/prod ...

  5. 多测师讲解自动化测试 _RF自定义关键字_高级讲师肖sir

    RF自定义关键字 在rf中叫关键字 在python中就叫做函数 或实例方法 我们自己可以写自定义关键字 自己创建一个库===库里面去创建模块===模块里面创建类和实例方法==>rf导入和引用 库 ...

  6. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  7. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  8. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  9. 自定义iOS7导航栏背景,标题和返回按钮文字颜色

    在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...

随机推荐

  1. 浅谈BFC的理解

    在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...

  2. 983. Minimum Cost For Tickets

    网址:https://leetcode.com/problems/minimum-cost-for-tickets/ 参考:https://leetcode.com/problems/minimum- ...

  3. angular学习3

    #创建了一个component 查看angular.json文件: "prefix":"app", 在所创建的component的selector上添加了app ...

  4. net.js

    var http = require('http'); var https = require('https'); var url=require("url"); var pass ...

  5. struts标签怎么判断request里的属性是否为空 <s:if test="${list==null}"> </s:if>

    <s:if test="${weigou}==999"> //错误的 ${list==null} ,$实在strtus的配置文件中取值用的,不是在jsp页面里取值的的吧 ...

  6. Angular2+URL中的 # 引发的思考

    1.先分析 # 的作用 1.1. # 的涵义 #代表网页中的位置.其右面的字符就是该位置的标识符.比如,http://www.example.com/index.html#print就代表网页inde ...

  7. day24_python_1124

    1  复习 2  TCP-UDP协议 3  tcp协议的socket 4  复杂tcp协议的socket 5  带退出的聊天程序 6  时间练习demo 7  粘包现象 1.复习 # 网络编程概念# ...

  8. springmvc核心技术

    目录 异常处理 类型转换器 数据验证 文件上传与下载 拦截器 异常处理 Spring MVC中, 系统的DAO, Service, Controller层出现异常, 均通过throw Exceptio ...

  9. SharePoint CU、Hotfix和SP版本的区别

    1.Hotfix:通常是对一个特殊问题的修复包 2.CU(Cumulative Update):Hotfix的集合,包含从上一个SP(Service Pack)版本以来所有的Hotfix 3.SP(S ...

  10. C# [Win32] [API] Layered Windows

    static void* WndProc(void* hwnd, uint uMsg, void* wParam, void* lParam) { switch (uMsg) { case WM_PA ...