码迷，mamicode.com
首页 > 其他好文 > 详细

三角旋转1

时间：2017-07-21 17:07:12      阅读：163      评论：0      收藏：0      [点我收藏+]

标签：tran   ott   char   date   add   -o   utf-8   center   document   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="icon/iconfont.css" />
<link rel="stylesheet" href="icon2/iconfont.css" />
<style type="text/css">
.sanjiao{
color: #fff;
}
.sanjiao-active{
color: #fff;
}
.sanjiao::before{
width: 0;
height: 0;
border-top: 12px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
position: absolute;
top: 4px;
right: 5px;
-webkit-transition:0.3s;
-o-transition:0.3s;
transitoin:0.3s;
}
.sanjiao-active::before{
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
.pager {
max-width: 800px;
text-align: center;
margin-bottom: 30px;
display: inline-block;
}
.pager a{
cursor: pointer;
}
.pager a,
.pager span {
width: 29px;
height: 28px;
border: 1px #cccccc solid;
margin-left: -1px;
color: #8a8a8a;
display: inline-block;
line-height: 28px;
float: left;
font-size: 12px;
text-decoration: none;
margin: 0 2px;
}
.pager a:hover,
.pager span:hover {
border-color: #3897cd;
color: #3897cd;
position: relative;
z-index: 1;
}
.pager span.current {
background-color: #3897cd;
color: #fff;
border-color: #3897cd;
position: relative;
z-index: 1;
}
.pager .pg-first,
.pager .pg-prev,
.pager .pg-next,
.pager .pg-last{
background: url(images/page_bg.jpg) 0 0 no-repeat;
}
.pager .pg-first:hover,
.pager .pg-prev:hover,
.pager .pg-next:hover,
.pager .pg-last:hover{
background: url(images/page_bg_hover.jpg) 0 0 no-repeat;
}
.pager .pg-prev,
.pager .pg-prev:hover{
background-position: 0 -28px;
}
.pager .pg-next,
.pager .pg-next:hover{
background-position: -29px -28px;
}
.pager .pg-last,
.pager .pg-last:hover{
background-position: -29px 0;
}
.pager .pg-prev[disabled=‘true‘],
.pager .pg-prev[disabled=‘true‘]:hover{
cursor: default;
background-image: url(images/page_bg.jpg);
}
.pager .pg-next[disabled=‘true‘],
.pager .pg-next[disabled=‘true‘]:hover{
cursor: default;
background-image: url(images/page_bg.jpg);
}
.pager .pg-prev[disabled=‘true‘],
.pager .pg-next[disabled=‘true‘]{
border-color: #eeeeee;
}
.pager span.els{
border-color: transparent;
}

.pagerHtmlWrap{
width: 800px;
margin: 30px auto;
}
.pagerHtmlWrap .cc_cells{
width: 100%;
height: 35px;
padding: 5px 0;
border-bottom: 1px #cccccc solid;
}
.pagerHtmlWrap .cc_cells a{
color: #454545;
font-size: 14px;
line-height: 35px;
text-decoration: none;
}
.pagerHtmlWrap .cc_cells a span{
display: inline-block;
width: 25%;
text-align: left;
margin: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".checkbox1").click(function(){
if($(".checkbox1").is(‘:checked‘)){
$(".choice-pingtai").show();



}else{

$(".choice-pingtai").hide();

}

});

$(".sky-eye").click(function(){
var display=$("#skyeye-two").css(‘display‘);
console.log(display);
if(display == ‘none‘){
$("#skyeye-one").addClass(‘sanjiao-active‘)
$("#skyeye-two").slideDown(‘slow‘);

}else {
$("#skyeye-one").removeClass(‘sanjiao-active‘)
$("#skyeye-two").slideUp(‘slow‘);
}
})


$(".sku-manage").click(function(){
var display=$("#skyeye-two").css(‘display‘);
console.log(display);
if(display == ‘none‘){
$("#skyeye-one").addClass(‘sanjiao-active‘)
$("#skyeye-two").slideDown(‘slow‘);

}else {
$("#skyeye-one").removeClass(‘sanjiao-active‘)
$(".sku-control-zy2").slideUp();
}
})
});
</script>
<body>
<div class="contain-all">
<div class="eye-control">
<p class="haitun-eye">海豚天眼大数据监控平台</p>
</div>
<div class="eye-control-left">
<div class="topnav">
<div class="sky-eye sanjiao" id="skyeye-one"><a href="index.html"><i class="iconfont ">&#xe6cf;</i>天眼</a></div>
<ul class="sku-control-zy" id="skyeye-two">
<li><a href="#"><i class="iconfont control-icon">&#xe619;</i>sku监控</a></li>
<li><a href="#"><i class="iconfont pinlei-icon">&#xe626;</i>品类监控</a></li>
</ul>
<div class="sku-manage">
<li><a href="skumanager.html"><i class="iconfont">&#xe6cf;</i>sku管理</a></li>
</div>
<ul class="sku-control-zy2">
<li><a href="#"><i class="iconfont create-icon">&#xe628;</i>创建</a></li>
<li><a href="#"><i class="iconfont editor-icon">&#xe647;</i>编辑</a></li>
</ul>
</div>
</div>
<div class="eye-control-all">
<div class="choice">

