发表于: 2016-04-25 20:33:40

1 1668


今天完成的事情:完成九宫格书写,熟悉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>




返回列表 返回列表
评论

    分享到