侧边栏加入一个帮助网站SEO的小工具

该帖子部分内容已隐藏
付费阅读
20积分
百度一下-协助本站SEO
搜索
/* 组件基础样式 */
.search-widget {
width: 100%;
margin: 10px 0;
transition: all 0.3s;
}
/* 顶部横幅样式 - 修改部分 */
.banner {
background: #FE3459; /* 改为指定的红色 */
color: white;
padding: 12px;
text-align: left; /* 文字左对齐 */
border-radius: 4px 4px 0 0;
font-size: 14px;
}
/* 搜索区域布局 */
.search-container {
display: flex;
gap: 8px;
padding: 12px;
background: inherit;
border-radius: 0 0 4px 4px;
border: 1px solid #dfe1e5;
}
/* 输入框样式 */
#searchInput {
flex: 1;
padding: 8px 12px;
border: 1px solid #dfe1e5;
border-radius: 4px;
font-size: 14px;
background: inherit;
color: inherit;
}
/* 按钮基础样式 - 修改部分 */
button {
padding: 8px 16px;
background: #0066FF; /* 改为指定的蓝色 */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
/* 按钮悬停效果 - 修改部分 */
button:hover {
background: #0047B3; /* 对应深蓝色 */
}
/* 暗黑模式适配 */
body.dark-mode .search-container {
border-color: #5f6368;
background: #202124;
}
body.dark-mode #searchInput {
background: #303134;
border-color: #5f6368;
color: #e8eaed;
}
/* 保持暗黑模式按钮原样式 */
body.dark-mode button {
background: #8ab4f8;
color: #202124;
}
body.dark-mode button:hover {
background: #aecbfa;
}
// 搜索功能保持不变
function handleSearch() {
const keyword = document.getElementById('searchInput').value;
window.open(
`https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`,
'_blank'
);
}
看到墨星博客上有一个,那就试着也搞一个。至于有没有人点击,点击了对于SEO有没有用我也不知道
演示地址:海康守蔚抓拍显示一体机DS-TMC2A1-D更换臻识相机模组以及屏卡教程