发表于： 2016-04-25 20:33:40
1 1670
今天完成的事情：完成九宫格书写，熟悉CSS和HTML基本知识（margin顺序为上右下左，只写2px auto 表示左右为自动；inline为内联元素，block为块元素，inline-block为可控制大小的内联元素），实现手机访问和电脑同时；捡到了一个新的CSS属性（border-radius圆角矩形属性）
明天计划完成的事：ubuntu下安装nginx，windows下网上说法为不能安装。完成任务二；
遇到的问题：本来想用浮动解决，发现浮动不能很好使用。nginx在win10下不能安装；
收获：捡到了一个新的CSS属性（border-radius圆角矩形属性）
以下为九宫格参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 160px;
margin: 100px auto;
font-size: 0;
}
.box div{
display: inline-block;
background: red;
width: 50px;
height: 50px;
border-radius: 3px;
margin:1px;
}
</style>
<title></title>
</head>
<body>
<div class="box">
<div class="first">
</div>
<div class="first">
</div>
<div class="first">
</div>
<div class="second">
</div>
<div class="second">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="third">
</div>
<div class="third">
</div>
</div>
</body>
</html>
返回列表
评论