【IMWeb训练营作业】——Select

Manecho

于 2017-04-24 20:32:05 发布

阅读量229

点赞数 2

分类专栏： vue 文章标签： select 博客

本文链接：https://blog.csdn.net/qq_34769244/article/details/70659135

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

感谢自己坚持了这十天，因为白天满课、忙创业计划书以及一些社团的事情等等。。。。。只觉得快炸了，真心想学习，无奈时间精力有限，还好坚持了，学习到了Vue.js虽然不是很熟练，但是基本掌握吧，作业也是匆匆忙忙完成，还木有按时，真心不是故意的，下面帖作业：（以后这篇博客会重新完善的）

运行结果：

代码：

select.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿select</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<section class="warp">
		<div class="searchIpt clearFix">
			<div class="clearFix">
				<input type="text" class="keyWord" value="" />
				<input type="button" value="GO">
				<span></span>
			</div>
			<ul class="list">
				<li>IT·互联网</li>
				<li>设计·创作</li>
				<li>语言·留学</li>
				<li>职业·考证</li>
				<li>升学·考研</li>
				<li>兴趣·生活</li>
				<li>IT互联网求职季</li>
				<li>软件.开发</li>
			</ul>
		</div>
	</section>

	<script>
		var keyWord = document.querySelector('.keyWord');
		var list = document.querySelector('.list');
		var lis = list.querySelectorAll('li');

		keyWord.onfocus = function() {
			list.style.display = 'block';
		}

		keyWord.onblur = function() {
			setTimeout(function() {
				list.style.display = 'none';
			}, 80);
		}

		for (var i=0; i<lis.length; i++) {
			lis[i].onclick = function() {
				for (var i=0; i<lis.length; i++) {
					lis[i].className = '';
				}
				this.className = 'active';
				console.log( this.innerHTML );
				keyWord.value = this.innerHTML;
			}
		}
	</script>
</body>
</html>

style.css

body{
	margin:0;
	font-family:"微软雅黑";
}

ul,li{
	margin:0;
	padding:0;
	list-style:none;
}

input{
	outline:none;
	cursor: pointer;
}

.clearFix:after{
	display: block;
	content:'';
	clear:both;
}

.warp{
	width: 348px;
	padding:100px 76px 50px;
	margin:50px;
	background:url(images/manecho.png) no-repeat;
	box-shadow:2px 2px 10px 3f8cec;
}

.searchIpt{
	position: relative;
	width: 336px;
	border:1px solid #3736ae;
	padding:5px;
	border-radius:24px;
	background: #e4e4fe;
}

.searchIpt input{
	line-height: 34px;
	border-radius:18px;
}

.searchIpt input:nth-of-type(1){
	float: left;
	width: 228px;
	padding-left: 40px;
	border:1px solid #c9c9d5;
	background: #fafafa;

}

.searchIpt input:nth-of-type(2){
	float: right;
	width: 58px;
	height: 36px;
	border:1px solid #fd635e;
	background: #3f8cec;
}

.searchIpt span{
	position: absolute;
	top:12px;
	left: 15px;
	width: 23px;
	height: 23px;
	background: url(images/select_search.png) no-repeat;
}

.searchIpt input:nth-of-type(1):focus{
	background: #3f8cec;
	border-color:#70c37d;
}

.list{
	margin-top:9px;
}

.list li{
	margin:3px 0;
	color:#333;
	line-height: 30px;
	padding-left: 16px;
	width: 270px;
	box-sizing:border-box;
	border-radius:14px;

}

.list li.active,.list li:hover{
	color:#fff;
	background: #3f8cec;
	cursor: pointer;
}

Manecho

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【IMWeb训练营作业】——Select

感谢自己坚持了这十天，因为白天满课、忙创业计划书以及一些社团的事情等等。。。。。只觉得快炸了，真心想学习，无奈时间精力有限，还好坚持了，学习到了Vue.js虽然不是很熟练，但是基本掌握吧，作业也是匆匆忙忙完成，还木有按时，真心不是故意的，下面帖作业：（以后这篇博客会重新完善的）运行结果：代码：select.html 仿select
复制链接

扫一扫