发表于： 2019-12-11 01:26:27
2 924
今天完成的事情：
根据页面需要用ps将需要的图片剪切出来
由于底下两个图标分别是左右浮动所以要分别切出来，一起就是四张图片
下面是一些代码，有不对的地方希望师兄指正：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>葡萄藤</title>
<link rel="stylesheet" href="learn1.css">
</head>
<body>
<div>
<div>
<img src="task10.jpg" alt="">
</div>
<div>
<img src="task9.jpg" alt="">
</div>
<div>
<span>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。
</span>
</div>
<div>
<img src="task7.jpg" alt="">
</div>
<div>
<img src="task8.jpg" alt="">
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
font-size:10px;
background-color:#68cdd5;/*rgb(104,205,213)*/
}
.return{
height:6rem;
}
.return1{
height:5rem;
width:5rem;
}
.logo{
margin:0 auto;
text-align:center;
width:auto;
height:14rem;
}
.logo1{
height:9rem;
width:18rem;
}
.character{
text-align:center;
font-size:1.4rem;
font-weight:bold;
color:#fff;
margin:0 10%;
height:auto;
width:auto;
}
.cornermark_box1{
float:left;
margin-top:20%;
}
.cornermark1,.cornermark2{
height:15rem;
width:15rem;
}
.cornermark_box2{
float:right;
margin-top:20%;
}
（图片好像不能上传）
自己根据任务四练习的相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单提交表单</title>
</head>
<body>
<div>
<h2>登录界面</h2>
<form action="">
用户名：<input type="text"><br />
密码:<input type="password">
<input type="submit">
</form>
</div>
</body>
</html>
明天的计划：
提交任务三，了解任务四
遇到的困难：
没有设置html的宽高并且去掉了标签的margin和padding使页面缩放时很乱，对颜色的编码不明白，看了一下关于十六进制和颜色编码的格式。
收获：
知道了颜色的十六进制和书写格式，还有对于自适应的环境中对html和body设置宽高为100%的重要性。
大致知道了viewport的概念，设置viewport可以使设计的网页根据设备的不同尺寸不同分辨率使页面自适应效果。
返回列表
评论