html 源码_HTML实例之搜索栏(附源码)
1. 简书类
实现效果
程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com
html代码
<div class="container">
<form action="" class="parent">
<input type="text" class="search" placeholder="搜索">
<input type="button" name="" id="" class="btn">
</form>
</div>
css代码
* {
margin: 0;
padding: 0;
}
.container {
height: 70px;
width: 800px;
margin: 100px auto 0 auto;
}
.parent {
position: relative;
}
.search {
width: 300px;
height: 40px;
border-radius: 18px;
outline: none;
border: 1px solid #ccc;
padding-left: 20px;
position: absolute;
}
.btn {
height: 35px;
width: 35px;
position: absolute;
background: url("images/topbar.png") no-repeat -2px -99px;
top: 6px;
left: 285px;
border: none;
outline: none;
cursor: pointer;
}
2. 百度类
实现效果
html代码
<div class="container">
<form action="" class="parent">
<input type="text">
<input type="button" value="百度一下">
</form>
</div>
css代码
.container {
width: 500px;
height: 50px;
margin: 100px auto;
}
.parent {
width: 100%;
height: 42px;
top: 4px;
position: relative;
}
.parent>input:first-of-type {
/*输入框高度设置为40px, border占据2px,总高度为42px*/
width: 380px;
height: 40px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
.parent>input:first-of-type:focus {
border: 1px solid #317ef3;
padding-left: 10px;
}
.parent>input:last-of-type {
/*button按钮border并不占据外围大小,设置高度42px*/
width: 100px;
height: 44px;
position: absolute;
background: #317ef3;
border: 1px solid #317ef3;
color: #fff;
font-size: 16px;
outline: none;
}
重点:
1.当input框foucus时,border颜色改变,而不是保留outline
2.button按钮默认box-sizing: border-box
.container {
width: 500px;
height: 50px;
margin: 100px auto;
}
.parent {
width: 100%;
height: 42px;
top: 4px;
position: relative;
}
.parent>input:first-of-type {
/*输入框高度设置为40px, border占据2px,总高度为42px*/ width: 380px;
height: 40px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
.parent>input:first-of-type:focus {
border: 1px solid #317ef3;
padding-left: 10px;
}
.parent>input:last-of-type {
/*button按钮border并不占据外围大小,设置高度42px*/ width: 100px;
height: 44px;
position: absolute;
background: #317ef3;
border: 1px solid #317ef3;
color: #fff;
font-size: 16px;
outline: none;
}
html 源码_HTML实例之搜索栏(附源码)相关推荐
- ⭐️Python实用小工具之制作酷炫二维码(有界面、附源码)⭐️
镇楼图 文章目录 写在前面 制作二维码 安装myqr库 myqr.run()参数详解 制作普通二维码 制作黑白背景二维码 制作彩色背景二维码 制作大边长二维码 制作动态二维码 解析二维码 tkinte ...
- php拼音模糊查询,PHP模糊查询技术实例分析【附源码下载】
本文实例讲述了PHP模糊查询技术.分享给大家供大家参考,具体如下: 简介 从本质上揭密PHP模糊查询技术 功能 根据输入的关键字查找相关用户 PHP用户查询器案例分析 课程目标 掌握PHP模糊技术的应 ...
- Android串口通信实例分析【附源码】
Android 串口通信实例分析,用的时开源的android-serialport-api 这个是用android ndk实现的串口通信,我把他做了一个简化,适合于一般的程序的串口通信移植,欢迎拍砖- ...
- 小程序获取城市行政区号_微信小程序 省市区选择器实例详解(附源码下载)
微信小程序 省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换 思路是:拿当前的c ...
- 多人对战小游戏快速开发实例分享(附源码)
前言:该游戏项目主要是基于前端引擎Cocos Creator开发,涉及后端联网的部分,则通过接入Matchvs SDK完成快速开发工作. 准备工作:相关引擎工具引擎下载及指南 Matchvs Java ...
- PHP密码生成管理源码,php密码生成类(附源码)
本节内容: 好用的php 密码生成类. 访代码实现的功能: 1,可设定密码长度. 2,可设定要生成的密码个数,批量生成. 3,可以指定密码的规则,字母,数字,特殊字符等. 1,密码生成类文件 Gene ...
- 原创:微信小程序源码解说:石头剪刀布(附源码下载)
我的博客:来源链接 昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了. JS: var numAi = 0 var timer ...
- 石头剪刀布代码android,微信小程序源码解说:石头剪刀布(附源码下载)
var numAi = 0 var timer Page({ data:{ //控制按钮是否可点击 btnState:false, //记录获胜次数 winNum:0, //中间的话"Ho~ ...
- 石头剪刀布php源码,原创:微信小程序源码解说:石头剪刀布(附源码下载)
昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了. JS: var numAi = 0 var timer Page({ da ...
最新文章
- 最好的程序界面就是用户无需去阅读操作手册就知道该如何使用的界面
- 程序员的十大谎言,你中了几个? | 每日趣闻
- 算法-从先序遍历还原二叉树
- Java-POI操作excel遇到文本字符问题处理
- Django整理(二) - 视图和模板的初步使用
- oracle 11g如何完全卸载
- 风格迁移应用_进展丨图像也能做情感迁移?罗切斯特大学团队提出计算机视觉新任务...
- easyui datagrid 表头与数据错位
- 使用WildFly 8在Java EE7中自举Apache Camel
- Java通用流行框架大全,绝对干货
- 【SpringBoot】 logback 日志的集成
- WinAPI: midiOutSetVolume - 设置 MIDI 输出设备的音量
- java线程知识点拾遗(排队CAS)
- Oracle数据库用户密码过期
- rest assured
- Docker关闭容器命令(docker stop)
- app提现至微信(微信企业付款到个人微信号)
- ORACLE FORMS BUILDER的布局和常用ITEMS
- python 语音识别培训使用Python和Keras创建简单语音识别引擎
- 风车动漫服务器维修要多长时间,风车动漫APP是什么样的软件?风车动漫APP出现打不开的具体处理方法...
热门文章
- 【剑指Offer】最小的k个数---大顶堆 Java
- IT十年人生过客-十五-回京
- 基于msf与badusb的笔记本电脑渗透测试(详解)
- java验证xml格式是否正确的是_java判断文件是否为xml格式的方法
- 一碗阳春面(一碗清汤荞麦面)
- 计算机音乐数字谱抖音,抖音计算器谱子有哪些?计算器音乐乐谱大全
- 普通话测试软件字体怎么调整,新版普通话测试管理系统的几个常见问题
- LTE FDD PSS/SSS/MIB时频资源位置
- 闲聊弹幕网站背后的用户需求和心理动机
- Java Elasticsearch | updated host [http://xxxx:9200] already in blacklist