侧栏添加百度搜索

2024-08-24 08:45:32 浏览数 (3)

效果图

效果图效果图
第一步

外观-自定义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>

1 人点赞