前端基础学习-（2）京东搜索框

最新推荐文章于 2024-01-17 10:28:52 发布

原创

最新推荐文章于 2024-01-17 10:28:52 发布 · 3.4k 阅读

标签

#css #css3 #html

收录于

本文介绍了前端小白在学习过程中的一个实践案例——京东搜索框的实现。涉及到的技术包括浮动布局(float)、定位(position)、垂直水平居中、图标引用等。通过HTML和CSS代码展示了搜索框、拍照按钮、搜索按钮以及购物车和关键词列表的样式设计和交互效果。

前端基础学习-（2）京东搜索框

作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了浮动(float)、定位(position)、垂直水平居中、图标引用等知识。

实现效果

在这里插入图片描述

代码实现

html代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东搜索框</title>
    <link rel="stylesheet" href="../CSS/fontawesome-free-5.12.1-web/css/all.min.css">
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/京东搜索框.css">
</head>

<body>
    <div class="search_wrapper">
        <div class="search">
            <input class="search_input" type="text" placeholder="派克钢笔">
            <a href="#"><i class="fas fa-camera"></i></a>
            <span class="search_do">
                <