<span class="pin-lei">品类选择：</span><select style="border-radius: 5px;width: 120px;height: 30px;">
<option value ="volvo">请选择</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>


<select style="border-radius: 5px;width: 80px;height: 30px;">
<option value ="volvo">请选择</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select style="border-radius: 5px;width: 120px;height: 30px;">
<option value ="volvo">请选择品牌</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" class="eye-check" value="天眼查询" />
<input type="button" class="checkout" value="导出" />
</div>
<ul class="baby-chice">
<li class="prode">母婴用品</li>
<li class="milk">奶粉</li>
<li class="children">儿童星</li>
</ul>
<input type="checkbox" class="checkbox1" checked="checked" /><span class="about">关联海豚sku</span>
<div class="choice-pingtai">
<select style="border-radius: 5px;width: 120px;height: 30px;">
<option value ="volvo">请选择平台</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<p class="global">京东全球购</p>
</div>
<div class="global-bottom"></div>
<span class="search">共搜索到922条数据</span>
<div class="table-class1">
<table id="table-aleph" >

<tr class="sku">
<td class="haitun">海豚sku</td>
<td class="haitun">京东全球购</td>
<td class="haitun">天猫国际</td>
<td class="haitun">网易考拉</td>
<td class="haitun">蜜芽</td>
<td class="haitun">贝贝网</td>
</tr>

<td>ht123980</td>
<td><p class="date">2017-07-01</p>
<p class="price">价格：108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
<p class="total-number">月销量：5879</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
</tr>
<tr>
<td>ht128790</td>
<td><p class="date">2017-07-01</p>
<p class="price"></p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price"></p>
<p class="pinlun">评论数：10000</p>
<p class="total-number">月销量：5879</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price"></p>
<p class="pinlun">评论数：10000</p>
</td>
</tr>
</table>
<!--<div class="digg">
<span class="disabled">&lt; </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="http://www.divcss5.com/">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>
...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> &gt; </a>
</div> -->
<div style="text-align: center;margin:20px auto;"><div id="pager" class="pager clearfix"></div></div>
<div id="wraper" class="pagerHtmlWrap"></div>
<div style="text-align: center;">
<!--<div id="pager2" class="pager clearfix"></div>-->
</div>

</div>
</div>
</div>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.z-pager.js" charset="utf-8"></script>
<script type="text/javascript">
$("#pager").zPager({
totalData: 60
});
$("#pager2").zPager({
url:‘pageData.json‘,
htmlBox: $(‘#wraper‘),
btnShow: false
// ,
// dataRender: function(data){
// console.log(data+‘---data-2‘);
// }
});

</script>
</html>

 


*{margin: 0;padding: 0;}
a{text-decoration:none ;}
.contain-all{width: 100%;height: 100%;overflow: hidden;}
.choice{margin-top:20px;margin-left:20px ;}
.pin-lei{font-size: 14px;font-weight: 500;}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
.haitun-eye{font-size: 20px;color:white;font-weight: 600;padding-top:20px;padding-left:80px ;}
.eye-control{width:100%;height:80px;background:black;}
.eye-control-left{width:14%;height:1000px;background:black ;float: left;}
.eye-control-all{float: left;width:80%;}
.baby-chice{margin-top:10px;}
.baby-chice li{float: left;font-size:12px;}
.baby-chice .prode{margin-left: 116px;}
.baby-chice .milk{margin-left: 73px;}
.baby-chice .children{margin-left: 56px;}
.about{font-size: 12px;margin-left:5px;}
.eye-check{margin-left: 25px;border-radius:5px ;width: 75px;height:30px;text-align: center;background:white;}
.checkout{margin-left: 5px;border-radius:5px;width: 50px;height:30px;text-align: center;background:white ;}
.checkbox1{margin-left: 95px;font-size: 12px;}
.choice-pingtai{margin-left:91px;width:120px;height:25px;}
.global{font-size:12px ;margin-left: 12px;margin-top:10px;}
.global-bottom{border-bottom: 1px solid black;width: 1000px;margin-top:38px;margin-left:5px;}
.search{font-size: 12px;margin-left: 5px;}
#table-aleph{font-size:12px;border:1px solid #cccccc;width:1100px;height:300px;margin-left: 10px;
margin-top: 10px;border-collapse:collapse;}

 


#table-aleph tr{width:1100px;border:1px solid #cccccc;}
#table-aleph td{height:120px;border:1px solid #cccccc;}
#table-aleph .sku{width:1100px;border:1px solid #cccccc;}
#table-aleph .haitun{height:60px;border:1px solid #cccccc;}
#table-aleph .date{margin:20px 0;}

