首页 发现 帮助
注册 登录
fgm
/
front__coursera-responsive-basics
1
0
派生 0
文件 工单管理 0 合并请求 0
浏览代码

Manual basic responsive example.

Frederic G. MARAND 8 年之前
父节点
cca728458c
当前提交
e6f44dadda
共有 4 个文件被更改，包括 73 次插入 和 3 次删除
分列视图 显示文件统计
  1. 25 0
      public/css/styles.css
  2. 1 1
      public/css/styles.css.map
  3. 39 0
      public/css/styles.scss
  4. 8 2
      public/index.html

+ 25 - 0
public/css/styles.css
查看文件 

@@ -1,5 +1,30 @@
 
+body {
 
+  margin: 0; }
 
+
 
 /* use this to put borders around things... */
 
 .thin_border {
 
   border: 1px solid black; }
 
 
+div {
 
+  border: 1px solid gray;
 
+  box-sizing: border-box;
 
+  margin: 0;
 
+  padding: 0;
 
+  float: left; }
 
+
 
+@media (min-width: 750px) {
 
+  .responsive {
 
+    display: inline-block;
 
+    width: 400px; } }
 
+@media (min-width: 1000px) {
 
+  .responsive {
 
+    display: inline;
 
+    width: 500px; } }
 
+@media (min-width: 500px) {
 
+  body {
 
+    background: #ff8060; } }
 
+@media (min-width: 1000px) {
 
+  body {
 
+    background: #80e0a0; } }
 
+
 
 /*# sourceMappingURL=styles.css.map */

+ 1 - 1
public/css/styles.css.map
查看文件 

@@ -1,6 +1,6 @@
 
 {
 
 "version": 3,
 
-"mappings": "AAAA,8CAA8C;AAC9C,YAAa;EACZ,MAAM,EAAE,eAAe",
 
+"mappings": "AAAA,IAAK;EACH,MAAM,EAAE,CAAC;;AAGX,8CAA8C;AAC9C,YAAa;EACZ,MAAM,EAAE,eAAe;;AAGxB,GAAI;EACF,MAAM,EAAE,cAAc;EACtB,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,IAAI;;AAGb,yBAA0B;EACxB,WAAY;IACV,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,KAAK;AAIhB,0BAA2B;EACzB,WAAY;IACV,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,KAAK;AAKhB,yBAA0B;EACxB,IAAK;IACH,UAAU,EAAE,OAAO;AAIvB,0BAA2B;EACzB,IAAK;IACH,UAAU,EAAE,OAAO",
 
 "sources": ["styles.scss"],
 
 "names": [],
 
 "file": "styles.css"

+ 39 - 0
public/css/styles.scss
查看文件 

@@ -1,4 +1,43 @@
 
+body {
 
+  margin: 0;
 
+}
 
+
 
 /* use this to put borders around things... */
 
 .thin_border {
 
 	border: 1px solid black;
 
 }
 
+
 
+div {
 
+  border: 1px solid gray;
 
+  box-sizing: border-box;
 
+  margin: 0;
 
+  padding: 0;
 
+  float: left;
 
+}
 
+
 
+@media (min-width: 750px) {
 
+  .responsive {
 
+    display: inline-block;
 
+    width: 400px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1000px) {
 
+  .responsive {
 
+    display: inline;
 
+    width: 500px;
 
+  }
 
+
 
+}
 
+
 
+@media (min-width: 500px) {
 
+  body {
 
+    background: #ff8060;
 
+  }
 
+}
 
+
 
+@media (min-width: 1000px) {
 
+  body {
 
+    background: #80e0a0;
 
+  }
 
+}

+ 8 - 2
public/index.html
查看文件 

@@ -1,7 +1,7 @@
 
 <html>
 
 	<head>
 
 		<title>This is my first web page</title>
 
-    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
 
+    <!-- link rel="stylesheet" type="text/css" href="css/bootstrap.css" / -->
 
   	<link rel="stylesheet" type="text/css" href="css/styles.css" />
 
 	</head>
 
 
@@ -12,7 +12,13 @@
 
 		&nbsp;
 
 		<a href="contact.html" class="greenlink">Contact me</a>
 
 
-		</hr>
 
+		<hr />
 
+
 
+    <!-- Manual responsive layout -->
 
+    <div class="responsive" style="background-color: yellow">column 1</div>
 
+    <div class="responsive" style="background-color: purple">column 2</div>
 
+
 
+    <hr />
 
 
     <div class="container">
 
       <h1>This is my first web page</h1>