修改房间样式

lancer07 · May 26, 2016 · ca83022 · ca83022
1 parent 08a1828
commit ca83022
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 60 deletions.
diff --git a/channels/chi-bimaruko/main.css b/channels/chi-bimaruko/main.css
@@ -11,8 +11,8 @@
 }
 body {
   background: #ffef5e;
-  width: 200px;
-  height: 150px;
+  width: 450px;
+  height: 380px;
   overflow: hidden;
 }
 body,
@@ -27,13 +27,13 @@ div {
 .main {
   position: relative;
   margin: 0 auto;
-  transform: scale(0.25);
-  top: 0;
+  transform: scale(0.6, 0.6);
+  top: 10px;
 }
 .me {
   position: absolute;
-  top: 210px;
-  left: -50px;
+  top: 250px;
+  left: 100px;
   z-index: 10;
 }
 .me .hairs {
@@ -412,8 +412,8 @@ div {
 }
 .grandpa {
   position: absolute;
-  top: 0px;
-  left: 180px;
+  top: 40px;
+  left: 280px;
   z-index: 10;
   width: 126px;
 }

diff --git a/channels/chi-bimaruko/main.less b/channels/chi-bimaruko/main.less
@@ -11,12 +11,10 @@
 		transform:scale(1,1);
 	}
 }
