效果图：

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. js浮点数运算精度问题

    https://www.cnblogs.com/yadongliang/p/9067333.html

  2. OLLVM特性、使用原理

    一.OLLVM特性 目前ollvm支持的特性有以下几种: 指令替换 -mllvm -sub 虚假控制流 -mllvm -bcf 打平控制流 -mllvm -fla 函数(Funtions)注解 二.指 ...

  3. 2n字符

    有2n字符挨个排成一排,前n个是'1',后n个是'0'.如 11110000(此时2n=8),现在交换字符的位置,使之按照 10101010 的模式排列.而且要使字符移动的次数最少,编程计算最少的移动 ...

  4. Redhat 6.3上安装libssh

    遇到了很多坑,决定记录下来,有些经验还是很有帮助的. 最重要的一条就是:安装rpm包,总是比编译源码安装(make&make install)更快.记住两个rpm网站:https://pkgs ...

  5. vue-cli（vue脚手架） 简单使用

    1.vue-cli 作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. 2.vue-cli 使用 a. 安装全局vue-cli npm install v ...

  6. fibos开发踩坑集合

    fibos.js API资料: 与eosjs相比,fibos.js没有添加新功能,可以在eosjs项目页面https://developers.eos.io/eosio-nodeos/referenc ...

  7. js 浏览器判断

    获取浏览器类型 function getBrowser() { var userAgent = navigator.userAgent //取得浏览器的userAgent字符串 var isOpera ...

  8. js 数据处理

    开发过程中经常遇到 1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12} ...

  9. mybatis源码解析之Configuration加载（一）

    概要 上一篇,我们主要搭建了一个简单的环境,这边我们主要来分析下mybatis是如何来加载它的配置文件Configuration.xml的. 分析 public class App { public ...

  10. windows openssl-1.1.1 编译静态库和动态库

    一下为windows上安装过程 1.下载 openssl-1.1.0.tar.gz 2.安装 ActivePerl, 可以到http://www.activestate.com/activeperl/ ...