/* * @name: index.css * @time: 2013/1/21 * @author: sole * @url: http://www.imsole.net/ * @directiona: 首页样式,包括:项目列表 */ /* project */ .project { margin-top:10px; font-family:"microsoft yahei"; } .project-list { width:960px; overflow:hidden; } .project-list a { cursor: pointer; } .project-list .item-0 { float:left; width:230px; padding-right:10px; } .project-list .item-1 { float:left; width:480px; padding-right:10px;} .project-list .item-2 { float:right; width:230px; } .project-list .item-3 { float:left; width:230px; } .project-list .item-4 { float:right; width:480px; } .project-list .icon { position:relative; display:block; width:230px; height:130px; margin-bottom:10px; text-decoration:none; text-align:center; color:#fff; } .project-list .icon:hover { opacity:.8; filter:alpha(opacity=80); transition:all .25s ease 0s; } .project-list .icon i { display:inline-block; width:70px; height:60px; margin-top:35px; background-image:url(/uploads/image/siimg/icon_bg.png); } .project-list .icon-2 i, .project-list .icon-9 i { margin-left:-100px; } .project-list .icon-9 i { margin-left:-140px; } .project-list .icon-10 i, .project-list .icon-11 i, .project-list .icon-12 i { width:56px; height:32px; } .project-list .icon em { position:absolute; left:10px; bottom:5px; font-size:20px; } .project-list .icon-2 em, .project-list .icon-9 em { left:240px; top:105px; line-height:120%; font-size:45px; } .project-list .icon-9 em { left:200px; } .project-list .icon .arrow { position:absolute; top:10px; right:10px; width:50px; height:50px; background:url(/uploads/image/siimg/arrow.png) no-repeat; display:none; } .project-list .icon:hover .arrow { display:block; } .project-list .icon-7 span { position:relative; float:left; width:76px; height:130px; border-right:1px solid #fff; } .project-list .icon-7 .icon-12, .project-list .icon-7 .arrow { border-right:none; } .project-list .icon-7 .samll { display:none; } .project-list .icon-7 .samll .arrow { width:34px; height:34px; background:url(/uploads/image/siimg/arrowx.png) no-repeat; } .project-list .icon-7 .def, .project-list .icon-7 .def .icon-10 { width:230px; height:130px; border:none; } .project-list .icon-7:hover .samll { display:block; } .project-list .icon-7:hover .def { display:none; } .project-list .icon-2, .project-list .icon-9 { width:480px; height:270px; } .project-list .icon-0 { background-color:#3098cb; } .project-list .icon-1 { background-color:#f1b244; } .project-list .icon-2 { background-color:#f16798; } .project-list .icon-3 { background-color:#4bb1d6; } .project-list .icon-4 { background-color:#e1477d; } .project-list .icon-5 { background-color:#046a9c; } .project-list .icon-6 { background-color:#d94a7c; } .project-list .icon-7 { background-color:#f1b244; } .project-list .icon-8 { background-color:#4bb1d6; } .project-list .icon-9 { background-color:#d22a65; } .project-list .icon-2 i, .project-list .icon-9 i { margin-top:105px; } .project-list .icon-0 i { background-position:0 0; } .project-list .icon-1 i { background-position:0 -300px; } .project-list .icon-2 i { background-position:0 -240px; } .project-list .icon-3 i { background-position:0 -360px; } .project-list .icon-4 i { background-position:0 -420px; } .project-list .icon-5 i { background-position:0 -480px; } .project-list .icon-6 i { background-position:0 -60px; } .project-list .icon-7 i { background-position:0 -120px; } .project-list .icon-8 i { background-position:0 -120px; } .project-list .icon-9 i { background-position:0 -180px; } .project-list .icon-10 i { background-position:-60px -445px; } .project-list .icon-11 i { background-position:-60px -484px; } .project-list .icon-12 i { background-position:-60px -530px; }