纯HTML+CSS实战之百度搜索框实例

小韩同学哇

于 2019-01-14 09:27:46 发布

阅读量9.6k

点赞数 3

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.youkuaiyun.com/qq_41886761/article/details/86467032

版权

本文通过HTML和CSS展示了如何实战创建一个类似百度搜索框的效果，包括布局、样式设计和交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如图所示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css制作搜索框</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
        }
        .x{
            display: inline-block;
            margin-top: 200px;
            margin-left: 300px;
            position: relative;
        }
        .k{
            width: 536px;
            height: 38px;
            border: 1px solid #cccccc;
            float: left;
            box-sizing: border-box;
        }
        .n{
            width: 102px;
            height: 38px;
            line-height: 40px;
            float: left;
            background-color: #38f;
            font-size: 16px;
            /*鼠标悬停

最低0.47元/天解锁文章