Skip to content

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

调整容器宽度

parent 09256bdd
Show whitespace changes
Inline Side-by-side
Showing with 253 additions and 44 deletions
public/stylesheets/index.css
View file @ 23c3773f
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
padding-bottom: 160px; padding-bottom: 160px;
} }
.banner .banner-box { .banner .banner-box {
width: 1000px; width: 1150px;
margin: 0 auto; margin: 0 auto;
color: #fff; color: #fff;
} }
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.download { .download {
position: relative; position: relative;
padding-top: 400px; padding-top: 400px;
width: 1000px; width: 1150px;
margin: 0 auto; margin: 0 auto;
} }
.download .android, .download .android,
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
/*download end*/ /*download end*/
/*character begin*/ /*character begin*/
.character ul { .character ul {
width: 1000px; width: 1150px;
margin: 80px auto; margin: 80px auto;
} }
.character ul li { .character ul li {
...@@ -137,8 +137,8 @@ ...@@ -137,8 +137,8 @@
} }
.projects > header > div:first-child > div { .projects > header > div:first-child > div {
position: relative; position: relative;
width: 300px; width: 337.5px;
margin-right: 200px; margin-right: 237.5px;
float: right; float: right;
height: 300px; height: 300px;
} }
...@@ -157,8 +157,8 @@ ...@@ -157,8 +157,8 @@
} }
.projects > header > div:last-child > div { .projects > header > div:last-child > div {
position: relative; position: relative;
width: 700px; width: 812.5px;
margin-left: -200px; margin-left: -237.5px;
background-color: #2e2e2e; background-color: #2e2e2e;
height: 300px; height: 300px;
} }
...@@ -174,12 +174,12 @@ ...@@ -174,12 +174,12 @@
background: url(/images/index/icon_02.jpg) no-repeat left bottom; background: url(/images/index/icon_02.jpg) no-repeat left bottom;
} }
.projects > section { .projects > section {
width: 1000px; width: 1150px;
height: 500px; height: 500px;
margin: 0 auto; margin: 0 auto;
} }
.projects > section > div:first-child { .projects > section > div:first-child {
width: 379px; width: 454px;
float: left; float: left;
margin-top: 50px; margin-top: 50px;
margin-left: 20px; margin-left: 20px;
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
top: -3px; top: -3px;
} }
.projects > section > div:last-child { .projects > section > div:last-child {
width: 600px; width: 675px;
float: left; float: left;
position: relative; position: relative;
} }
...@@ -218,7 +218,7 @@ ...@@ -218,7 +218,7 @@
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.products ul { .products ul {
width: 1000px; width: 1150px;
margin: 0 auto; margin: 0 auto;
padding-bottom: 50px; padding-bottom: 50px;
} }
...@@ -237,14 +237,14 @@ ...@@ -237,14 +237,14 @@
} }
.products ul li:nth-child(1) > div:first-child, .products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child { .products ul li:nth-child(2) > div:first-child {
width: 656.66666667px; width: 756.66666667px;
margin-right: 30px; margin-right: 30px;
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
} }
.products ul li:nth-child(1) > div:last-child, .products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child { .products ul li:nth-child(2) > div:last-child {
width: 313.33333333px; width: 363.33333333px;
background-color: #2e2e2e; background-color: #2e2e2e;
text-align: center; text-align: center;
} }
...@@ -284,7 +284,7 @@ ...@@ -284,7 +284,7 @@
} }
.products ul li:nth-child(n+3) { .products ul li:nth-child(n+3) {
float: left; float: left;
width: 313.33333333px; width: 363.33333333px;
height: 400px; height: 400px;
position: relative; position: relative;
margin-right: 30px; margin-right: 30px;
...@@ -340,3 +340,132 @@ ...@@ -340,3 +340,132 @@
color: #fff; color: #fff;
} }
/*product end*/ /*product end*/
@media screen and (min-width: 769px) {
body .banner .banner-box {
width: 990px;
}
body .download {
width: 990px;
}
body .character ul {
width: 990px;
}
body .projects > header > div:first-child > div {
width: 297.5px;
margin-right: 197.5px;
}
body .projects > header > div:last-child > div {
width: 692.5px;
margin-left: -197.5px;
}
body .projects > section {
width: 990px;
}
body .projects > section > div:first-child {
width: 374px;
}
body .projects > section > div:last-child {
width: 595px;
}
body .products ul {
width: 990px;
}
body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child {
width: 650px;
margin-right: 30px;
}
body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child {
width: 310px;
}
body .products ul li:nth-child(n+3) {
width: 310px;
}
}
@media screen and (min-width: 1281px) {
body .banner .banner-box {
width: 1150px;
}
body .download {
width: 1150px;
}
body .character ul {
width: 1150px;
}
body .projects > header > div:first-child > div {
width: 337.5px;
margin-right: 237.5px;
}
body .projects > header > div:last-child > div {
width: 812.5px;
margin-left: -237.5px;
}
body .projects > section {
width: 1150px;
}
body .projects > section > div:first-child {
width: 454px;
}
body .projects > section > div:last-child {
width: 675px;
}
body .products ul {
width: 1150px;
}
body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child {
width: 756.66666667px;
margin-right: 30px;
}
body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child {
width: 363.33333333px;
}
body .products ul li:nth-child(n+3) {
width: 363.33333333px;
}
}
@media screen and (min-width: 1441px) {
body .banner .banner-box {
width: 1360px;
}
body .download {
width: 1360px;
}
body .character ul {
width: 1360px;
}
body .projects > header > div:first-child > div {
width: 390px;
margin-right: 290px;
}
body .projects > header > div:last-child > div {
width: 970px;
margin-left: -290px;
}
body .projects > section {
width: 1360px;
}
body .projects > section > div:first-child {
width: 559px;
}
body .projects > section > div:last-child {
width: 780px;
}
body .products ul {
width: 1360px;
}
body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child {
width: 896.66666667px;
margin-right: 30px;
}
body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child {
width: 433.33333333px;
}
body .products ul li:nth-child(n+3) {
width: 433.33333333px;
}
}
public/stylesheets/index.less
View file @ 23c3773f
...@@ -249,10 +249,8 @@ ...@@ -249,10 +249,8 @@
height: 400px; height: 400px;
float: left; float: left;
&:first-child { &:first-child {
//width: (@container-width + 30)/3*2-30; width: (@container-width + 30)/3*2-30;
//margin-right: 30px; margin-right: 30px;
.cwidth(@container-width);
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
...@@ -309,7 +307,7 @@ ...@@ -309,7 +307,7 @@
background-size: cover; background-size: cover;
} }
} }
& >div:last-child { & > div:last-child {
position: relative; position: relative;
h3 { h3 {
font-size: 40px; font-size: 40px;
...@@ -324,7 +322,7 @@ ...@@ -324,7 +322,7 @@
margin-bottom: 24px; margin-bottom: 24px;
position: absolute; position: absolute;
left: 0; left: 0;
top:63px; top: 63px;
span { span {
width: 33%; width: 33%;
display: block; display: block;
...@@ -337,9 +335,9 @@ ...@@ -337,9 +335,9 @@
} }
} }
& > div:last-child { & > div:last-child {
position:absolute; position: absolute;
top:160px; top: 160px;
left:0; left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
...@@ -351,16 +349,15 @@ ...@@ -351,16 +349,15 @@
} }
} }
} }
}
}
/*product end*/ /*product end*/
.screen() { .screen() {
.media(1281px, 1000px); .media(@screen-width-small, @container-width-small);
.media(1441px, 1200px); .media(@screen-width, @container-width);
.media(@screen-width-large, @container-width-large);
} }
.media(@sw, @cw) { .media(@sw, @cw) {
...@@ -370,6 +367,51 @@ ...@@ -370,6 +367,51 @@
} }
.rules(@container-width) { .rules(@container-width) {
.banner {
.banner-box {
width: @container-width;
}
}
.download {
width: @container-width;
}
.character {
ul {
width: @container-width;
}
}
.projects {
& > header {
& > div {
&:first-child {
& > div {
width: @container-width/4 + 50;
margin-right: @container-width/4 - 50;
}
}
&:last-child {
& > div {
width: @container-width / 4 * 3 - 50;
margin-left: -@container-width/4 + 50;
}
}
}
}
& > section {
width: @container-width;
& > div {
&:first-child {
width: @container-width/2-121;
}
&:last-child {
width: @container-width/2+100;
}
}
}
}
.products { .products {
ul { ul {
width: @container-width; width: @container-width;
...@@ -378,7 +420,8 @@ ...@@ -378,7 +420,8 @@
&:nth-child(2) { &:nth-child(2) {
& > div { & > div {
&:first-child { &:first-child {
.cwidth(@container-width); width: (@container-width + 30)/3*2-30;
margin-right: 30px;
} }
&:last-child { &:last-child {
width: (@container-width + 30)/3-30; width: (@container-width + 30)/3-30;
...@@ -392,3 +435,7 @@ ...@@ -392,3 +435,7 @@
} }
} }
} }
body {
.screen();
}
\ No newline at end of file
public/stylesheets/style.css
View file @ 23c3773f
...@@ -455,7 +455,7 @@ hr.line-separate:after { ...@@ -455,7 +455,7 @@ hr.line-separate:after {
} }
/*header begin*/ /*header begin*/
#header .container { #header .container {
width: 1000px; width: 1150px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
...@@ -466,13 +466,13 @@ hr.line-separate:after { ...@@ -466,13 +466,13 @@ hr.line-separate:after {
z-index: 999; z-index: 999;
} }
#header nav { #header nav {
padding-left: 250px; padding-left: 287.5px;
font-size: 16px; font-size: 16px;
} }
#header nav span { #header nav span {
float: left; float: left;
padding: 20px 0 10px; padding: 20px 0 10px;
margin-right: 30px; margin-right: 34.84848485px;
} }
#header nav span:last-child { #header nav span:last-child {
margin-right: 0; margin-right: 0;
...@@ -521,3 +521,27 @@ hr.line-separate:after { ...@@ -521,3 +521,27 @@ hr.line-separate:after {
color: #fff; color: #fff;
} }
/*footer end*/ /*footer end*/
@media screen and (min-width: 769px) {
body #header .container {
width: 990px;
}
body #header .container nav {
padding-left: 247.5px;
}
}
@media screen and (min-width: 1281px) {
body #header .container {
width: 1150px;
}
body #header .container nav {
padding-left: 287.5px;
}
}
@media screen and (min-width: 1441px) {
body #header .container {
width: 1360px;
}
body #header .container nav {
padding-left: 340px;
}
}
public/stylesheets/style.less
View file @ 23c3773f
...@@ -67,12 +67,12 @@ hr.line-separate { ...@@ -67,12 +67,12 @@ hr.line-separate {
z-index: 999; z-index: 999;
} }
nav { nav {
padding-left: 250px; padding-left:@container-width / 4;
font-size: 16px; font-size: 16px;
span { span {
float: left; float: left;
padding: 20px 0 10px; padding: 20px 0 10px;
margin-right: 30px; margin-right: @container-width / 33; // 30px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
...@@ -89,6 +89,7 @@ hr.line-separate { ...@@ -89,6 +89,7 @@ hr.line-separate {
} }
} }
} }
} }
/*header end*/ /*header end*/
...@@ -126,8 +127,9 @@ hr.line-separate { ...@@ -126,8 +127,9 @@ hr.line-separate {
/*footer end*/ /*footer end*/
.screen() { .screen() {
.media(1281px, 1000px); .media(@screen-width-small, @container-width-small);
.media(1441px, 1200px); .media(@screen-width, @container-width);
.media(@screen-width-large, @container-width-large);
} }
.media(@sw, @cw) { .media(@sw, @cw) {
...@@ -140,6 +142,13 @@ hr.line-separate { ...@@ -140,6 +142,13 @@ hr.line-separate {
#header { #header {
.container { .container {
width: @container-width; width: @container-width;
nav {
padding-left: @container-width / 4;
}
} }
} }
} }
body{
.screen();
}
\ No newline at end of file
public/stylesheets/variable.less
View file @ 23c3773f
@container-width: 1000px; @container-width-small: 990px;
@screen-width-small: 769px;
@container-width-max: 1200px; @container-width: 1150px;
@screen-width:1281px;
@container-width-large: 1360px;
@screen-width-large:1441px;
@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 @ 23c3773f
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
下载iPhone版 下载iPhone版
</a> </a>
<a class="qr-code" href=""> <a class="qr-code" href="">
<img src="/images/index/QR_Code.jpg" alt=""> <img src="https://res.fudou6.com/c/4/20160730/e9e5a+M6LGG5LyY5oqV5LiL6L295LqM57u056CB_280x280.png" width="124" alt="">
<span>扫描下载富豆APP</span> <span>扫描下载富豆APP</span>
</a> </a>
<img class="app-screen" src="/images/index/iphone.png" alt="app screen"> <img class="app-screen" src="/images/index/iphone.png" alt="app screen">
......
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