发表于： 2017-03-23 23:55:45
4 707
今天完成的任务：
1.使用Chrome的开发者工具，使九宫格大小可以随屏幕宽度改变，
明天完成的任务：
1.查看学习资料--《viewport——什么是viewport》。
2.并使用它对html进行优化，适配移动设备。
收获：明白了响应式与自适应的区别。
<!DOCTYPE html>
<html>
<head>
<title>Sudoku</title>
<style type="text/css">
#box{margin: 0; padding: 0;list-style: none;}
div {width: 200px;height: 200px;background: white;margin: auto;}
a{list-style:none;
background:yellow;
width:calc(33.33% - 10px);
padding-bottom:calc(33.33% - 10px);
margin:5px;
float:left;}
</style>
</head>
<body>
<div> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
</body>
</html>
返回列表
评论