AI摘要
本文介绍了如何通过自定义CSS和HTML代码来创建一个具有搜索功能的侧边栏，包括搜索框、按钮和样式切换功能。代码示例详细展示了如何设置样式和添加交互效果，以提升用户体验。
自定义CSS：
.joe_aside__item.qrcode { width: 100%; } .joe_aside__item-contain { padding: 0; } .baidu-dwo { width: 100%; padding-bottom: 0; } .baidu-dwo_form { position: relative; box-sizing: border-box; border: 2px solid #e0e0e0; border-radius: 60px; margin-bottom: 18px; overflow: hidden; background: white; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(78, 110, 242, 0.1); } .baidu-dwo_form:focus-within { border-color: #4e6ef2; box-shadow: 0 5px 20px rgba(78, 110, 242, 0.2); } .baidu-dwo_input { border: none; font-size: 17px !important; font-weight: 400 !important; color: #333; outline: none; border-radius: 0; padding: 18px 25px; margin-bottom: 0; background-color: transparent !important; width: calc(100% - 120px); transition: all 0.3s ease; } .baidu-dwo_input:focus { outline: none; } .baidu-dwo_input::placeholder { color: #aaa; font-weight: 300; } .baidu-dwo_submit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); box-sizing: border-box; border: none; border-radius: 50px; background: linear-gradient(90deg, #4e6ef2, #2a4dd0); color: #ffffff; padding: 12px 28px; cursor: pointer; font-weight: 500; font-size: 16px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 10px rgba(78, 110, 242, 0.3); } .baidu-dwo_submit:hover { background: linear-gradient(90deg, #3a56d8, #1a3bb8); transform: translateY(-50%) scale(1.03); box-shadow: 0 6px 15px rgba(78, 110, 242, 0.4); } .baidu-dwo_tip { font-size: 14px; color: #777; text-align: center; padding: 8px 0; display: flex; justify-content: center; align-items: center; gap: 8px; } .features { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 25px; justify-content: center; } .feature { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #444; transition: all 0.3s ease; } .feature:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .feature i { color: #4e6ef2; font-size: 18px; } .preview { display: flex; flex-direction: column; align-items: center; padding: 30px; background: white; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); max-width: 500px; width: 100%; } .preview-title { font-size: 1.5rem; margin-bottom: 25px; color: #2a4dd0; text-align: center; } .style-options { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 25px; } .style-btn { padding: 10px 20px; border-radius: 50px; border: none; background: #eef2ff; color: #4e6ef2; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .style-btn:hover { background: #4e6ef2; color: white; } .style-btn.active { background: #4e6ef2; color: white; } .footer { margin-top: 50px; text-align: center; color: #777; font-size: 14px; padding: 20px; max-width: 800px; } @media (max-width: 768px) { .header h1 { font-size: 2.2rem; } .container { flex-direction: column; align-items: center; } .card { max-width: 100%; } }自定义侧边栏：
<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="输入关键词搜索..." value="woliblog">
<button class="baidu-dwo_submit" type="submit">
<i class="fas fa-search"></i> 搜索
</button>
</form>
<div class="baidu-dwo_tip"> <script>
// 添加简单的交互效果
const searchInput = document.querySelector('.baidu-dwo_input');
const searchForm = document.querySelector('.baidu-dwo_form');
searchInput.addEventListener('focus', () => {
searchForm.style.boxShadow = '0 5px 20px rgba(78, 110, 242, 0.25)';
searchForm.style.borderColor = '#4e6ef2';
});
searchInput.addEventListener('blur', () => {
searchForm.style.boxShadow = '0 4px 15px rgba(78, 110, 242, 0.1)';
searchForm.style.borderColor = '#e0e0e0';
});
// 模拟样式切换
const styleButtons = document.querySelectorAll('.style-btn');
styleButtons.forEach(button => {
button.addEventListener('click', () => {
styleButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
});
});
</script>效果图：
评论 (0)