Difference between revisions of "Team:Tianjin/Experiment/css/style.css"

Line 1: Line 1:
−
html, body {
+
@charset "utf-8";
−
margin: 0;
+
*{margin:0;padding:0;list-style-type:none;}
−
padding: 0;
+
html,body{height:100%;margin:0px;padding:0px;background:#000;}
−
}
+
  
−
body {
+
/* box */
−
background: #EEE;
+
.box{width:850px;height:auto;overflow:hidden;background:#666;margin:100px auto 10px auto;padding:10px 0 0 10px;}
−
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
+
.box ul{margin:0px;padding:0px;float:left;}
−
font-size: 14px;
+
.box li{width:150px;height:100px;float:left;cursor:pointer;display:inline;margin:0 10px 10px 0;border:5px solid #333;}
−
line-height: 1.6;
+
#bg{width:100%;height:100%;position:absolute;left:0px;top:0px;background:#000;filter:alpha(opacity:50);opacity:0.5;display:none;}
−
}
+
#bottom{width:215px;height:50px;position:absolute;left:50%;bottom:0px;margin:0 0 0 -107px;border:1px solid #232323;background:#444;padding:1px;z-index:1;display:none;}
−
 
+
#bottom ul{width:100%;height:100%;margin:0px;padding:0px;list-style-type:none;background:#000;}
−
#content {
+
#bottom li{background:url(../images/ico.jpg) no-repeat;float:left;display:inline;margin:8px 0 0 18px;cursor:pointer;}
−
width: 750px;
+
#bottom li.prev{width:30px;height:33px;background-position:0 0;}
−
margin: 50px auto;
+
#bottom li.next{width:30px;height:33px;background-position:-35px 0;}
−
padding: 20px;
+
#bottom li.img{width:30px;height:33px;background-position:-106px 0;}
−
background: #FFF;
+
#bottom li.close{width:31px;height:33px;background-position:-70px 0;}
−
border: 1px solid #CCC;
+
#frame{background:#fff;padding:3px;position:absolute;z-index:2;display:none;filter:alpha(opacity:0);opacity:0;text-align:center;}
−
}
+
−
 
+
−
h1 {
+
−
margin: 0;
+
−
}
+
−
 
+
−
hr {
+
−
border: none;
+
−
height: 1px; line-height: 1px;
+
−
background: #CCC;
+
−
margin-bottom: 20px;
+
−
padding: 0;
+
−
}
+
−
 
+
−
p {
+
−
margin: 0;
+
−
padding: 7px 0;
+
−
}
+
−
 
+
−
.clear {
+
−
clear: both;
+
−
line-height: 1px;
+
−
font-size: 1px;
+
−
}
+
−
 
+
−
a {
+
−
outline-color: #888;
+
−
}
+
−
#images a {
+
−
margin-right: 14px;
+
−
}
+
−
 
+
−
#images a img {
+
−
border: 1px solid #888;
+
−
padding: 3px;
+
−
vertical-align: top;
+
−
}
+
−
 
+
−
#credit {
+
−
clear: both;
+
−
margin-top: 50px;
+
−
padding-top: 20px;
+
−
font-size: 10px;
+
−
border-top: 1px solid #BBB;
+
−
font-family: Verdana;
+
−
}
+
−
#imgbox-loading {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
background: url('imgbox-spinner.gif') center center no-repeat;
+
−
cursor: pointer;
+
−
display: none;
+
−
z-index: 90;
+
−
}
+
−
 
+
−
#imgbox-loading div {
+
−
background: #FFF;
+
−
width: 100%;
+
−
height : 100%;
+
−
}
+
−
 
+
−
#imgbox-overlay {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
width: 100%;
+
−
height: 100%;
+
−
background: #000;
+
−
display: none;
+
−
z-index: 80;
+
−
}
+
−
 
+
−
.imgbox-wrap {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
background: #FFF;
+
−
display: none;
+
−
z-index: 90;
+
−
}
+
−
 
+
−
.imgbox-img {
+
−
padding: 0;
+
−
margin: 0;
+
−
border: none;
+
−
width: 100%;
+
−
height: 100%;
+
−
vertical-align: top;
+
−
}
+
−
 
