效果图：

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. 毕设记录（ajax第一次请求失败，之后成功的问题）

    解决方法:将button标签的type属性改为button,而不是submit,将会解决此问题,至于原因,,,还是没太搞清楚..

  2. Android 工程越来越大，运行变卡解决方法

    打开AS的安装目录 android-studio/bin/studio.exe.vmoptions studio64.exe.vmoptions -Xms2048m-Xmx2048m-XX:Reser ...

  3. react和vue的不同

    React严格上只针对MVC的view层,Vue则是MVVM模式 virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时 ...

  4. (04) springboot 下的springMVC和jsp和mybatis

    1. springboot 和springmvc下的注解完全一样(新增了一些有用的) 常用的注解如下: @Controller @RestController= @Controller + @Resp ...

  5. 苹果手机的SB系列（1）听不懂人话的sir

    写在前面,因手买错了(至于怎么买错了不解释)手机才买了一个苹果,价格不扉,但实在让人很不爽．记下了SB的点点． Sir听不懂人话,我让他查非洲安哥拉的时间,却屡次返回美国安哥拉洲的时间,很自恋．

  6. Abp.vNext 权限备注

    Abp 内部是基于 asp.net core 基于 策略的  授权方式,每个权限为一个策略 权限分为: 1.定义权限(先定义权限组,后添加权限),每个模块都应该创建一个PermissionDefini ...

  7. linux图像界面连接-xdm

    有两种方法可以激活 --:修改/etc/gdm/custom.conf文件在 [security]字段下增加AllowRemoteRoot=true [xdmcp]字段下增加Enable=true - ...

  8. lr-web services协议

    1.web services协议简介 web services协议是建立可交互操作的分布式应用程序的新平台,它通过一系列标准和协议来保证程序之间的动态链接,其中最基本的协议包括soap,wsdl,ud ...

  9. poj1721

    题解: 直接暴力循环节 然后再做几次 代码: #include<cstdio> #include<cstring> #include<algorithm> #inc ...

  10. C# [LINQ] Linq Expression 获取多格式文件

    using System; using System.IO; using System.Linq; using System.Linq.Expressions; internal static str ...