发表于： 2016-06-07 16:35:08
4 932
今天完成的事情： 这几天通过刻苦认真的看， 终于弄明白了 九宫格意思就是编写九个div元素，然后给这九个元素设置 相同的宽度和高度（这里指width和height）(ps:如果只设置width和height的话，九个格子会粘在一 起，所以还要设置外边距，这样就会看到九个格子都是分离的），这样他们就都是正方形了，然后按照 要求把颜色设置成橘黄色（orange), 然后把他们按照浮动来定位就行 ps:如果只是这样的话在浏 览器打开会发现9个格子都在一行，然后我就给第三个格子和第7个格子增加了条左侧抗浮动，这样9个 格子就排列成九宫格的样子了呵呵， 不过经过我的不断研究加改进，我最终取消了左侧抗浮 动，改成了给这九个格子加了个DIV容器，把这个容器的大小（只设置width和height）设置的刚好比3 个格子加起来的width和height还有自己设置的格子的外边距加起来再大一些，这样做出来也是九宫格 的样子， 我觉得这样只用在文档里面给div设置一个ID选择器，比给两个div（第三个和第7个格子）设 置class等于左侧抗浮动要简单些 呵呵 代码就是要不断改进的 怎么简单怎么来 应该还有比我写 的代码更简单易懂的，不过我发现在咱们网站里寻找日志设置的真的很不方便啊（我刚开始做任务一纯 粹没头绪，想看看别人任务一是怎么做的，可是翻了半天日志也找不到自己满意的，而且还一点不方便 啊，想加群向各位师兄请教可加群却没人让我进，所以我任务一做了有十来天，只能靠自己研究，5月 23日我开始做的），能不能改成那种和百度贴吧一样的，每个贴吧就专门讨论每个贴吧的内容，比如大 话2贴吧就讨论大话2，别讨论大话3呵呵，任务一的日志和任务二的日志专门分开，每个任务的日志和 别的任务的日志都分开，各是各的，在给写的好的日志加精，这样就方便多了啊
nginx：我也设置好了，在浏览器输入localhost/text1.html就打开了我做好的九宫格
手机上打开：我是按照和电脑一个无线 然后输入电脑IP和文件名taxk1.html 在浏览器打开的，也和电 脑上显示的九宫格一样
遇到的问题： 兼容IE8以上浏览器：我用的是360安全浏览器8.1 能显示出我做的九宫格，这是不是就是兼容了 还有 啊，IE8以上浏览器我查了一下百度有很多啊，难道都要一个一个下载然后去试吗
F12调试：网上看到的意思是它还允许您立即修改HTML和CSS并看到你变化的结果实时反映在浏览器窗口。 我在打开的九宫格页面按F12，调试页面出来了，而且也和上面说的允许修改html和css，并看到变化的结果实时反映在浏览器窗口，不过F12调试里还有好多别的我纯粹看不懂啊都是英文，这个F12调试现阶段会用哪些功能就行，请大家指点指点啊
手机上打开： 看到古尘和@19师兄在nginx如何配置里写的手机打开有三种方法，可是我只会我今天完成的事里面写的那种，剩下还有两种方法我不会啊 1、代码上传至服务器，直接用ip访问
2、谷歌浏览器的F12调试中，左上角有个手机的图标，点那个就可以模拟移动设备访问，有很多不同尺寸的手机，苹果、三星、洛基亚之类的，木有小米 0.0
第二种方法我电脑上就没下载谷歌浏览器我也不想下载了 第一种代码上传至服务器，上传至哪个服务器？怎么上传？
明天计划的事情 ：如果各位大神觉得我写的代码没问题的话还有我遇到的问题不是问题的话那我就开始任务2了 下面的成果展示服务器地址我不知道该填啥啊 还有代码链接，所以我就把我写的代码直接复制粘贴到这里了啊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{float:left;width:50px;height:50px;margin:1px;background-color:orange;border-radius:10px;}
#a{width:200px;height:200px;background-color:white;}
</style>
</head>
<body>
<div id="a">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
返回列表
评论