• 七角七分博客欢迎大家光临

织梦右侧很简洁的一个搜索框DIV+CSS源码,方便使用省事

常用技巧 七七 2年前 (2022-01-03) 1个评论

有些织梦模板中没有搜索框,而站内搜索对用户体验也是很重要的一环,这个DIV+CSS演示地址可参考http://www.52fxzy.cn简洁好修改,直接上代码,如下:
CSS段:

#soutab {
	float: right;
	margin-right: 30px;
	margin-bottom: 20px;
}
.search {
	width: 335px;
	height: 36px;
}
.search .text {
	width: 243px;
	height: 28px;
	font-size: 16px;
	padding: 3px 0px;
	float: left;
	text-indent: 15px;
	color: #949494;
	border: 1px solid #ececec;
	border-radius: 3px;
	display: block;
	letter-spacing: 1.5px;
	font-family: "Microsoft Yahei", "冬青黑体简体中文 w3";
}
.search .text:focus {
	color: #656565;
}
.search .button {
	height: 34px;
	width: 80px;
	margin-left: 10px;
	border: none;
	cursor: pointer;
	display: block;
	float: left;
	color: #fff;
	font-size: 15px;
	background: #d6623d;
	border-radius: 2px;
}
.searchtitle {
	height: 50px;
	line-height: 50px;
	background: #f7f7f7;
	margin: 0px 0px 0px -32px;
	border-left: 2px solid #d6623d;
	padding: 0px 55px;
	font-size: 18px;
	font-weight: normal;
	color: #150707;
	display: inline-block;
}

大小颜色可根据自己网站自定
DIV段:


<div id="soutab">
     <form  class="search" name="formsearch" action="/plus/search.php">
         <input type="hidden" name="kwtype" value="0" />
        <input class="text" type="text" name="q" placeholder="搜索一下">
        <input class="button" value="搜索" type="submit">
    </form>
</div>


喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 打发发的试试
    第三方2023-03-19 23:05 回复