发表于： 2017-02-03 21:41:07
10 587
今天完成的事情：
第一天做任务，还不是很清楚怎么玩。
根据任务一的要求，把九宫格做出来了，但是感觉有些地方怪怪的。
买了一个月的服务器，可是那个百度云的文档下载下来说文件损坏，不会用这个服务器诶=。=
明天计划的事情：
看看师兄的code review。
遇到的问题：
各种百度查资料，效果做出来了，但好像很奇怪，不知道哪里写错了。
收获：
通过实践把HTML，CSS的知识重温了一下，对自适应有了初步了解~
晕乎乎的，有人给指点下吗。。。
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title></title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html,body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| @media screen and (min-width:900px) { | |
| .wrap { | |
| width: 900px; | |
| height: 900px; | |
| margin: 0 auto; | |
| } | |
| .box { | |
| width: 290px; | |
| height: 300px; | |
| float:left; | |
| border: 5px solid white; | |
| background-color: orange; | |
| border-radius:25px; | |
| } | |
| } | |
| @media screen and (max-width:900px) { | |
| .wrap { | |
| width: 100%; | |
| height: 900px; | |
| } | |
| .box { | |
| width: 30%; | |
| height: 300px; | |
| float:left; | |
| margin-bottom: 2%; | |
| margin-left: 2%; | |
| background-color: orange; | |
| border-radius:25px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| </div> | |
| </body> | |
| </html> |
返回列表
评论