fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by unknown
Commit ae4a9a0dcec61c3cc1eee8e4d9cac24863881420 1 parent d96a67fa

媒体查询样式

Inline Side-by-side
Showing 3 changed files with 438 additions and 420 deletions
/*男首1150 女首/儿童/创意生活990*/
/*首页990*/
.min-screen {
.home-page {
width: 990px;
margin: 10px auto 0;
// overflow: hidden;
/*大banner*/
.slide-container {
position: absolute;
left: 0;
right: 0;
height: 387px;
&.slide-thumb-container {
... ... @@ -22,7 +19,6 @@
.slide-container-placeholder {
height: 387px;
width: 100%;
&.slide-thumb-container-placeholder {
height: 440px;
... ... @@ -31,43 +27,11 @@
/*大banner大图*/
.slide-wrapper {
position: relative;
height: 387px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover {
.slide-switch.show {
display: block;
}
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
a {
display: block;
height: 100%;
width: 990px;
margin: 0 auto;
}
&:first-child {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
}
... ... @@ -80,35 +44,17 @@
@include transition-duration(.2s);
@include transition-timing-function(ease-in); */
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 50%;
margin-left: -495px;
}
&.next {
right: 50%;
margin-right: -495px;
}
&:hover{
@include opacity(0.9);
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
... ... @@ -116,109 +62,19 @@
.thumb-pagination {
width: 990px;
margin: 7px auto 0;
padding: 0;
li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 118px;
height: 46px;
&:first-child {
margin: 0;
}
&.focus {
a {
@include opacity(0);
}
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
@include opacity(0.3);
}
img {
width: 100%;
height: 100%;
}
}
}
/*大banner圆点*/
.slide-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 0;
.slide-pagination-inner {
position: relative;
padding: 7px;
@include inline-block;
}
.slide-shade {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
@include opacity(0.3);
@include border-radius(13px);
}
span {
position: relative;
@include inline-block;
margin: 0 7px;
width: 12px;
height: 12px;
background: #fff;
cursor: pointer;
@include opacity(0.6);
@include border-radius(6px);
z-index: 2;
&.focus {
@include opacity(1);
}
}
}
/*女首碎片banner*/
.debris-slider {
height: 440px;
width: 100%;
.col {
float: left;
a {
display: block;
}
}
.left-col a,
.right-col a {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.right-col img,
.left-col img {
height: 100%;
width: 100%;
}
.left-col {
margin-right: 9px;
... ... @@ -234,43 +90,8 @@
}
.center-col {
position: relative;
width: 492px;
height: 100%;
margin-right: 9px;
font-size: 0;
&:hover {
.slide-switch.show {
display: block;
}
}
.slide-wrapper {
height: 100%;
li {
a {
width: 100%;
}
}
}
.slide-switch {
a.prev {
left: 0;
margin-left: 0;
}
a.next {
right: 0;
margin-right: 0;
}
}
img {
max-width: 100%;
max-height: 100%;
}
}
.right-col a {
... ... @@ -280,28 +101,18 @@
.right-col a:first-child {
height: 326px;
margin-bottom: 11px;
margin-bottom: 10px;
}
}
/*男首最新速报*/
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 748px;
li {
float: left;
margin: 0 8px 8px 0;
width: 158px;
height: 212px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 242px;
height: 432px;
}
... ... @@ -310,163 +121,57 @@
}
.last-item {
float: left;
width: 242px;
height: 432px;
overflow: hidden;
}
}
/*优选品牌*/
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 998px;
}
.preference-brand-item {
float: left;
margin-right: 7px;
margin-bottom: 8px;
a {
display: table-cell;
width: 159px;
height: 74px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 159px;
height: 74px;
line-height: 90px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 480px;
background: #8ae6e0;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
margin: 73px auto 0;
box-sizing: border-box;
width: 844px;
height: 370px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 275px;
height: 100%;
margin-right: 9px;
img {
width: 100%;
height: 100%;
}
}
}
/*男首优选品牌 图片品牌*/
.img-brand {
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 998px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 325px;
height: 150px;
line-height: 150px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
/*图片品牌左右切换按钮*/
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
@include opacity(0.9);
}
}
}
}
... ... @@ -474,9 +179,7 @@
/*男首优选品牌 logo品牌*/
.logo-brand {
width: 100%;
height: 246px;
overflow: hidden;
&.logos-10 {
height: 164px;
... ... @@ -486,44 +189,10 @@
width: 998px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 158px;
height: 74px;
line-height: 74px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: image-url('index/logo-brand-line.png') no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin: 0 0 0 -48px;
}
&.next {
bottom: 12px;
margin: 0 0 0 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
... ... @@ -533,7 +202,6 @@
width: 1004px;
}
li {
float: left;
margin: 0 7px 7px 0;
width: 161px;
height: 214px;
... ... @@ -546,58 +214,22 @@
width: 326px;
height: 435px;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.floor-header {
position: relative;
margin: 50px 0 30px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 10px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
}
}
@import "index1150","_index-pliffy";
... ...
@media screen and (min-width: 1150px) {
.home-page {
width: 1150px;
margin: 10px auto 0;
.slide-container{
position: absolute;
left: 0;
right: 0;
height: 450px;
&.slide-thumb-container {
... ... @@ -13,17 +15,50 @@
.slide-wrapper {
position: relative;
height: 450px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover {
.slide-switch.show {
display: block;
}
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
a {
display: block;
height: 100%;
width: 1150px;
margin: 0 auto;
}
&:first-child {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
}
.slide-container-placeholder {
height: 450px;
width: 100%;
&.slide-thumb-container-placeholder {
height: 510px;
... ... @@ -33,14 +68,38 @@
.slide-switch {
display: block;
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 50%;
margin-left: -575px;
}
&.next {
right: 50%;
margin-right: -575px;
}
&:hover{
@include opacity(0.9);
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
... ... @@ -50,14 +109,108 @@
padding: 0 0 0 2px;
li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 138px;
height: 54px;
&:first-child {
margin: 0;
}
&.focus {
a {
@include opacity(0);
}
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
@include opacity(0.3);
}
img {
width: 100%;
height: 100%;
}
}
}
/*大banner圆点*/
.slide-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 0;
.slide-pagination-inner {
position: relative;
padding: 7px;
@include inline-block;
}
.slide-shade {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
@include opacity(0.3);
@include border-radius(13px);
}
span {
position: relative;
@include inline-block;
margin: 0 7px;
width: 12px;
height: 12px;
background: #fff;
cursor: pointer;
@include opacity(0.6);
@include border-radius(6px);
z-index: 2;
&.focus {
@include opacity(1);
}
}
}
.debris-slider {
height: 510px;
width: 100%;
.col {
float: left;
a {
display: block;
}
}
.left-col a,
.right-col a {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.right-col img,
.left-col img {
height: 100%;
width: 100%;
}
.left-col {
margin-right: 10px;
... ... @@ -72,30 +225,73 @@
}
.center-col {
position: relative;
width: 570px;
height: 100%;
margin-right: 10px;
font-size: 0;
&:hover {
.slide-switch.show {
display: block;
}
}
.right-col {
.slide-wrapper {
height: 100%;
li {
a {
width: 100%;
}
}
}
.slide-switch {
a.prev {
left: 0;
margin-left: 0;
}
a.next {
right: 0;
margin-right: 0;
}
}
img {
max-width: 100%;
max-height: 100%;
}
}
.right-col a {
width: 280px;
height: 120px;
}
a:first-child {
.right-col a:first-child {
height: 380px;
}
margin-bottom: 11px;
}
}
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
... ... @@ -104,60 +300,173 @@
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
.img-slider-wrapper {
height: 558px;
}
.img-container-landscape {
margin: 86px auto 0;
width: 982px;
height: 433px;
.img-item {
width: 320px;
margin-right: 10px;
}
/*优选品牌*/
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 1158px;
}
.preference-brand-item {
float: left;
margin-right: 8px;
margin-bottom: 8px;
a {
display: table-cell;
width: 185px;
height: 86px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 185px;
height: 86px;
line-height: 100px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 558px;
background: #8ae6e0;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
box-sizing: border-box;
margin: 86px auto 0;
width: 982px;
height: 433px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 320px;
height: 100%;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
}
/*男首优选品牌 图片品牌*/
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 378px;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
/*图片品牌左右切换按钮*/
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
@include opacity(0.9);
}
}
}
}
/*男首优选品牌 logo品牌*/
.logo-brand {
width: 100%;
height: 282px;
overflow: hidden;
&.logos-10 {
height: 188px;
... ... @@ -167,16 +476,54 @@
width: 1158px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 185px;
height: 86px;
line-height: 86px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: image-url('index/logo-brand-line.png') no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin: 0 0 0 -48px;
}
&.next {
bottom: 12px;
margin: 0 0 0 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
/*创意生活商品分类*/
.categorys-list {
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
... ... @@ -189,16 +536,52 @@
width: 377px;
height: 504px;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.floor-header {
position: relative;
margin: 80px 0 40px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 15px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
}
}
\ No newline at end of file
... ...
.hotrank-page {
width: 990px;
width: 1150px;
margin: 0 auto;
.popular-list {
... ... @@ -8,16 +8,18 @@
li {
position: relative;
float: left;
width: 324px;
height: 521px;
width: 378px;
height: 596px;
overflow: hidden;
list-style: none;
margin: 0 8px 0 0;
.item-img {
width: 100%;
height: 434px;
line-height: 434px;
height: 506px;
line-height: 506px;
text-align: center;
overflow: hidden;
}
... ... @@ -82,14 +84,14 @@
.popular-item7,
.popular-item8,
.popular-item9 {
width: 240px;
height: 408px;
width: 280px;
height: 464px;
margin: 0 10px 0 0;
overflow: hidden;
.item-img {
height: 320px;
line-height: 320px;
height: 374px;
line-height: 374px;
}
}
... ... @@ -116,7 +118,6 @@
padding: 0 26px;
font-size: 14px;
color: #777;
line-height: 20px;
border-left: 1px solid #999;
}
}
... ... @@ -135,12 +136,14 @@
}
}
.hot-week-list {
width: 1160px;
.good-info {
width: 240px;
height: 408px;
width: 280px;
height: 464px;
margin: 10px 10px 0 0;
.tag-container {
... ... @@ -148,8 +151,8 @@
}
.good-detail-img {
height: 320px;
line-height: 320px;
height: 374px;
line-height: 374px;
text-align: center;
font-size: 0;
... ... @@ -243,17 +246,17 @@
}
}
@media screen and (min-width: 1150px) {
.min-screen {
.hotrank-page {
width: 1150px;
width: 990px;
.popular-list {
li {
width: 378px;
height: 596px;
width: 324px;
height: 521px;
.item-img {
height: 506px;
line-height: 506px;
height: 434px;
line-height: 434px;
}
}
... ... @@ -261,12 +264,12 @@
.popular-item7,
.popular-item8,
.popular-item9 {
width: 280px;
height: 464px;
width: 240px;
height: 408px;
.item-img {
height: 374px;
line-height: 374px;
height: 320px;
line-height: 320px;
}
}
... ... @@ -274,12 +277,12 @@
.hot-week-list {
.good-info {
width: 280px;
height: 464px;
width: 240px;
height: 408px;
.good-detail-img {
height: 374px;
line-height: 374px;
height: 320px;
line-height: 320px;
}
}
}
... ...