xx闪购—搜索框和iconfont

最新推荐文章于 2024-07-30 08:56:47 发布

iheyu

最新推荐文章于 2024-07-30 08:56:47 发布

阅读量369

点赞数

分类专栏： html 文章标签：搜索框编写按钮加小图标引入文件

本文链接：https://blog.csdn.net/iheyu/article/details/103906189

版权

本文详细介绍了如何制作一个搜索框，包括解决样式问题，以及如何使用Iconfont添加清晰的小图标。首先，通过调整CSS解决了搜索框的样式错误，然后逐步介绍了从Iconfont官网挑选图标，下载并引入到项目中的步骤，最后展示了添加购物车图标的实现过程及其细节调整。

摘要由CSDN通过智能技术生成

1.做搜索框：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米闪购 - 小米商城</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!--把图片放到cc文件夹下，直接引入图片-->
    <link rel="stylesheet" href="css/style.css">
    <!--引入CSS的样式-->
</head>
<body>
    <div class="topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="">小米商城</a><span>|</span>
                <!--spen标签 "|"给加回来-->
                <a href="">MIUI</a><span>|</span>
                <a href="">IOT</a><span>|</span>
                <a href="">云服务</a><span>|</span>
                <a href="">金融</a><span>|</span>
                <a href="">有品</a><span>|</span>
                <a href="">小爱开放平台</a><span>|</span>
                <a href="">企业服务</a><span>|</span>
                <a href="">Select Region</a><span>|</span>
            </div>
            <div class="topbar-cart">
                <a href="">购物车<span>（0）</span></a>
            </div>
            <div class="topbar-info clearfix">
                <a href="">登录</a><span>|</span>
                <a href="">注册</a><span>|</span>
                <a href="" class="sep">消息通知</a>
             </div>
        </div>
    </div>

    <div class="header">
        <!--居中 -->
        <div class="container">
            <div class="header-logo">
                <a href="#" class="lr">小米官网</a>
            </div>
            <!-- 头部下面 的导航 -->
            <div class="header-nav">
              <!--clearfix 清浮动-->
                <ul class="nav-list clearfix">
                    <li class="nav-category">
                        <a href="">全部商品分类</a>
                    </li>
                    <li class="nav-item">
                        <a href="">小米手机</a>
                    </li>
                    <li class="nav-item">
                        <a href="">红米</a>
                    </li>
                    <li class="nav-item">
                        <a href="">电视</a>
                    </li>
                    <li class="nav-item">
                        <a href="">笔记本</a>
                    </li>
                    <li class="nav-item">
                        <a href="">空调</a>
                    </li>
                    <li class="nav-item">
                        <a href="">新品</a>
                    </li>
                    <li class="nav-item">
                        <a href="">路由器</a>
                    </li>
                    <li class="nav-item">
                        <a href="">智能硬件</a>
                    </li>
                    <li class="nav-item">
                        <a href="">服务</a>
                    </li&g