css搜索框如何实现
这篇文章将为大家详细讲解有关css搜索框如何实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。成都创新互联公司专业提供成都网站建设、成都网站设计,网页设计,网站制作(企业站、响应式网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!
css实现搜索框的方法:首先组织页面结构;然后使用placeholder来进行文本框注释;接着设置搜索按钮;最后重置页面的默认外边距与内边距,并设置搜索框的外边框样式即可。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
css搜索框怎么写?
使用p+css实现如图所示搜索框效果:
分析:
1.使用markman对原图进行宽度、高度、颜色等方面的分析,如下图:
2.分析元素:
该搜索框主要构成:input文本框、button按钮、按钮左侧一个三角形的指示符号;
实现:
先组织页面结构:
文本框,使用placeholder来进行文本框注释:
搜索按钮:
三角形指示符号:从示例图上看这个三角形符号是与按钮融合的,因此我们初步确定将它做为按钮内部元素,使用定位的方式来实现
样式设计:
先重置页面的默认外边距与内边距:
*{ margin:auto; padding:0; }
设置类form的样式:
.form{ width: 454px; height: 42px; background:rgba(0,0,0,.2); padding:15px; border:none; border-radius:5px; }
设置搜索框的外边框样式,设置透明度,去掉外边框线,设置边框弧度:
background:rgba(0,0,0,.2); border:none; border-radius:5px;
设置input输入框的样式:
input{ width: 342px; height: 42px; background-color: #eeeeee; border:none; border-top-left-radius:5px; border-bottom-left-radius:5px; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; font-style:italic; }
边框弧度也可简写成:
border-radius:5px 0 0 5px;
设置字体样式:
style-style:italic
还有其他属性值:
属性值 | 描述 |
---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
按钮样式:
button{ width:112px; height: 42px; background-color:#d93c3c; color:#fff; border:none; border-radius:0 5px 5px 0; position: relative; }
注意,这里使用了相对定位:
position: relative;
作用是用来帮助指示三角形的位置;
指示三角形的样式:
.t{ border-width:6px; border-style:solid; border-color: transparent #d93c3c transparent transparent; position: absolute; right:100%; }
这个元素使用绝对定位,将其的y坐标从右往左的参考元素的100%边框位置上,x坐标不设置,则默认为0:
position: absolute; right:100%;
制作三角形指示符号的步骤:
定义三角的span元素:
制作四色边框:
.triangle { display: inline-block; border-width: 100px; border-style: solid; border-color: #000 #f00 #0f0 #00f; }
border-color 四个值依次表示上、右、下、左四个边框的颜色。
需要哪个方向的三角形,就将其他3个三角形设为透明即可
border-color: #000 transparent transparent transparent;
不使用span,使用伪类直接定位三角形的位置,则在删除掉三角形的span元素和样式,直接在按钮元素的样式上增加before,完整代码如下:
Document
关于“css搜索框如何实现”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网页名称:css搜索框如何实现
分享URL:http://pwwzsj.com/article/jjcegd.html