发表于: 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>
评论