网站侧边栏如何添加百度搜索版块

技巧达人 2022-10-17

1683 43

教程开始

1、把以下代码放到网站适合的地方即可

<div class="searchs">
<div class="tit"><strong>百度一下</strong></div>
<mip-form method="get" url="https://www.baidu.com/s" class="mip-element mip-layout-container">
<form action="https://www.baidu.com/s" method="GET" target="_blank">

<input type="text" name="wd" validatetarget="q" validatetype="must" placeholder="请输入搜索词" value="奉上博客">
<div target="q">关键词不能为空</div><input type="submit" value="搜索">
</form>
</mip-form>
</div>
<style>
/*百度一下*/
.searchs {
background-color: #fff;
border: 1px solid #eaeaea;
padding: 15px;
overflow: hidden;
transition: all 0.3s;
border-radius: 4px;
position: relative;
margin: 0px 0px 15px 0px;
}
.mip-layout-container, .mip-layout-fixed-height {
margin: 0px 0px 0px 0px;
display: block;
position: relative;
}
mip-form form {
position: relative;
}
.searchs input[type="text"] {
border: #45B6F7 1px solid;
border-radius: 4px;
width: calc( 100% - 2px );
}
mip-form input[type='text'], mip-form input[type='input'], mip-form input[type='datetime'], mip-form input[type='email'], mip-form input[type='number'], mip-form input[type='tel'], mip-form input[type='url'] {
padding-right: 30px;
}
.searchs input {
outline: none;
}
mip-form input, mip-form textarea, mip-form select {
border: 1px solid #f1f1f1;
padding: 6px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
resize: none;
font-size: 16px;
}
mip-form div {
display: none;
color: #ec1f5c;
font-size: 12px;
text-align: left;
padding: 0 10% 0 3%;
}
.searchs input[type="submit"] {
position: absolute;
right: 2px;
top: 2px;
background-color: #45B6F7;
color: #fff;
font-size: 13px;
margin: 1px;
height: 31px;
line-height: 31px;
padding: 0 10px;
font-family: "微软雅黑";
}
mip-form input[type='submit'] {
border: 1px solid #f1f1f1;
border-radius: 5px;
color: #333;
background-color: #d8d7d7;
}
.searchs input {
outline: none;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
.tit strong {
font-weight: normal;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
/*百度一下*/
</style>

 

签名:这个人很懒,什么也没有留下!
最新回复 (43)
  • 466466 2022-10-14
    2
    牛逼(破音!)
    签名:这个人很懒,什么也没有留下!
  • 疯子雷 2022-10-14
    3
    试试
    签名:这个人很懒,什么也没有留下!
  • 目空 2022-10-14
    4
    感谢有你
    签名:这个人很懒,什么也没有留下!
  • uuuu 2022-10-14
    5
    谢谢大佬
    签名:这个人很懒,什么也没有留下!
  • xxxxxxxx 2022-10-14
    6
    牛逼了
    签名:这个人很懒,什么也没有留下!
  • 污秽邪祟 2022-10-14
    7
    谢谢
    签名:这个人很懒,什么也没有留下!
  • qwe8864022 2022-10-14
    8
    感谢分享!!!
    签名:这个人很懒,什么也没有留下!
  • LULUK 2022-10-14
    9
    看看
    签名:这个人很懒,什么也没有留下!
  • wangyan 2022-10-14
    10
    666
    签名:这个人很懒,什么也没有留下!
  • 花散天幕 2022-10-14
    11
    看了楼主的贴,一顿能吃三大碗!
    签名:这个人很懒,什么也没有留下!
  • QQXXJK 2022-10-14
    12
    666
    签名:这个人很懒,什么也没有留下!
  • 周振君 2022-10-14
    13
    哈哈,不错哦
    签名:这个人很懒,什么也没有留下!
  • ayiwang 2022-10-14
    14
    太强了
    签名:这个人很懒,什么也没有留下!
  • 戊辰 2022-10-14
    15
    哈哈,不错哦
    签名:这个人很懒,什么也没有留下!
  • jiajia 2022-10-14
    16
    看看
    签名:这个人很懒,什么也没有留下!
  • zanelzl 2022-10-15
    17
    赞一个
    签名:这个人很懒,什么也没有留下!
  • 院院 2022-10-17
    18
    应该可以
    签名:这个人很懒,什么也没有留下!
  • crazycatseven 2022-10-17
    19
    感谢分享
    签名:这个人很懒,什么也没有留下!
  • wang905575124 2022-10-19
    20
    楼主好人
    签名:这个人很懒,什么也没有留下!
返回