前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >侧栏添加百度搜索

侧栏添加百度搜索

作者头像
oscool资源分享
发布2024-08-24 08:45:32
850
发布2024-08-24 08:45:32
举报
文章被收录于专栏:oscool资源分享

效果图

效果图
效果图
第一步

外观-自定义CSS

代码语言:javascript
复制
                .baidu-dwo{
                width: 100%;
                padding-bottom: 6px;
            }
            .baidu-dwo_form{
                position: relative;
                box-sizing: border-box;
                border: 1px solid var(--theme);
                border-radius: 4px; 
                margin-bottom:5px;
                overflow: hidden;
            }
            .baidu-dwo_input{ 
                border: none;
                font-size: 16px!important;
                font-weight: 100!important;
                color: var(--main);
                outline: none;
                border-radius: 0; 
                padding: 9px 8px;
                margin-bottom: -2px;
                background-color: transparent!important;
            }
            .baidu-dwo_input:focus{
                outline: none;
            }
            .baidu-dwo_submit{
                position: absolute;
                right:2px ;
                top: 50%;
                transform: translateY(-50%);
                box-sizing: border-box;
                border: none;
                border-radius: 4px;
                background-color: var(--theme);
                color: #ffffff;
                padding: 6px 8px;
                cursor: pointer;
            }
            .baidu-dwo_tip{
                font-size: 13px;
                color: var(--minor);
            }
第二步

侧边栏-自定义侧边栏

代码语言:javascript
复制
<section class="joe_aside__item qrcode">
	<div class="joe_aside__item-contain" style="padding-bottom: 10px;">
	   <div class="baidu-dwo">
		  <form class="baidu-dwo_form" action="https://www.baidu.com/s"
			  method="GET" target="_blank">
			  <input class="baidu-dwo_input" type="text" name="wd"
				  validatetarget="q"
				  validatetype="must"
				  placeholder="关键词:OS酷资源分享" value="OS酷资源分享">
			  <input class="baidu-dwo_submit" type="submit" value="搜索">
		  </form>
	   </div>		  
	</div>
</section>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024年08月20日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档