效果图：

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. Java集合框架相关知识整理

    1.常见的集合有哪些? Collection接口和Map接口是所有集合框架的父接口    Collection接口的子接口包括:Set接口和List接口    Map接口的实现类主要有:HashMap ...

  2. Bootstrap4 导航栏

    Bootstrap4 导航栏 目录 Bootstrap4 导航栏 动态选项卡 标准的导航栏 导航对齐方式 导航栏的组成 ul 元素中包含navbar-nav 类 表示导航栏中ul li元素中包含nav ...

  3. 用oracle自带的ssh脚本配置互信

    ./sshUserSetup.sh -user 用户名 -hosts "主机名1 主机名2 主机名3 ..." -advanced -noPromptPassphrase   这个 ...

  4. vmware三种网络模式的工作原理及配置详解

    vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开vmware虚拟机,我们可以在选项栏的“编辑”下的 ...

  5. jsp转发与重定向的区别

    1.转发的实现其实很简单,使用request的getRequestDispatch()方法得到RequestDispatch对象,然后在括号里放转发的地址,然后用这个对象调用forward()方法,里 ...

  6. Oracle单机Rman笔记[3]---RMAN脱机备份及命令基础介绍

    A.NOARCHIVELOG模式下的物理备份 1.完全关闭数据库 2.备份所有的数据库文件.控制文件.联机重做日志 3.重新启动数据库 B.RMAN的体系结构概述 重新构建控制文件: 将控制文件备份为 ...

  7. node.js安装express模块应用服务框架

    1.创建工程文件夹case-04 2.在终端窗口进入文件夹目录,并输入:npm init,并一路回车,最后看到在case-04文件夹里自动生成了package.json 文件 3.打开vscode,进 ...

  8. WebService调用SSAS教程

    WebService调用SSAS教程 一.创建SSAS项目 使用SQL Server Business Intelligence Development Studio新建Analysis Servic ...

  9. 从零开始 —— Canvas（一）

    从零开始-Canvas 1.颜色.样式和阴影 属性 a.fillStyle(设置或返回用于填充绘画的颜色.渐变或模式) 语法:context.fillStyle = color(颜色值) | grad ...

  10. 《程序设计入门——C语言》翁恺老师 第一周编程练习记录

    1 输出“Hello World”(5分) 题目内容: 请输出一行,内容为 Hello World 请注意大小写. 由于这一周只是简单地介绍了C程序的基本框架,还不能做很多事情,甚至还不能做数据的输入 ...