+
−
.imgbox-close {
+
−
position: absolute;
+
−
top: -15px;
+
−
right: -15px;
+
−
height: 30px;
+
−
width: 30px;
+
−
background: url('imgbox-close.png') top left no-repeat;
+
−
cursor: pointer;
+
−
outline: none;
+
−
}
+
−
 
+
−
.imgbox-title {
+
−
padding-top: 10px;
+
−
font-size: 11px;
+
−
text-align: center;
+
−
font-family: Arial;
+
−
color: #333;
+
−
display: none;
+
−
}
+
−
 
+
−
.imgbox-bg-wrap {
+
−
position: absolute;
+
−
padding: 0;
+
−
margin: 0;
+
−
display: none;
+
−
}
+
−
 
+
−
.imgbox-bg {
+
−
position: absolute;
+
−
width: 20px;
+
−
height: 20px;
+
−
}
+
−
 
+
−
.imgbox-bg-n {
+
−
left: 0;
+
−
top: -20px;
+
−
width: 100%;
+
−
background: url(imgbox-bg-n.png) repeat-x;
+
−
}
+
−
 
+
−
.imgbox-bg-ne {
+
−
right: -20px;
+
−
top: -20px;
+
−
background: url(imgbox-bg-ne.png) no-repeat;
+
−
}
+
−
 
+
−
.imgbox-bg-e {
+
−
right: -20px;
+
−
top: 0;
+
−
height: 100%;
+
−
background: url(imgbox-bg-e.png) repeat-y;
+
−
}
+
−
 
+
−
.imgbox-bg-se {
+
−
right: -20px;
+
−
bottom: -20px;
+
−
background: url(imgbox-bg-se.png) no-repeat;
+
−
}
+
−
 
+
−
.imgbox-bg-s {
+
−
left: 0;
+
−
bottom: -20px;
+
−
width: 100%;
+
−
background: url(imgbox-bg-s.png) repeat-x;
+
−
}
+
−
 
+
−
.imgbox-bg-sw {
+
−
left: -20px;
+
−
bottom: -20px;
+
−
background: url(imgbox-bg-sw.png) no-repeat;
+
−
}
+
−
 
+
−
.imgbox-bg-w {
+
−
left: -20px;
+
−
top: 0;
+
−
height: 100%;
+
−
background: url(imgbox-bg-w.png) repeat-y;
+
−
}
+
−
 
+
−
.imgbox-bg-nw {
+
−
left: -20px;
+
−
top: -20px;
+
−
background: url(imgbox-bg-nw.png) no-repeat;
+
−
}
+

Revision as of 02:36, 12 October 2016

@charset "utf-8";

  • {margin:0;padding:0;list-style-type:none;}

html,body{height:100%;margin:0px;padding:0px;background:#000;}

/* box */ .box{width:850px;height:auto;overflow:hidden;background:#666;margin:100px auto 10px auto;padding:10px 0 0 10px;} .box ul{margin:0px;padding:0px;float:left;} .box li{width:150px;height:100px;float:left;cursor:pointer;display:inline;margin:0 10px 10px 0;border:5px solid #333;}

  1. bg{width:100%;height:100%;position:absolute;left:0px;top:0px;background:#000;filter:alpha(opacity:50);opacity:0.5;display:none;}
  2. bottom{width:215px;height:50px;position:absolute;left:50%;bottom:0px;margin:0 0 0 -107px;border:1px solid #232323;background:#444;padding:1px;z-index:1;display:none;}
  3. bottom ul{width:100%;height:100%;margin:0px;padding:0px;list-style-type:none;background:#000;}
  4. bottom li{background:url(../images/ico.jpg) no-repeat;float:left;display:inline;margin:8px 0 0 18px;cursor:pointer;}
  5. bottom li.prev{width:30px;height:33px;background-position:0 0;}
  6. bottom li.next{width:30px;height:33px;background-position:-35px 0;}
  7. bottom li.img{width:30px;height:33px;background-position:-106px 0;}
  8. bottom li.close{width:31px;height:33px;background-position:-70px 0;}
  9. frame{background:#fff;padding:3px;position:absolute;z-index:2;display:none;filter:alpha(opacity:0);opacity:0;text-align:center;}