感谢自己坚持了这十天,因为白天满课、忙创业计划书以及一些社团的事情等等。。。。。只觉得快炸了,真心想学习,无奈时间精力有限,还好坚持了,学习到了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;
}