-
-
 body{
 	background: #ffef5e;
-	width: 200px;
-	height: 150px;
+	width: 450px;
+	height: 380px;
 	overflow: hidden;
 }
 body,div{
@@ -30,13 +28,13 @@ body,div{
 .main{
 	position: relative;
 	margin: 0 auto;
-	transform: scale(0.25);
-	top: 0;
+	transform: scale(0.6,0.6);
+	top: 10px;
 }
 .me{
 	position: absolute;
-	top: 210px;
-	left: -50px;
+	top: 250px;
+	left: 100px;
 	z-index: 10;
 	.hairs{
 		background: #152131;
@@ -430,8 +428,8 @@ body,div{
 
 .grandpa{
 	position: absolute;
-	top: 0px;
-	left: 180px;
+	top: 40px;
+	left: 280px;
 	z-index: 10;
 	width: 126px;
 	.hairs{

diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,9 @@
+@font-face {
+  font-family: "Brush";
+  src: url("../font/BrushScriptMTItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
 body {
   background: #212121;
 }
@@ -10,16 +16,42 @@ body {
   background: #fff;
 }
 .wrap .wall {
-  background: #7abac2;
   width: 1000px;
-  height: 600px;
+  height: 500px;
   left: 117px;
   position: absolute;
   z-index: 1;
 }
+.wrap .wall li {
+  width: 4%;
+  float: left;
+  height: 500px;
+}
+.wrap .wall li:nth-child(2n) {
+  background: #ffc8e5;
+}
+.wrap .wall li:nth-child(2n+1) {
+  background: #ffe3f1;
+}
+.wrap .wall:before {
+  content: "";
+  position: absolute;
+  width: 117px;
+  height: 600px;
+  background: #ffc8e5;
+  left: -117px;
+}
+.wrap .wall:after {
+  content: "";
+  position: absolute;
+  width: 117px;
+  height: 600px;
+  background: #ffc8e5;
+  right: -117px;
+}
 .wrap .floor {
   width: 1000px;
-  border-bottom: 200px solid #ffe4bf;
+  border-bottom: 130px solid #f0f0f0;
   border-left: 117px solid transparent;
   border-right: 117px solid transparent;
   height: 0;
@@ -29,20 +61,20 @@ body {
 }
 .wrap .desk {
   z-index: 2;
-  width: 660px;
+  width: 760px;
   position: absolute;
-  left: 200px;
-  top: 300px;
+  left: 150px;
+  top: 360px;
 }
 .wrap .desk .top {
   height: 0;
-  width: 600px;
+  width: 700px;
   border-bottom: 50px solid #d28632;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
 }
 .wrap .desk .front {
-  width: 660px;
+  width: 760px;
   position: absolute;
   top: 50px;
   height: 20px;
@@ -112,28 +144,29 @@ body {
   top: 20px;
 }
 .wrap .pic .frame {
+  border: 15px solid #f7f5dc;
+  outline: 5px solid #000;
   background: #fff;
-  border-top: 10px solid #ffb400;
-  width: 200px;
-  height: 150px;
+  width: 180px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  font-size: 30px;
+  font-family: "Brush Script MT", Brush;
   position: absolute;
   z-index: 4;
-  left: -95px;
+  left: -100px;
   top: 30px;
 }
-.wrap .pic .frame iframe {
-  width: 200px;
-  height: 150px;
-}
 .wrap .tv {
   left: 100px;
-  top: 30px;
-  transform: scale(0.5);
+  top: 0;
+  transform: scale(0.65);
   z-index: 2;
 }
 .wrap #fan {
-  left: 600px;
-  top: 90px;
+  left: 650px;
+  top: 150px;
   transform: scale(0.6);
   z-index: 2;
 }
diff --git a/css/main.less b/css/main.less
@@ -1,4 +1,14 @@
 //out : main.css
+
+@font-face {
+    font-family: "Brush";
+    src: url("../font/BrushScriptMTItalic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+
 body{
     background: #212121;
 }
@@ -10,16 +20,42 @@ body{
     margin: 20px auto;
     background: #fff;
     .wall{
-        background: #7abac2;
         width: 1000px;
-        height: 600px;
+        height: 500px;
         left: 117px;
         position: absolute;
         z-index: 1;
+        li{
+            width: 4%;
+            float: left;
+            height: 500px;
+            &:nth-child(2n){
+                background: #ffc8e5;
+            }
+            &:nth-child(2n+1){
+                background: #ffe3f1;
+            }
+        }
+        &:before{
+            content: "";
+            position: absolute;
+            width:117px;
+            height: 600px;
+            background: #ffc8e5;
+            left: -117px;
+        }
+        &:after{
+            content: "";
+            position: absolute;
+            width:117px;
+            height: 600px;
+            background: #ffc8e5;
+            right: -117px;
+        }
     }
     .floor{
         width: 1000px;
-        border-bottom: 200px solid #ffe4bf;
+        border-bottom: 130px solid #f0f0f0;
         border-left: 117px solid transparent;
         border-right: 117px solid transparent;
         height: 0;
@@ -29,19 +65,19 @@ body{
     }
     .desk{
         z-index: 2;
-        width: 660px;
+        width: 760px;
         position: absolute;
-        left: 200px;
-        top: 300px;
+        left: 150px;
+        top: 360px;
         .top{
             height: 0;
-            width: 600px;
+            width: 700px;
             border-bottom: 50px solid #d28632;
             border-left: 30px solid transparent;
             border-right: 30px solid transparent;
         }
         .front{
-            width: 660px;
+            width: 760px;
             position: absolute;
             top: 50px;
             height: 20px;
@@ -104,28 +140,30 @@ body{
         }
         .frame{
             background: #fff;
-            border-top: 10px solid #ffb400;
-            width: 200px;
-            height: 150px;
+            border: 15px solid #f7f5dc;
+            outline:5px solid #000;
+            background: #fff;
+            width: 180px;
+            height: 60px;
+            line-height: 60px;
+            text-align: center;
+            font-size: 30px;
+            font-family: "Brush Script MT",Brush;
             position: absolute;
             z-index: 4;
-            left: -95px;
+            left: -100px;
             top: 30px;
-            iframe{
-                width: 200px;
-                height:150px;
-            }
         }
     }
     .tv{
         left: 100px;
-        top: 30px;
-        transform: scale(0.5);
+        top: 0;
+        transform: scale(0.65);
         z-index: 2;
     }
     #fan{
-        left: 600px;
-        top: 90px;
+        left: 650px;
+        top: 150px;
         transform: scale(0.6);
         z-index: 2;
     }

diff --git a/font/BrushScriptMTItalic.ttf b/font/BrushScriptMTItalic.ttf
diff --git a/index.html b/index.html
@@ -11,7 +11,11 @@
 	<body>
 		<div class="wrap">
 
-			<div class="wall"></div>
+			<ul class="wall">
+				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+				<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+				<li></li><li></li><li></li><li></li><li></li>
+			</ul>
 			<div class="floor"></div>
 
 			<div class="desk">
@@ -27,7 +31,7 @@
 				<div class="hook"></div>
 				<div class="line"></div>
 				<div class="frame">
-					<iframe frameborder="0" src="channels/chi-bimaruko/index.html"></iframe>
+					Hello World
 				</div>
 			</div>