用HTML+CSS实现一下百度顶部的搜索框

最新推荐文章于 2024-05-05 00:23:38 发布
最新推荐文章于 2024-05-05 00:23:38 发布
阅读量9.5k 收藏 73
点赞数 9
分类专栏： 新手代码 文章标签： css html 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Quentin0823/article/details/123184824
版权

用HTML+CSS实现一下百度顶部的搜索框

原页面是这样的
原页面在这里插入图片描述
我在这里采取的是原页面的写法，用的精灵图实现，后面用的两个input框，在加一个iconfont图标加定位简单实现了一下。

这个是做出来的样子。
在这里插入图片描述
加了一个点击时让出现一个蓝色边框，也是原网页的做法。
在这里插入图片描述

不多说，直接上代码。（第一次写博客，多多包涵【抱拳】）

这是html代码部分

<body>
    <div class="top-img"></div>
    <div class="top-search">
        <div class="search-box">
            <input type="text" name="search" class="search-left">
            <span class="iconfont icon-xiangji"></span>
            <input class="search-right" type="submit" name="btn" id="su" value='百度一下'>
        </div>
    </div>
</body>

这是CSS代码。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .top-img {
            width: 420px;
            height: 131px;
            background-color: pink;
            margin: 80px auto;
            background: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png) no-repeat -60px -102px;
            zoom: .5;
        }
        
        .top-search {
            width: 680px;
            height: 45px;
            margin: 30px auto;
           
        }
        
        .search-box {
            display: flex;
            position: relative;
        }
        
        .search-left {
            width: 545px;
            height: 45px;
            border: 2px solid rgb(196, 199, 206);
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            outline-color: rgb(78, 110, 242);
        }
        
        .icon-xiangji {
            position: absolute;
            right: 150px;
            top: 12px;
            font-size: 24px;
            color: rgb(196, 199, 206);
        }
        
        .search-right {
            color: #fff;
            font-size: 18px;
            width: 110px;
            height: 49px;
            border: 0px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background-color: rgb(78, 110, 242);
        }
    </style>

可能优化的不太够，希望能有所帮助，大家有更好的写法也可以分享出来，共同学习，共同进步吖~

