请问,要如何在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>
如何实现淘宝搜索栏
请问,要如何在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>
请问,i标签在不是只有强调作用么? <i class="icon-search"></i>为什么这里可以用i标签?? 不二如是 发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的,而是通过外面整体画一个栏实现。
2、 图片素材(VIP免费):,直接 ...
请问,i标签在不是只有强调作用么? <i class="icon-search"></i>为什么这里可以用i标签?? 不二如是 发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的,而是通过外面整体画一个栏实现。
2、 图片素材(VIP免费):,直接 ...
谢谢大佬的答复!
页:
[1]