.table-second{font-size:12px;border:1px solid #cccccc;width:1200px;
height:300px;margin-left: 10px;margin-top: 10px;border-collapse:collapse;}
.table-second tr{width:1200px;border:1px solid #cccccc;}
.table-second td{height:120px;border:1px solid #cccccc;}
.table-second.sku{width:1200px;border:1px solid #cccccc;}
.table-second .haitun{height:60px;border:1px solid #cccccc;}
.table-second.date{margin:20px 0;}
DIV.digg {
PADDING-RIGHT: 257px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
MARGIN: 3px; PADDING-TOP: 60px; TEXT-ALIGN: center
}
DIV.digg A {
BORDER-RIGHT: #CCCCCC 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #aaaadd 1px solid; COLOR: #cccccc; PADDING-TOP: 2px;
BORDER-BOTTOM: #cccccc 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
BORDER-RIGHT: dodgerblue 1px solid; BORDER-TOP: dodgerblue 1px solid;
BORDER-LEFT: dodgerblue 1px solid; COLOR: white; BORDER-BOTTOM: dodgerblue 1px solid;
background: dodgerblue;
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px;
BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #cccccc 1px solid;
COLOR: #CCCCCC; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid;
}
DIV.digg SPAN.current:hover{
BORDER-RIGHT: dodgerblue 1px solid; BORDER-TOP: dodgerblue 1px solid;
BORDER-LEFT: dodgerblue 1px solid; COLOR: white; BORDER-BOTTOM:dodgerblue 1px solid ;
background: dodgerblue;
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid;
PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px;
BORDER-BOTTOM: #eee 1px solid
}
#table-aleph tr td{padding-left:8px;}
.table-second tr td{padding-left:8px;}
.sky-eye{width:100%;height:30px;background: #1E90FF;}
.topnav{text-align: center;}
.topnav a{color: white;text-align: center;}
.sku-control-zy li{height: 30px;font-size: 12px;line-height:30px ;}
.sku-control-zy2 li{height: 40px;width:178px;font-size: 12px;line-height:30px ;}
.sku-manage{width:100%;height:30px;color: white;}
.sku-control-zy li:hover{background: #1E90FF;}
.sku-control-zy2 li{width:100%;height: 26px;}
.sku-control-zy2 li:hover{background: #1E90FF;}
.sku-manage li:hover{background: #1E90FF;}

.editor{font-size:12px ;margin-left:204px;margin-top:20px;}
.jindong-global{margin-left:20px;margin-top:20px;}
.jindong-global input{width: 360px;height: 32px;border-radius: 5px;border:1px solid #a1a1a1;}
.jindong-global p{margin-top:25px;}
.jindong-global .jind-1{margin-left:5px;}
.jindong-global .jind-2{margin-left:18px;}
.jindong-global .jind-3{margin-left:19px;}
.jindong-global .jind-4{margin-left:52px;}
.jindong-global .jind-5{margin-left:38px;}
.cancel{margin-top:38px;margin-left:84px ;margin-bottom:15px ;}
.cancel .button1{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;margin-right:28px ;}
.cancel .button2{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;}

.contain-pingtai{float: left;width:80%;margin-top: 2%;margin-left: 2%;font-size: 12px;}
.please-input{width:200px;height:27px;border:1px solid #CCCCCC ;border-radius: 5px;margin-right:2%;}
.search-pingtai{width:50px;height:27px;border-radius: 5px;background:#FFFFFF ;border: 1px solid #DDDDDD;margin-right:2%;}
.create-pintai{width:50px;height:27px;line-height:27px;border-radius: 5px;background:#1E90FF ;border: 1px solid #DDDDDD;
margin-right:5%;color: white;text-align: center;display: inline-block;}
.contry-pingtai{margin-top:1%;margin-left:4%;}


#table-pingtai{font-size:12px;border:1px solid #cccccc;width:1100px;height:150px;margin-left: 10px;
margin-top: 10px;border-collapse:collapse;}
#table-pingtai tr{width:1100px;border:1px solid #cccccc;}
#table-pingtai td{height:30px;border:1px solid #cccccc;padding-left: 8px;}
.cancel .button3{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;margin-right:28px ;}
.cancel .button4{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;}
.btn-primary{font-size: 12px;}
a:hover {text-decoration: none;}
.cancel .button5{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;margin-right:28px ;}
.cancel .button6{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;}
.editor p{font-size: 16px;}
.information{margin-top:15px;margin-left:68px;}
.create-icon{margin-right: 10px;}
.editor-icon{margin-right: 10px;}
.pinlei-icon{margin-right: 10px;}
.control-icon{margin-right: 10px;}
.sky-eye{position：relative;}
.sku-control-zy{display: none;}

 

三角旋转1

标签：tran   ott   char   date   add   -o   utf-8   center   document   

原文地址：http://www.cnblogs.com/yanyiyi/p/7218194.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！