发表于： 2017-03-08 15:24:12
1 609
今日完成工作：
今天算是正式开始做任务3，总算是有了一些眉目。主要是利用，float、position、top、left、margin等元素对div进行定位。设置div大小用的单位是rem，但是任务三中间这一行文字“葡萄藤轻游戏专注于在线桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以及线下聚会桌游道具。”本来裁剪下了图片，用图片填充这个div，由于图片比较大，调成手机浏览器模式显示效果很不理想，所以在这个div里手动输入了文字。具体效果还算理想，能适应chrome提供的各种手机屏幕。
明天继续按照验收标准完善任务三。
以下是任务三的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
body {background-image:url(task3_12.png); background-repeat:repeat;}
.a1 {width:12rem;height:6rem;background-image:url(task3_03.png);text-align: center;margin:0 auto;
background-repeat:no-repeat; }
.a2{width:20rem;margin:auto;position: absolute;
top: 42%; left: 0; right: 0;color:white;line-height:150%;font-size:120%;}
.a3 {width:7rem;height:8rem;background-image:url(task3_10.jpg);;float:right;
position:fixed; right:5%; bottom:7%;background-repeat:no-repeat; }
.a4 {width:8rem;height:8rem;background-image:url(task3_07.png);position:
fixed;left:5%; bottom:7%;background-repeat:no-repeat; }
.a5{background-image:url(task3_20.png);width:3rem;height:3rem;}
</style>
<title>魔镜</title>
</head>
<body >
<div class="a5"></div>
<div class="a1"></div>
<div class="a2">葡萄藤轻游戏专注于在线桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以及线下聚会桌游道具。</div>
<div class="a3"></div>
<div class="a4"></div>
</body>
</html>
返回列表
评论