发表于： 2018-07-22 20:45:10
1 541
今天完成的事情：
- 3.（环境搭建）下载编辑器Sublime/webstorm并使用它进行编码工作 （0.5小时）
- 4.（环境搭建）下载浏览器Chrome并在之后的开发中使用它（0.5小时）
- 5.（知识学习）查看学习资料--《文档类型——HTML <!DOCTYPE> 标签》（0.5小时）
- 6.（编码实战）新建一个以.html后缀结尾的文件，并且补全其中的文档类型和基本标签，使用Chrome浏览器打开它（0.5小时）
- 7.（知识学习）查看学习资料--《标签——HTML标签图解》（0.5小时）
- 8.（知识学习）查看学习资料--《CSS概念——CSS是什么》（0.5小时）
- 9.（编码实战）为html添加几个标签，并尝试为其添加css样式（0.5小时）
- 10.（知识学习）查看学习资料--《盒子模型概念——盒子模型》（1小时）
- 11.（知识学习）查看学习资料--《浮动——float详解》（1小时）
学习了以上知识，自己摸索写了九宫格的代码
1、不随界面缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<style>
.box{
text-align: center;
border:5px solid black;
width:1100px;
height: 1100px;
}
.box1 {
background-color:yellow;
width:300px;
height: 300px;
margin:30px;
border-radius: 10%;
float:left;
}
</style>
</head>
<body>
<div class="box">
<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>2、随界面缩放（考虑到要缩放的话需要将格子宽高改为百分比，但是高度设置百分比的时候出现错误，百度了下有个别人的解决方法：设置高度为padding-bottom或者padding-top,成功解决，但是这种方法不是很明白）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<style>
.box1 {
background-color:yellow;
width:31%;
padding-top: 31%;
margin:1%;
border-radius: 10%;
float:left;
}
</style>
</head>
<body>
<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>
</body>
</html>明天计划的事情：继续做任务
遇到的问题：
考虑到要缩放的话需要将格子宽高改为百分比，但是高度设置百分比的时候出现错误，百度了下有个别人的解决方法：设置高度为padding-bottom或者padding-top,成功解决，但是这种方法不是很明白，还请师兄指教，感谢！
收获：
体验了自己创造的乐趣
返回列表
评论