Skip to content

Instantly share code, notes, and snippets.

@LitileXueZha

LitileXueZha/Flex Box.html

Created April 16, 2017 09:36
Show Gist options
  • Save LitileXueZha/c99e534ee26833686be39b8ab19f14ed to your computer and use it in GitHub Desktop.
Save LitileXueZha/c99e534ee26833686be39b8ab19f14ed to your computer and use it in GitHub Desktop.
Download ZIP
好玩的东西
Raw
Flex Box.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flex Box布局</title>
<link rel="stylesheet" href="my/奥森字体4.2.0/css/font-awesome.min.css">
<script src="my/js/jquery-3.1.0.js"></script>
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin: 0;
}
#search{
margin-top: 100px;
text-align: center;
font-size: 0;
}
#search>div{
display: inline-block;
position: relative;
font-size: 0;
vertical-align: top;
}
/* 选择框样式 -- v */
#search select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
border: 1px solid black;
border-right: none;
width: 60px;
height: 31px;
padding-left: 2px;
background: none;
font-size: 14px;
font-weight: bold;
cursor: pointer;
position: relative;
left: 1px;
z-index: 999;
}
#search select::-ms-expand{
display: none;
}
#select>i{
font-size: 14px;
position: absolute;
right: 9px;
top: 9px;
cursor: pointer;
z-index: -999;
}
#search option{
text-align: center;
}
/* 选择框样式 -- ^ */
/* 设置 -- v */
#setting{
display: inline-block;
font-size: 14px;
height: 31px;
width: 31px;
line-height: 31px;
border: 1px solid black;
border-right: none;
position: relative;
}
.setting-container{
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.21);
}
.setting-panel{
width: 60%;
height: 60%;
background: white;
position: absolute;
left: 20%;
top: 20%;
padding: 0 10%;
}
.number{
width: 100%;
font-size: 0;
margin-bottom: 40px;
position: relative;
top: 30%;
}
.number>i{
width: 10%;
height: 20px;
display: inline-block;
font-size: 14px;
vertical-align: bottom;
border-bottom: 1px solid black;
line-height: 20px;
}
.number>.annotation{
font-size: 10px;
position: absolute;
left: 17px;
line-height: 25px;
}
.number>input{
width: 90%;
height: 20px;
border: none;
border-bottom: 1px solid black;
display: inline-block;
font-size: 14px;
text-align: center;
}
.action{
position: absolute;
left: 0;
bottom: 0;
font-size: 0;
width: 100%;
}
.action>button{
font-size: 14px;
border: none;
padding: 0;
text-align: center;
width: 50%;
height: 30px;
line-height: 20px;
background: #F0F0F0;
cursor: pointer;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;
}
.action>button:hover{
background: #5DAAF0;
}
/* 设置 -- ^ */
/* 输入框 -- v */
#input{
width: 55%;
text-align: left;
}
#search input{
width: 98%;
font-size: 14px;
height: 31px;
padding: 2px;
border: 1px solid black;
border-right: none;
border-left: none;
background: none;
}
#search input:focus{
border-color: black;
}
/* 输入框 -- ^ */
/* 建议内容 -- v */
#search input:focus+#advance{
height: 174px;
transition: 1.5s ease-in;
}
#advance{
height: 0;
overflow: hidden;
transition: 0.5s;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
font-size: 14px;
text-align: left;
list-style: none;
}
#advance>li>a{
display: block;
padding: 6px;
text-decoration: none;
color: white;
background: black;
}
#advance>li:nth-last-child(1) a{
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#advance>li>a:hover{
background: rgba(0, 0, 0, 0.8);
border-left: 1px solid white;
}
/* 建议内容 -- ^ */
/* 按钮 -- v */
#input>button{
font-size: 14px;
width: 40px;
padding: 0;
height: 31px;
border: 1px solid black;
border-left: none;
background: none;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
/* 按钮 -- ^ */
</style>
<script>
$(document).ready(function () {
$('#setting').click(function () {
$('.setting-container').css('z-index', 9999).animate({
opacity: 1
}, 1000);
$('#search').animate({
opacity: 0.1
}, 1000);
});
$('.action').children('button').click(function () {
$('.setting-container').animate({
opacity: 0
}, 1000, function () {
$(this).css('z-index', -1)
});
$('#search').animate({
opacity: 1
}, 1000);
});
});
</script>
</head>
<body>
<div class="setting-container">
<div class="setting-panel">
<div class="number">
<i class="fa fa-tags" title="从第几页开始"></i>
<span class="annotation">页头</span>
<input type="number" value="1">
</div>
<div class="number">
<i class="fa fa-tags" title="每次搜索多少张"></i>
<span class="annotation">页数</span>
<input type="number" value="30">
</div>
<br/><br/><br/><br/><br/><br/><br/>
<div class="action">
<button><i class="fa fa-check"></i></button><button><i class="fa fa-remove"></i></button>
</div>
</div>
</div>
<div id="search">
<div id="select">
<select>
<option value="">选择</option>
<option value="">美女</option>
<option value="">壁纸</option>
<option value="">搞笑</option>
<option value="">动漫</option>
<option value="">宠物</option>
<option value="">摄影</option>
<option value="">设计</option>
</select>
<i class="fa fa-sort"></i>
</div>
<a href="javascript: void(0)" id="setting">
<i class="fa fa-cog"></i>
</a>
<div id="input">
<input type="text" placeholder="关键词"/>
<ul id="advance">
<li><a href=""><i class="fa fa-tag"></i>&nbsp;&nbsp;&nbsp;超炫酷科技</a></li>
<li><a href="">
<i class="fa fa-tag"></i>
</a></li>
<li><a href="">
<i class="fa fa-tag"></i>
</a></li>
<li><a href="">
<i class="fa fa-tag"></i>
</a></li>
<li><a href="">
<i class="fa fa-tag"></i>
</a></li>
<li><a href="">
<i class="fa fa-tag"></i>
</a></li>
</ul>
<button><i class="fa fa-search"></i></button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment