Skip to content

W
www.fudou6.com
Commit c4ac36eb authored by superman's avatar superman
Browse files
Options

less mixing

parent 27a4a8a8
Show whitespace changes
Inline Side-by-side
Showing with 185 additions and 8 deletions
public/stylesheets/index.css
View file @ c4ac36eb
......@@ -220,6 +220,7 @@
.products ul {
width: 1000px;
margin: 0 auto;
padding-bottom: 50px;
}
.products ul li {
position: relative;
......@@ -236,14 +237,117 @@
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 650px;
width: 656.66666667px;
margin-right: 30px;
-webkit-background-size: cover;
background-size: cover;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
width: 320px;
margin-left: 30px;
width: 313.33333333px;
background-color: #2e2e2e;
}
.products ul li:nth-child(n+3) {
float: left;
width: 313.33333333px;
height: 400px;
position: relative;
margin-right: 30px;
}
.products ul li:nth-child(n+3):last-child {
margin-right: 0;
}
.products ul li:nth-child(n+3) > div {
position: absolute;
width: 100%;
height: 100%;
}
.products ul li:nth-child(n+3) > div:first-child {
background-size: cover;
}
@media screen and (min-width: 1025px) {
.products ul {
width: 1000px;
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 656.66666667px;
margin-right: 30px;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
width: 313.33333333px;
}
.products ul li:nth-child(n+3) {
width: 313.33333333px;
}
}
@media screen and (min-width: 1281px) {
.products ul {
width: 1100px;
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 723.33333333px;
margin-right: 30px;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
width: 346.66666667px;
}
.products ul li:nth-child(n+3) {
width: 346.66666667px;
}
}
@media screen and (min-width: 1367px) {
.products ul {
width: 1200px;
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 790px;
margin-right: 30px;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
width: 380px;
}
.products ul li:nth-child(n+3) {
width: 380px;
}
}
@media screen and (min-width: 1441px) {
.products ul {
width: 1350px;
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 890px;
margin-right: 30px;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
width: 430px;
}
.products ul li:nth-child(n+3) {
width: 430px;
}
}
@media screen and (min-width: 1921px) {
.products ul {
width: 1500px;
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 990px;
margin-right: 30px;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
width: 480px;
}
.products ul li:nth-child(n+3) {
width: 480px;
}
}
/*product end*/
public/stylesheets/index.less
View file @ c4ac36eb
......@@ -237,6 +237,7 @@
ul {
width: @container-width;
margin: 0 auto;
padding-bottom: 50px;
li {
position: relative;
color: #fff;
......@@ -248,19 +249,82 @@
height: 400px;
float: left;
&:first-child {
width: @container-width/4*3-100;
//width: (@container-width + 30)/3*2-30;
//margin-right: 30px;
.cwidth(@container-width);
-webkit-background-size: cover;
background-size: cover;
}
&:last-child {
width: @container-width/4+70;
margin-left: 30px;
width: (@container-width + 30)/3-30;
background-color: #2e2e2e;
}
}
}
&:nth-child(n+3) {
float: left;
width: (@container-width + 30)/3-30;
height: 400px;
position: relative;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
& > div {
position: absolute;
width: 100%;
height: 100%;
&:first-child {
background-size: cover;
}
}
}
}
}
}
.screen() {
.media(1025px, 1000px);
.media(1281px, 1100px);
.media(1367px, 1200px);
.media(1441px, 1350px);
.media(1921px, 1500px);
}
.media(@sw, @cw) {
@media screen and (min-width: @sw) {
.rules(@cw);
}
}
.rules(@container-width) {
ul {
width: @container-width;
li {
&:nth-child(1),
&:nth-child(2) {
& > div {
&:first-child {
.cwidth(@container-width);
}
&:last-child {
width: (@container-width + 30)/3-30;
}
}
}
&:nth-child(n+3) {
width: (@container-width + 30)/3-30;
}
}
}
}
.products {
.screen();
}
/*product end*/
public/stylesheets/variable.less
View file @ c4ac36eb
@container-width: 1000px;
@container-width-max: 1200px;
@container-width-1441: 1400px;
.cwidth(@conWidth){
width:(@conWidth + 30)/3*2-30;
margin-right: 30px;
}
\ No newline at end of file
views/index.hbs
View file @ c4ac36eb
......@@ -111,7 +111,7 @@
</section>
</div>
<div class="products">
<ul>
<ul class="clear">
{{#each products}}
<li class="clear">
<div style="background-image:url({{this.img}})"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment