发表于： 2019-03-22 17:16:45
4 843
今天完成的事情
1.任务一的九宫格
css代码
body
{ /*宽长占30%*/
width:100%;
/*高300px*/
height: 1000px;
}
div
{ /*宽长占30%*/
width:30%;
/*高300px*/
/*height:300px;*/
/*颜色*/
background-color:orange ;
/*右间距*/
margin-right:10px;
/*下间距*/
margin-bottom:10px;
padding-bottom:28%;
/*靠左浮动*/
float: left;
}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body>
</html>
明天计划的事情
任务二都会。直接开始任务三
遇到的问题
无
收获
学习了盒子模型
如何外联css
<link rel="stylesheet" href="../css/test.css">
自适应
让九宫格可以随着浏览器宽度改变大小而不改变比例，
盒子的width 和badding-bottom 都使用%为单位
视口的作用，在不同设备上都能给人舒服的阅读感受
viewport
返回列表
评论