完成任务三
遇到问题不知道怎么缩小图片而且也不知道如何让图片随着浏览器的变大变小怎么弄，在这不断的调试用float:left;浮动类型知道了浮动类型如果遇到空白处没有元素它就会自动往上调。而且我的思是怎么用一个大框架在里面输入图片来移动图片然后让大框架随着浏览器的变动而，图片位置不变仍然在中间或2边。看关楠师兄的日报。
body {
/* 撑起body框架 */
background-color: rgb(104, 205, 213);
/* 背景颜色 */
}
.div {
position: relative;
padding: 1rem 20%;
}
.div1 {
position: relative;
width:2rem;
left:-3rem;
top: -1rem;
}
.div2 {
margin-top: 2rem;
text-align:center;
font-size: 1rem;
color: white;
font-weight: bold;
}
.div3{
margin-bottom:3rem;
}
.div4{
margin-top:3rem;
}
.tupian{
position: relative;
left: -2rem;
width: 4rem;
text-align: left;
color: blueviolet;
font-weight: bold;
margin-top:3rem ;
}
.div5{
width: 4rem;
}
.p{
position: relative;
left:0.5rem;
}
.div6{
position:relative;
text-align:right;
right:-2rem;
top:-6.5rem;
color: blueviolet;
font-weight: bold;
margin-top: 1rem;
}
.tupian1{
width: 4rem;
}
.p{
}
<!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 class="div">
<img class="div1" src="task3_03.png"alt="www"/>
<div class="div2">
<div class="div3">
<img class="div4" src="task3_07.png"/>
</div>
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，
捉鬼，炸狼堡等多种聚会游戏，以线下聚会桌游道具为主。
</p>
</div>
<div class="tupian">
<div>
<img class="div5" src="task3_11.png">
</div>
<div class="p">22222</div>
</div>
<div class="div6">
<div>
<img class="tupian1" src="task3_14.png" >
</div>
<div class="p">Bjppteng</div>
</div>
</body>
</html>
知道父类是个什么意思就相当于我想的那个大框架里面设置小框架也就是子类来进行调试<div class="div">class里面的样式属性是可以影响到子类<img calss="div1"> 而这里面的选择器可以进行调试图片的大小或者位移都行，后面2个图片就根据自己的设想进行布局的。
通过这个任务让我了解到父类的用法是，知道浮动模型在IE浏览器中如果有空白元素那么 设置浮动模型会自动填充到上面去，知道如何应用相对定位position:relative;的用法以及position是指最外面那个边框用来移动图片。
理解并知道
text-align;属性
是用来设置文本对齐方式同样对图片也有效果。
text-align:center;
由浏览器文本排列到中间对齐
text-align：left；
文本从左对齐
text-align:right;
文本从右对齐
font-weight属性
文字设置不同字体粗细。
对标签和属性的用法不熟练导致不知道如何实现自己的布局想法明天上午复习下标签和属性的使用。
返回列表
评论