网页制作-搜索框

作者: Jay_ZJ | 来源:发表于2020-05-06 16:54 被阅读0次

网页制作-搜索框
网页搜索框实现
提高你办公效率的冷门软件
2018-12-28css制作简洁实用搜索框样式代码
网页和网页结构学习（HTML）
2016做好搜索引擎优化SEO需要注意的9点
Python学习笔记(19)自动搜索关键词采集信息—以京东为例
让跳转的页面在整个窗口(父框架)中打开</a></li><li><a href="#r9">今天带你们用python爬虫，爬取最新更新的小说网站</a></li><li><a href="#r10">工具类网站合集</a></li></ol></div> <h3>结构</h3> <ul> <li>搜索框盒子</li> <li>左侧input输入框</li> <li>右侧button按钮</li> </ul> <pre><code><div class="search"> <input type="text" name="" id="" value="输入关键词"> <button></button> </div> </code></pre> <h3>样式</h3> <ol> <li>搜索框盒子</li> </ol> <ul> <li>浮动</li> <li>宽高</li> </ul> <pre><code>.search { float: left; width: 412px; height: 42px; } </code></pre> <ol start="2"> <li>输入框</li> </ol> <ul> <li>浮动</li> <li>宽高除去边框</li> <li>除去右边框</li> <li>设置文字左缩进</li> </ul> <pre><code>.search input { float: left; width: 360px; height: 40px; color: #bfbfbf; font-size: 14px; text-indet: 15px border: 1px solid #00a4ff; border-right: 0; } </code></pre> <ol start="3"> <li>按钮</li> </ol> <ul> <li>浮动 (行内块元素间有间隙，需要浮动）</li> <li>宽高加上输入框的边框</li> <li>去掉边框</li> <li>加背景图片或加问题，背景等</li> </ul> <pre><code>.search button { float: left; width: 50px; height: 42px; border: 0; /* background: url(images/search.png); */ background-color: #00a4ff; } </code></pre> <h3>效果</h3> <img src="https://img.haomeiwen.com/i14940563/ef83382371bd9e40.png"> search.png </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/xsxbkxtx.html"><img src="https://img.haomeiwen.com/us14940563/e2edd814-f4b8-40c3-ae22-35df6666b491" width="80"></a><h3><a href="/subject/jivwghtx.html">网页制作-搜索框</a></h3><p>结构搜索框盒子左侧input输入框右侧button按钮样式搜索框盒子浮动宽高输入框浮动宽高除去...</p></li><li id="r2"><a href="/user/skzslxtx.html"><img src="https://img.haomeiwen.com/us15290611/3c9f525a-b037-4302-8cd7-a69e96e7d563.jpg" width="80"></a><h3><a href="/subject/driicqtx.html">网页搜索框实现</a></h3><p>趁着热情未减，赶紧的写下自己的第一篇简书。今天要分享的是如何利用 html + css 写出一个令自己满意的搜索框...</p></li><li id="r3"><a href="/user/rcbgkttx.html"><img src="https://img.haomeiwen.com/ud/8-a356878e44b45ab268a3b0bbaaadeeb7.jpg" width="80"></a><h3><a href="/subject/orpnhxtx.html">提高你办公效率的冷门软件</a></h3><p>1、Listary 快速查找本机各类文件，双击Ctrl 键，即可调出搜索框，可以直接在搜索框搜索关键词，直达网页。...</p></li><li id="r4"><a href="/user/aybmbttx.html"><img src="https://img.haomeiwen.com/us8519314/f7655296-c7d6-408e-8be9-3ffae8d43e6a.jpg" width="80"></a><h3><a href="/subject/vyqelqtx.html">2018-12-28css制作简洁实用搜索框样式代码</a></h3><p>css制作简洁实用搜索框样式代码如下：</p></li><li id="r5"><a href="/user/qtpoittx.html"><img src="https://img.haomeiwen.com/is9096935/69b9bd0ffeb84b8f.png" width="80"></a><h3><a href="/subject/mkklsqtx.html">网页和网页结构学习（HTML）</a></h3><p>学习目的认识网页的基本组成和标准熟悉 HTML 的组成结构 1、认识网页网页组成：由文字、图片、按钮、搜索框...</p></li><li id="r6"><a href="/user/wzjnkttx.html"><img src="https://img.haomeiwen.com/ud/9-cceda3cf5072bcdd77e8ca4f21c40998.jpg" width="80"></a><h3><a href="/subject/diccpttx.html">2016做好搜索引擎优化SEO需要注意的9点</a></h3><p>1、网站的可访问性正确做法搜索框网页中设置搜索框，并保证功能到位内链适当的网站内链建设不止有利于用户的浏览，...</p></li><li id="r7"><a href="/user/cmjdpxtx.html"><img src="https://img.haomeiwen.com/is18901380/8afc49e2ed4d416b.png" width="80"></a><h3><a href="/subject/vverjctx.html">Python学习笔记(19)自动搜索关键词采集信息—以京东为例</a></h3><p>一、操作步骤如果网页上有搜索框，但是搜索结果页面没有独立网址，想要采集搜索结果，直接做规则是采集不到的，要先做连...</p></li><li id="r8"><a href="/user/hzaxmttx.html"><img src="https://img.haomeiwen.com/us7346071/4583d293-392a-4a32-9def-a6b9c56c81b5.jpg" width="80"></a><h3><a href="/subject/hvshlctx.html">让 <iframe> 跳转的页面在整个窗口(父框架)中打开</a></h3><p>问题描述因为网页头部header(包含导航栏和搜索框) 在很多网页都重复，所以单独写为一个header.html...</p></li><li id="r9"><a href="/user/sfewbxtx.html"><img src="https://img.haomeiwen.com/is20466639/a2d7e4341f772136.png" width="80"></a><h3><a href="/subject/udaqwltx.html">今天带你们用python爬虫，爬取最新更新的小说网站</a></h3><p>百度搜索请求我们通过百度网页的搜索框进行搜索时，提交的url请求是这样的： https://www.baidu....</p></li><li id="r10"><a href="/user/jrdftttx.html"><img src="https://img.haomeiwen.com/us41454/86c74846-3b3f-4f65-8037-19509bd678ca.jpg" width="80"></a><h3><a href="/subject/fciktftx.html">工具类网站合集</a></h3><p>1，指数类网页微博指数阿里指数微信指数，需要在微信搜索框里搜索“微信指数”，可以看到百度指数对应搜索量，...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">网页制作-搜索框</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/jivwghtx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/qmvwghtx.html">【简间填文】一碗朗空风清</a></li><li><a class="meiwen" href="/subject/wpvwghtx.html">linux 查看服务器序列号(S/N)</a></li><li><a class="meiwen" href="/subject/vpvwghtx.html">书法作品写完后发现少了一个字是一种什么体验？</a></li><li><a class="meiwen" href="/subject/muvwghtx.html">阴天</a></li><li><a class="meiwen" href="/subject/yuvwghtx.html">对牛弹琴是什么感觉？</a></li><li><a class="meiwen" href="/subject/kuvwghtx.html">《一个人的朝圣》第二章阅读感悟（含笔记）</a></li><li><a class="meiwen" href="/subject/fuvwghtx.html">实现一个美化原生拖拽的draggable-polyfill</a></li><li><a class="meiwen" href="/subject/zyvwghtx.html">表单验证规则</a></li><li><a class="meiwen" href="/subject/ayvwghtx.html">2020年5月6日&7日第八章 Python第三方库安装及常用</a></li><li><a class="meiwen" href="/subject/nyvwghtx.html">万绿丛中一点亮</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/jivwghtx.html">网页制作-搜索框</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>