效果图：

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. 《BUG创造队》第一次作业：团队亮相

    项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 第五次实验 团队名称 BUG创造队 作业学习目标 通过本次项目了解并熟悉团队开发的过程 关于我们 -我们的队名:BUG创造队 ...

  2. PHP类的反射和依赖注入

    /** * Class Point */ class Point { public $x; public $y; /** * Point constructor. * @param int $x ho ...

  3. 微信小程序----用户拒绝授权,重新调起授权

    获取用户信息 wx.getUserInfo({ withCredentials: true, success: function (res) { var nickName = res.userInfo ...

  4. .NET controller传给view的bool类型

    问题: 在view中访问该变量是False,不是字符串,也不是bool类型的false. 解决方法: controller: ViewBag.Test = false; view中得到false值: ...

  5. iOS 性能优化总结

    卡顿产生的原因 在 VSync信号到来后,系统图形服务会通过 CADisplayLink等机制通知 App,App主线程开始在 CPU中计算显示内容,比如视图的创建.布局计算.图片解码.文本绘制等.随 ...

  6. REST（Representational state transfer）的四个级别以及HATEOAS介绍

    Rest RES(Representational state transfer):表现层状态转移.其实它省略了主语,「表现层」其实指的是「资源」的「表现层」,所以通俗来讲就是:资源在网络中以某种表现 ...

  7. messageQ 消息队列

    之后就是对MessageQ的打开,关闭, 消息的发送和接受. MessageQ_create(),MessageQ_delete(): 对消息的创建和删除. MessageQ_open(); Mess ...

  8. ES5和ES6那些你必须知道的事儿(三)

    ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...

  9. linux 查找指定进程并kill

    ps -ef | grep  php | grep -v 'grep' | awk '{print $2}'| xargs kill -9

  10. python 自动化之路

    https://www.cnblogs.com/yangliheng/category/878973.html