小杨不香菜
关注
  • 9
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
JavaScript实现百度搜索框提示(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 192
JavaScript实现百度搜索框提示(附完整源码)
HTML实例之搜索栏（附源码）
热门推荐
lin123_00的博客
05-19 5万+
1. 简书类 实现效果 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山播放器制作（思路讲解＋代码+成品效果）！：BV18p4y1Q7Y1 前端面试，跳槽必刷200+真面试
Html+css+js实战：百度搜索框样式实现
星夜的博客
11-25 2230
一、效果展示 二、代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
百度搜索框代码（有下拉提示的）
Hello World!
10-25 5260
根据不同类型的网站需求，我们一共提供三种引入方式供您选择： ·简单方式——方便的将“百度搜索框（带提示功能）”直接加入到您的网页中。 将以下代码加入到您的网页中，即可获得带有“搜索框提示”功能的百度搜索框。 HTML代码： Javascript代码： 提示： Javascript代码请添加到网页中标签的后面。 如使用utf-8编码，则需要在HTML
微信小程序之搜索框样式（带源码）
最新发布
m0_59704905的博客
05-05 1197
点击搜索框，“请输入搜索内容消失”，可输入关键字。
用html写一个搜索页面
liulang68的博客
04-18 1707
【代码】用html写一个搜索页面。
简单html页面代码分享---百度
qq_59430243的博客
02-02 1451
页面制作分享
JavaScript实现百度搜索框提示
Alanx的博客
03-21 4019
JavaScript
HTML百度搜索框实现(附源码带注释)
托尼stark的博客
05-11 3万+
1.百度类效果 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
实现百度搜索栏代码
liruichuan的专栏
02-14 9092
实现百度搜索栏代码 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">        搜索词自动完成    #search{  text-align: center;  position:relative;  }  .autocomplete{  border: 1px solid #9ACCFB;  backgr
百度搜索框怎么用HTML做,百度搜索框的基本实现
weixin_42356978的博客
06-04 5657
百度首页搜索框是这样的一个基本形式，我们搜索框里输入字符时就能显示出一些有关的联想词，如图2所示图1.png图2.png那么今天我们来写一下这种效果，不算一模一样，大概相同吧，哈哈。第一步：在html文档中搭建出类似的框架，给出类似的样式，基本页面布局实现大致一样，代码如下：百度搜索*{margin: 0;padding: 0;}.show{margin: 10px auto;width: 340...
仿百度搜索框源码
01-17
仿百度搜索框源码
百度搜索框源代码程序源码
04-13
百度搜索框源代码,支持多种风格,颜色匹配
html+css编写百度首页例子
11-30
使用`<header>`标签创建头部区域，用`<img>`标签插入百度的LOGO，`<form>`标签结合`<input>`来创建搜索框，并使用`<button>`添加提交按钮。 2. **导航栏（Navigation）**：百度首页的导航栏通常包括“新闻”、...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...
使用html写百度首页.rar
04-03
百度首页的顶部可能会有一个包含公司logo和搜索框的`<header>`，接着是一个导航菜单（`<nav>`），中间部分是主要的搜索区域（`<main>`），可能还会有新闻、图片等不同板块的`<section>`或`<article>`。 搜索框通常...
前端学习案例合集，各种前端小案例实现源码.zip
05-14
前端学习案例介绍：项目中包含了 HTML、CSS、 JavaScript、JQuery、Vue等相关学习案例。 有多个文件的案例，放在了code文件夹中。 目录 01-B站移动端首页框架仿写 02-Js实现比较两个数大小和清空 03-彩色文字 04-...
仿百度百科的页面导航效果
08-03
1. **顶部导航栏**：设计一个清晰、直观的顶部导航栏是关键，它通常包含网站的品牌标识、搜索框、用户登录注册、主要分类链接等。在代码实现上，可以使用HTML和CSS进行布局，JavaScript或jQuery处理交互，如下拉菜单...
纯HTML+CSS实战之百度搜索框实例
qq_41886761的博客
01-14 9436
 效果图如图所示：   代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯css制作搜索框&lt;/title&gt; &lt;style&gt;
H5+css3+js实现搜索框下拉列表
06-02
好的，以下是一个基本的搜索框下拉列表的实现步骤： 1. HTML结构：在HTML中创建一个输入框和一个下拉列表的容器，下拉列表的容器初始设置为隐藏状态。 ```html <div class="search-container"> <input type="text" placeholder="请输入搜索关键字"> <div class="search-list-container"> <ul class="search-list"></ul> </div> </div> ``` 2. CSS样式：设置输入框的样式和下拉列表容器的样式，下拉列表容器的初始状态设置为 `display:none` 。 ```css .search-container { position: relative; } input[type="text"] { width: 300px; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .search-list-container { position: absolute; top: 35px; left: 0; z-index: 99; width: 300px; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none; } ``` 3. JS交互：监听输入框的键盘输入事件，在输入框中输入内容时，向后台发送请求获取匹配的搜索结果，将结果渲染到下拉列表中，并将下拉列表容器设置为显示状态。 ```javascript const input = document.querySelector('input[type="text"]'); const searchListContainer = document.querySelector('.search-list-container'); const searchList = document.querySelector('.search-list'); input.addEventListener('input', function(e) { const keyword = e.target.value; if (keyword.trim()) { // 发送请求获取匹配的搜索结果 const searchResults = getSearchResults(keyword); renderSearchList(searchResults); searchListContainer.style.display = 'block'; } else { searchList.innerHTML = ''; searchListContainer.style.display = 'none'; } }); function getSearchResults(keyword) { // 向后台发送请求获取搜索结果 const results = ['搜索结果1', '搜索结果2', '搜索结果3']; return results; } function renderSearchList(results) { let html = ''; results.forEach(result => { html += `<li>${result}</li>`; }); searchList.innerHTML = html; } ``` 以上就是一个简单的搜索框下拉列表的实现方法，您可以根据自己的需求进行样式和交互的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值