发表于： 2016-12-18 20:57:32
0 515
今天完成的事情：通过盒子模型后对任务1进行重新制作，使用div标签和float浮动属性，开始的时候完成了9个盒子的制作，但是盒子是水平布置的，无法形成图片要求的三行三列的形式。为此再百度上浏览了不少，最后不得已设计了一个大盒子来包裹9个小盒子，虽然成为了图片中要求的样子，但是这个大盒子是在网页的左上角，无法在网页上水平居中。为此又进行了一番百度，在大盒子中添加了“margin：0 auto”的属性，通过实践，无法完成目的，随后在body中添加了“text-align:center”的属性，成功的试大盒子居中了。随后在IE，edge,手机uc浏览器上都顺利打开了。此外，对nginx进行了下载和安装，并按修真院的提示进行了配置，成功完成了打开了自己任务1九宫格。
明天计划的事情：对自适应进行学习，开始进行任务2。在后续学习中不断完善任务1的内容。
遇到的问题：今天再次完成任务1在电脑中各浏览器的大小一致，只是放在手机上盒子相应的变小了，不知道是不是正常，还是说这就是自适应了？另外，在IE和edge浏览器中margin死角边缘有弧线，而猎豹和手机的浏览器中没有，问题出在哪里？
收获：百度了一番之后，对九宫格的居中费了很长时间，目前认识是：就任务1本身而言，是对body设置“text-align:center”属性及相应的大盒子box0设置“margin：0 auto”属性，已达到大盒子box0居中的目的并适应IE浏览器。其次，将大盒子box0的宽、高赋值，圈定一块地方，放置9个小盒子。最后对9个小盒子设置float浮动属性，使其在大盒子中水平布置并自动换行排列。box0的宽高值略大于3个小盒子宽高值+6个小盒子margin值的总和。不知如此对否？
对nginx有初步的认识，目前只是按照修真院中提供的知识链接完成了对本地文件的访问，还没有了解对远程服务器的配置。
以下是今天九宫格的代码：
<!doctype html>
<html>
<head>
<title>九宫格制作2：使用div元素，加入float属性</title>
<style type="text/css">
.box0 {width:372px;
height:372px;
margin:0 auto;
}
.box1 {
float:left;
width: 120px;
border:2px solid #FFF;
height: 120px;
background-color:#F60;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
</style>
</head>
<body style="text-align:center">
<div class="box0">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>
返回列表
评论