.x-div-page-banner{ height: 600px; overflow: hidden; position: relative; } .x-div-page-banner img{ /*width: 100%;*/ height: 100%; -webkit-animation: pulse 10s linear infinite; animation: pulse 10s linear infinite; } .x-div-banner-img{ height: 600px; -webkit-animation: pulse 10s linear infinite; animation: pulse 10s linear infinite; overflow: hidden; } .x-div-page-crumb{ position: absolute; bottom: 0; width: 100%; min-width: 1200px; height: 110px; background:url("/static/xvnjia/resource/assets/images/crumb-bg.png"); ; } .x-div-page-main{ min-height: 600px; background: url("/static/xvnjia/resource/assets/images/bg.png") repeat-y; background-size: 100%; } .x-div-page-title{ margin-top: 40px; } .x-page-container{ background: url("/static/xvnjia/resource/assets/images/list-bg.png"); min-height: 600px; padding-bottom: 100px; } .x-div-page-title h2{ text-align: center; color: red; line-height: 60px; height: 60px; } .x-div-page-element { text-align: center; height: 40px; line-height: 40px; border-bottom: 1px solid #f1f1f1; } .x-div-page-element span{ padding: 10px; color: #999; } .x-div-page-text{ padding: 25px; line-height: 32px; } .x-div-page-text *{ font-size: 18px !important; font-family: 微软雅黑 !important; } .x-div-page-element a{ color: #999; font-weight: normal; height: 16px; width: 16px; position: relative; display: inline-block; top: 3px; margin-left: 4px; cursor: pointer; } .x-div-page-text img{ max-width: 100%; display: block; margin: 0 auto; } .x-strong-font-plus{ background: url("/static/xvnjia/resource/assets/images/font.png") no-repeat -6px -59px; } .x-strong-font-minus{ background: url("/static/xvnjia/resource/assets/images/font.png") no-repeat -6px -144px; } .x-strong-font-plus:hover{ background: url("/static/xvnjia/resource/assets/images/font.png") no-repeat -6px -14px; } .x-strong-font-minus:hover{ background: url("/static/xvnjia/resource/assets/images/font.png") no-repeat -6px -101px; } .x-div-page-line{ background: url("/static/xvnjia/resource/assets/images/page-line.jpg"); height: 7px; } .x-div-menu-list{ height: 100px; position: absolute; right: 0; } .x-div-crumb-list{ float: left; height: 110px; line-height: 110px; color:#fff; } .x-li-menu-first{ border-left: 1px solid rgba(255, 255, 255, 0.5); } .x-div-crumb-list a{ color:#fff; } .x-div-crumb-list span{ color:#fff; } .x-div-menu-list ul li{ list-style: none; float: left; width: 130px; height: 110px; font-size: 16px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.5); position: relative; background: rgba(50, 165, 106, 0.47); } .x-div-menu-list ul li a i{ display: block; position: absolute; width: 100%; top: 15px; font-size: 52px; } .x-div-menu-list ul li a span{ position: absolute; top: 75px; width: 100%; left: 0; } .x-div-menu-list ul li a{ color:#fff; height: 100px; width: 110%; display: block; } .x-div-menu-list ul li:hover{ background: #f39910; } .x-div-menu-list .x-div-menu-active{ background: #f39910; } /** * 底部 */ .x-section-footer{ margin-top: -47px; height: 804px; } .x-div-footer-top{ height:48px; background: url("/static/xvnjia/resource/assets/images/footer-top.png") no-repeat; background-size: 100% 100%; -ms-behavior: url("/static/xvnjia/resource/assets/ie/backgroundsize.min.htc"); behavior:url("/static/xvnjia/resource/assets/ie/backgroundsize.min.htc"); } .x-div-footer-bottom{ height: 100%; background: #404856; padding-top: 44px; } .x-div-footer-top{ text-align: center; position: relative; } .x-div-footer-top img{ width: 76px; } .x-div-footer-menu{ text-align: center; } .x-div-footer-menu .x-li-footer-parent{ float: left; width: 140px; } .x-div-footer-menu .x-li-footer-parent .x-a-footer-parent{ color: #ebebeb; } .x-a-footer-parent span{ font-size: 16px; } .x-div-footer-menu li{ list-style: none; } .x-ul-footer-sub{ padding-left: 0; margin-top: 10px; } .x-ul-footer-sub li a{ color: #999; line-height: 22px; } .x-div-footer-map{ text-align: center; position: relative; } .x-div-footer-map span{ position: absolute; left: 609px; top: 105px; color: #999; font-size: 18px; } .x-div-footer-map a{ position: absolute; left: 576px; top: 100px; -webkit-animation: flash 5s linear infinite;/*鼠标hover时,i图标旋转,infinite表示动画无限循环*/ animation: flash 5s linear infinite; } .x-div-footer-map a img{ width: 22px; } .x-div-footer-copyright{ text-align: center; margin-top: 20px; color:#6e7884; } .x-div-footer-text span{ display: inline-block; line-height: 26px; } /** * 文字列表页 */ .x-div-page-tlist{ padding: 89px; } .x-div-page-tlist ul{ list-style: none; } .x-div-page-tlist ul li{ list-style: none; height: 150px; overflow: hidden; border-top: 1px dotted #dddddd; padding: 15px 20px 10px 14px; } .x-div-page-tlist ul li:last-child{ border-bottom: 1px dotted #dddddd; } .x-div-page-tlist ul li a{ display: block; height: 100%; } .x-div-page-tlist ul li h3{ line-height: 44px; color:#222222; } .x-div-page-tlist ul li p{ line-height: 22px; color: #808080; } .x-div-page-tlist ul li span{ line-height: 26px; color:#cccccc; float: right; } .x-div-page-tlist ul li:hover{ background: #fab041; } .x-div-page-tlist ul li:hover h3, .x-div-page-tlist ul li:hover p, .x-div-page-tlist ul li:hover span{ color: #fff; } /** * 分页 */ .x-div-page-tpaginate nav{ text-align: center; } .x-div-page-tpaginate nav a{ color:#666; } .x-div-page-tpaginate nav a:hover{ color:#f39910; } .pager li>a{ color: #f39910; } .pager li>a:hover{ background: #f39910; color: #fff; } .x-div-page-tpaginate nav .active span{ background-color: #f39910; border-color: #f39910; } .x-div-page-tpaginate nav .active:hover span{ background-color: #f39910; border-color: #f39910; } .x-div-page-tpaginate nav .disabled span{ color:#ccc; } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { z-index: 2; color: #fff; background-color: #f39910; border-color:#f39910; } /** * 图文列表 */ .x-div-page-ilist{ margin-top: 59px; } .x-div-page-ilist ul li{ float: left; width: 347px; list-style: none; overflow: hidden; height: 333px; background: #fff; margin-top: 15px; margin-left: 15px; } .x-div-page-ilist ul li a{ display: block; height: 100%; } .x-div-list-image{ width: 100%; height: 219px; overflow: hidden; position: relative; } .x-div-list-image img{ width: 100%; height: 219px; } .x-div-page-ilist ul li:hover img { transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); /* IE 9 */ -moz-transform: scale(1.2, 1.2); /* Firefox */ -webkit-transform: scale(1.2, 1.2); /* Safari 和 Chrome */ -o-transform: scale(1.2, 1.2); /* Opera */ } .x-div-page-ilist ul li img { overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 1; transition-delay: 0s; transition-duration: 1.5s; transition-property: all; transition-timing-function: ease; /* Firefox 4 */ -moz-transition-delay: 0s; -moz-transition-duration: 1.5s; -moz-transition-property: all; -moz-transition-timing-function: ease; /* Safari 和 Chrome */ -webkit-transition-delay: 0s; -webkit-transition-duration: 1.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease; /* Opera */ -o-transition-delay: 0s; -o-transition-duration: 1.5s; -o-transition-property: all; -o-transition-timing-function: ease; } .x-div-list-image span{ display: block; position: absolute; z-index: 2; top: 160px; text-align: center; width: 100%; color: #fff; font-size: 17px; height: 60px; line-height: 75px; font-weight: bold; background:url("/static/xvnjia/resource/assets/images/imgtitle_bg.png"); } .x-div-list-text { height: 114px; } .x-div-list-text span{ color: #666666; display: block; padding: 13px; line-height: 24px; } .x-div-page-ilist ul li:hover .x-div-list-image span{ color:#f39910; } .x-div-page-ilist ul li:hover .x-div-list-text{ background: #f39910; } .x-div-page-ilist ul li:hover .x-div-list-text span{ color:#fff; } /** * 新闻 */ .x-div-page-nlist{ padding: 89px; } .x-div-page-nlist ul{ list-style: none; } .x-div-page-nlist ul li{ list-style: none; height: 150px; overflow: hidden; border-top: 1px dotted #dddddd; padding: 15px 20px 10px 14px; } .x-div-page-nlist ul li:last-child{ border-bottom: 1px dotted #dddddd; } .x-div-page-nlist ul li a{ display: block; height: 100%; } .x-div-page-nlist ul li h3{ line-height: 44px; color:#222222; } .x-div-page-nlist ul li p{ line-height: 22px; color: #808080; } .x-div-page-nlist ul li span{ line-height: 26px; color:#cccccc; float: right; } .x-div-page-nlist ul li img{ width: 180px; height: 122px; border-radius: 4px; } .x-div-page-nlist ul li:hover{ /*background: #fab041;*/ } .x-div-page-nlist ul li:hover h3, .x-div-page-nlist ul li:hover p, .x-div-page-nlist ul li:hover span{ color: #fab041; } .x-div-page-nlist ul li:hover img { transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); /* IE 9 */ -moz-transform: scale(1.2, 1.2); /* Firefox */ -webkit-transform: scale(1.2, 1.2); /* Safari 和 Chrome */ -o-transform: scale(1.2, 1.2); /* Opera */ } .x-div-page-nlist ul li img { overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 1; transition-delay: 0s; transition-duration: 1.5s; transition-property: all; transition-timing-function: ease; /* Firefox 4 */ -moz-transition-delay: 0s; -moz-transition-duration: 1.5s; -moz-transition-property: all; -moz-transition-timing-function: ease; /* Safari 和 Chrome */ -webkit-transition-delay: 0s; -webkit-transition-duration: 1.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease; /* Opera */ -o-transition-delay: 0s; -o-transition-duration: 1.5s; -o-transition-property: all; -o-transition-timing-function: ease; } .x-div-nlist-img{ float: left; width: 180px; height: 122px; overflow: hidden; border-radius: 5px; border: 2px solid #ebebeb; } .x-div-nlist-text{ margin-left: 200px; } .x-div-video-main{ background: #333; } .x-div-video{ height: 521px; width: 730px; position: absolute; z-index: 2; } .x-video-container{ height: 686px; } .x-span-play{ position: absolute; top: 0; z-index: 100; font-size: 30px; width: 100%; text-align: center; height: 100%; line-height: 126px; } .x-span-play .x-i-play{ width: 28px; height: 33px; position: absolute; background: url("/static/xvnjia/resource/assets/images/play.png"); top: 42px; left: 69px; } .hd ul li:hover .x-i-play{ background: url("/static/xvnjia/resource/assets/images/play-active.png"); } /** * 每周食谱 */ .x-div-page-recipe ul li { list-style: none; float: left; color:#fff; } .x-span-recipe-list{ display: inline-block; padding-right: 12px; } .x-div-recipe-base{ width: 340px; height: 452px; margin-top: 19px; margin-left: 10px; padding: 33px; } .x-div-page-recipe .x-div-recipe-1{ background: url("/static/xvnjia/resource/assets/images/monday.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-safe{ background: url("/static/xvnjia/resource/assets/images/safe.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-2{ background: url("/static/xvnjia/resource/assets/images/tuesday.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-3{ background: url("/static/xvnjia/resource/assets/images/wednesday.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-4{ background: url("/static/xvnjia/resource/assets/images/thursday.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-5{ background: url("/static/xvnjia/resource/assets/images/friday.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-6{ background: url("/static/xvnjia/resource/assets/images/saturday.png"); background-size: 100% 100%; } .x-div-page-recipe .x-div-recipe-7{ background: url("/static/xvnjia/resource/assets/images/sunday.png"); background-size: 100% 100%; } .x-div-recipe-base h2{ font-size: 22px; line-height: 30px; } .x-div-recipe-unit{ border-bottom: 1px solid rgba(255,255,255,.15); padding: 14px 0px; } .x-h2-recipe-bottom{ margin-bottom: 20px; } .x-span-recipe-title{ font-size: 16px; position: absolute; } .x-span-recipe-text{ margin-left: 63px; display: inline-block; margin-top: -2px; line-height: 26px; font-size: 16px; }