发表于： 2019-09-12 08:09:28
1 904
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识
今天完成的事情:
1. 对盒子模型有了更深刻的了解
2. CSS的第一个任务 九宫格--用html+css制作一个网页 ,完成的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务1</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap div {
background:orange;
width: 31%;
padding-bottom: 31%;
float: left;
margin: 1%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
过程步骤如下:
1. HTML部分
先写一个类名为 wrap的div 为父级盒子.再往里面写9个子级div为9个方块
2. CSS部分
(1)先初始化,在*内写入 内外边距为0,及盒子模型box-sizing(有了这个在后面可以更加方便的设置宽高)
(2) 本来想给类名为wrap的父级div设置宽高的,后来想起来块级元素不设置宽度默认也是100%,所以就没设置了..
(3) 给父级div的所有子元素div写入背景颜色为橙色, 再将宽度为百分比,而后用padding-bottom撑开子元素div的高度为百分比, 宽度和padding-bottom 设为31%,使其后面浮动后保证了每行只存在3个格子,且可以根据浏览器大小而自适应.
用margin将一整条橙色长方形分隔成9个格子,由于div为块级元素,会占用一行,所以使用浮动可以将多个格子并为一行,由于先前设置好了每个格子的宽和下内边距,所以最后形成9个格子分成3行每行3个.最后再加上border-radius修饰格子的边角.
明天计划的事情：继续进行第二个任务,不懂的再继续学习详细的知识点.
遇到的问题：
问题: 给子级div设置高度为百分比时,页面直接显示空白,高度为0
解决: 后面想到了内边距可以撑开格子且可以设置百分比 适用于自适应,就改用padding-bottom了,
收获: 我是自学的,一直以看视频为主,很少手动写代码. 一直以为自己能够记住看过的知识点.而且也没有实践的地方, 开始动手写才发现有很多知识点记忆都有些模糊. 写得很慢,也一直在思考, 写完后, 使我更加的具有积极性及加深对基础的理解,.
让我最有收获的就是朋友介绍了技能树给我, 让我有了可以实践的地方,可以更好的稳固所学到的知识.,
返回列表
评论