发表于： 2019-05-20 20:41:05
1 785
今天完成的事件
由于昨制作的页面下面2个图片是不能移动的，而我做的是不符合任务要求的在思杰师兄的指导帮助下知道盒子直接的用法可以用盒子填充进行换行，把文字设置在盒子里面然后在盒子里添加高固定值。让下面2个图标可以不用跟进文字的变动而移动，也了解到怎么让图片居中的办法用margin 用auto（可以看作百分比）让2边填满把图片居中。
代码如下
body {
/* 撑起body框架 */
background-color: rgb(104, 205, 213);
/* 背景颜色 */
}
.div1 {
position: relative;
width:30px;
}
.div2 {
margin-top: 30px;
text-align:center;
font-size: 15px;
color: white;
font-weight: bold;
height: 180px;
}
.div4{
margin:0px auto 50px auto ;
display: block;
width: 100px;
}
.tupian{
position:absolute;
left: 30px;
text-align: left;
color: blueviolet;
font-weight: bold;
margin-top: 60px;
}
.tall{
width: 50px;
}
.tuwen{
margin-left:1px ;
}
.font{
position:relative;
text-align:right;
right:20px;
top:60px;
color: blueviolet;
font-weight: bold;
}
.tupian1{
width: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="body.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=NO">
</head>
<body>
<div>
<img class="div1" src="task3_03.png" alt="www" />
<div class="div2">
<img class="div4" src="task3_07.png" />
<p> 葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，
捉鬼，炸狼堡等多种聚会游戏，以线下聚会桌游道具为主。
</p>
</div>
<div >
<div class="tupian">
<img class="tall" src="task3_11.png">
<div class="tuwen">22222</div>
</div>
<div class="font">
<img class="tupian1" src="task3_14.png">
<div class="nsa" >Bjppteng</div>
</div>
</div>
</div>
</body>
</html>
任务4
通过思杰师兄的指导的思路进行简单的布局，复习所学到的知识。代码如下：
body {
/* 撑起body框架 */
background-color: rgb(104, 205, 213);
/* 背景颜色 */
}
.div1 {
position: relative;
width:30px;
}
.div2 {
margin-top: 30px;
text-align:center;
font-size: 15px;
color: white;
font-weight: bold;
height: 180px;
}
.div4{
margin:0px auto 50px auto ;
display: block;
width: 100px;
}
.tupian{
position:absolute;
left: 30px;
text-align: left;
color: blueviolet;
font-weight: bold;
margin-top: 60px;
}
.tall{
width: 50px;
}
.tuwen{
margin-left:1px ;
}
.font{
position:relative;
text-align:right;
right:20px;
top:60px;
color: blueviolet;
font-weight: bold;
}
.tupian1{
width: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="langding.css">
</head>
<body>
<div class="teach">
<img class="picture" src="1.png" />
<img class="middle" src="2.png" />
<img class="right" src="3.png" />
</div>
<div class="div">
<img class="sizg" src="02.png">
</div>
<div class="div">
<img class="sizg" src="03.png">
</div>
<div class="bottle">
<img class="base" src="04.png">
</div>
</body>
</html>
现在遇到的问题是如何在在网页输入手机号和密码明天查看一下这方面的知识。
返回列表
评论