发表于: 2016-02-16 16:44:36

1 1846


今天完成的事情:

任务三完成。切图加布局。效果:

调试在手机上可以正常显示。代码如下,希望师兄有空帮忙检查。不知道有哪些问题:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>task3</title>
<meta name="viewport" content="width=divice-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body>
<div id="top">
<img src="./image/logo1.png">
</div>
<div id="main"><img src="./image/logo4.png"></div>
<div id="word">
葡萄藤轻游戏专注于桌游领域,提供在线杀人游戏、捉鬼、炸狼堡等多种聚会游戏,以下线下桌游道具。
</div>
<div id="bottom">
<img src="./image/logo2.png">
<img src="./image/logo3.png">

</div>

</body>

</html>

@charset "utf-8";
/* CSS Document */
body{
    width:100%;
    height:100%;
    background:#68cdd5;
    }

#main
    text-align:center;
    margin:8%;
    }
#word{
    font-size:1.5em;
    color:#FCFCFC;
    text-align:center;
    margin:8%;
    
    }
#bottom{
    text-align:center;
    }
#bottom img{
    margin:5%;
    }

明天计划的事情:完成task4;

遇到的问题:不知道如何用css控制图片等比例缩小,感觉图有点大了。

收获:盒子模型,margin padding border使用更加熟练,知道了viewport和em这两个自适应。


返回列表 返回列表
评论

    分享到