12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- .ri-grid{
- width: 600px;
- }
- .ri-grid ul li,
- .ri-grid ul li a{
- width: 100px;
- height: 100px;
- }
- .ri-grid ul li a img{
- width: 100%;
- }
- .ri-grid{
- margin: 0 auto 30px;
- position: relative;
- height: auto;
- }
- .ri-grid ul {
- list-style: none;
- display: block;
- width: 100%;
- margin: 0;
- padding: 0;
- }
- /* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
- .ri-grid ul:before,
- .ri-grid ul:after{
- content: '';
- display: table;
- }
- .ri-grid ul:after {
- clear: both;
- }
- .ri-grid ul {
- zoom: 1; /* For IE 6/7 (trigger hasLayout) */
- }
- .ri-grid ul li {
- -webkit-perspective: 400px;
- -moz-perspective: 400px;
- -o-perspective: 400px;
- -ms-perspective: 400px;
- perspective: 400px;
- margin: 0;
- padding: 0;
- float: left;
- position: relative;
- display: block;
- overflow: hidden;
- background: #E9E1D1;
- }
- .ri-grid ul li a{
- display: block;
- outline: none;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- -webkit-background-size: 100% 100%;
- -moz-background-size: 100% 100%;
- background-size: 100% 100%;
- background-position: center center;
- background-repeat: no-repeat;
- background-color: #333;
- -webkit-box-sizing: content-box;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- }
- /* Grid wrapper sizes */
- .ri-grid-size-1{
- width: 800px;
- height:300px;
- overflow: hidden;
- }
- .ri-grid-size-2{
- width: 1020px;
- height:374px;
- overflow: hidden;
- }
|