krpa 发表于 2018-8-7 10:35:15

请问,要如何在input标签内插入img?

本帖最后由 不二如是 于 2018-8-7 11:34 编辑

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
    <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
    <meta name="author" content="krpa">
    <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
    <title>小宠之家</title>
    <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
    <link rel="stylesheet" type="text/css" href="css/header-icon.css">

</head>
<body>
<!--header-->
<div id="header">
    <!--鱼油的页面-->

    <!--搜索栏-->
    <div id="searchBar">
      <img src="search.png" alt=""><inputname="searchbar" type="text" class="search" placeholder="萌图、视频、知识科普" autocomplete="off">
    </div>


</div>
<!--nav-->
<div id="nav">
    <ul>
      <li class="tuzi">
            <a href="tuzi"></a>
            <p>小兔子</p>
      </li>
      <li class="cangshu">
            <a href="canshulianjie"></a>
            <p>小仓鼠</p>
      </li>
      <li class="longmao">
            <a href="longmaolianjie"></a>
            <p>小龙猫</p>
      </li>
      <li class="helanzhu">
            <a href="荷兰猪链接"></a>
            <p>荷兰猪</p>
      </li>
    </ul>
</div>

</body>
</html>


如何实现淘宝搜索栏

不二如是 发表于 2018-8-7 11:31:40

请问,要如何在input标签内插入img?

本帖最后由 不二如是 于 2018-8-7 11:33 编辑

1、这种图标不是直接画在input中的,而是通过外面整体画一个栏实现。

2、 图片素材(VIP免费):,直接放到最外面,鱼油按需修改调用路径。

3、效果:
代码:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
    <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
    <meta name="author" content="krpa">
    <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
    <title>小宠之家</title>
    <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
    <link rel="stylesheet" type="text/css" href="css/header-icon.css">
    <style>
      .box{
            width: 200px;
            position: relative;
      }
      .box .icon-search{
            background: url(search.png) no-repeat;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 6px;
            left: 0;
      }
      .box .search{
            padding-left: 30px;
            height: 25px;
      }
    </style>
</head>
<body>
<!--header-->
<div id="header">
    <!--鱼油的页面...-->

    <!--搜索栏-->
    <div class="box">
      <i class="icon-search"></i>
      <inputname="searchbar" type="text" class="search" placeholder="萌图、视频、知识科普" autocomplete="off">
    </div>


</div>
</body>
</html>

krpa 发表于 2018-8-8 13:13:56

请问,i标签在不是只有强调作用么? <i class="icon-search"></i>为什么这里可以用i标签??

krpa 发表于 2018-8-8 13:15:32

不二如是 发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的,而是通过外面整体画一个栏实现。

2、 图片素材(VIP免费):,直接 ...

请问,i标签在不是只有强调作用么? <i class="icon-search"></i>为什么这里可以用i标签??

krpa 发表于 2018-8-8 13:20:56

不二如是 发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的,而是通过外面整体画一个栏实现。

2、 图片素材(VIP免费):,直接 ...

谢谢大佬的答复!
页: [1]
查看完整版本: 请问,要如何在input标签内插入img?