发表于： 2019-10-28 16:45:50
2 938
今日完成：
给html添加样式，使其成为黄色正方形：
使用div,给其添加样式，设置背景色、长、宽和边框圆角等信息。
Sudoku.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sudoku</title>
<link rel="stylesheet" type="text/css" href="../css/sudoku.css">
</head>
<body>
<div></div>
</body>
</html>
sudoku.css
div {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 10px;
}
其中width 为宽度，height为高度。它的单位px为相对长度，pixel(像素)。大概意思就是它的具体长度会随着屏幕分辨率的改变而改变。当然还有其它的一些单位，可以参考下面这篇文章：
https://www.cnblogs.com/lenther2002/p/5092448.html（css中pt、px、em、ex、in等这类长度单位详细说明）
background-color可以用来设置其背景颜色;
border-radius 用来设置其边框圆角。
继续添加样式，以float浮动的方式布局，使其组合为九宫格：
Sudoku.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Sudoku</title>
<link rel="stylesheet" type="text/css" href="../css/sudoku.css">
</head>
<body id="outer">
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
</body>
</html>
sudoku.css：
.one {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 10px;
margin: 5px;
border:1px solid transparent;
padding:1px;
float: right;
color: transparent;
}
#outer{
width: 400px;
height: 400px;
border: 1px solid transparent;
}
遇到的问题：
刚开始的效果：
总是会重叠，搞了好久才知道是因为div中没有内容。
所以最后给它填充了内容1，并把1设为透明。
感觉应该还有更好的解决方法吧
收获：
了解了css的盒子模型以及float的使用
明日计划：
修改css使得九宫格自适应。
总结盒子模型完成任务一。
返回列表
评论