发表于： 2016-07-28 01:15:11
1 1414
今日所学（今天仅睡前1h有空学，未完成昨日计划）：
1：学习理解并运用 适用手机的编码；
2：做自适应正方形的编码，通过百度学有三种，
1）利用css3视宽单位vw,好处是简便，填充内容后高度不变；坏处是据说浏览器兼容不好；效果及代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<meta name="viewport" content="width=divice-width,initial-scale=1,maximum-scale=1" />
html,body
{
margin:0px;
width:100%;
}
div#container
{
width:50%;
height:50vw;
margin:25%;
}
div#box
{
width:30%;
height:30%;
margin-left:2.5%;
margin-top:2.5%;
background-color: orange;
float:left;
border-radius:5%;
}
</style>
</head>
<body>
<div id="container">
<div id="box"><p>1</p></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</div>
</body>
</html>
2）.设置垂直方向的Padding撑开容器，好处是据说浏览器兼容性好，坏处是填充内容后高度会改变；代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<meta name="viewport" content="width=divice-width,initial-scale=1,maximum-scale=1" />
html,body
{
margin:0px;
width:100%;
}
div#container
{
width:50%;
margin:25%;
}
div#box
{
width:30%;
padding-bottom:30%;
height:0%;
margin-left:2.5%;
margin-top:2.5%;
background-color: orange;
float:left;
border-radius:5%;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</div>
</body>
</html>
3）.方法三类似2，利用新建内部容器margin-top撑开容器。坏处同样是填充内容后会改变高度；代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<meta name="viewport" content="width=divice-width,initial-scale=1,maximum-scale=1" />
html,body
{
margin:0px;
width:100%;
}
div#container
{
width:50%;
margin:25%;
}
div#box
{
width:30%;
margin-left:2.5%;
margin-top:2.5%;
background-color: orange;
float:left;
border-radius:5%;
overflow:hidden;
}
div#box1
{
content:"";
display:block;
margin-top:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
<div id="box"><div id="box1"></div></div>
</div>
</body>
</html>
今日疑问及明日计划：
1：今日自适应正方形用padding及margin撑开的方法中，填充内容会改变高度，据说可用绝对定位消除空间占用，明日试一试；
2：F2调试未完成，明日继续；
3：任务2计划完成一半；
返回列表
评论