发表于： 2016-04-19 22:39:35
1 1865
今天完成的事情：学会运用Margin与padding 的属性
明天计划的事情：摸索任务4
遇到的问题：刚开始我做任务3的时候想要用定位来做的，但是后来发现位置定的不是很标准，最后用了Margin与Padding
收获：深刻了知识的精华。
下面是我的代码
HTML部分：
<!--
作者：cfxinfo@163.com
时间：2016-04-14
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="conner">
<div class="top">
<img src="img/task3_01.png" />
</div>
<div class="mid">
<p class="text-one">魔镜</p>
<img class="back" src="img/task3_04.jpg"/>
<img class="more" src="img/task3_03.jpg" />
</div>
<div class="foot">
<img class="back-back" src="img/task3_10.png" />
<img class="logo-one" src="img/task3_14.png" />
<p class="text-two">葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，作鬼，咋狼堡等多种聚会游戏，以下线下聚会桌游道具。</p>
<div class="img">
<img class="logo-two" src="img/task3_18.png" />
<img class="logo-three" src="img/task3_21.png" />
</div>
</div>
</div>
</body>
</html>
CSS部分：
*{
margin: 0;
padding: 0;
}
html{
font-size: 28px;
font-family: "Hiragino Sans GB W3";
}
.conner{
width: 640px;
height: auto;
}
.conner .top{
height: 40px;
}
.conner .mid{
height: 87px;
width: 640px;
background-color: #22292c;
}
.text-one{
display: inline-block;
line-height: 96px;
color: white;
display: inline-block;
margin-left: 165px;
margin-top: -7px;
}
.back{
float: left;
}
.more{
float: right;
}
.conner .foot{
height: 1007px;
width: 640px;
background-color: #68cdd5;
}
.text-two{
line-height: 50px;
color: white;
display: inline-block;
margin: 20px 100px 30px;
}
.back-back{
display: block;
padding-top: 15px;
padding-left:28px ;
}
.logo-one{
margin: 60px auto 120px;
display: block;
}
.logo-two{
margin-left:80px ;
margin-top: 100px;
}
.logo-three{
margin-left:190px ;
margin-top: 60px;
}
效果图：
以上代码如有不足之处，请大家指点，谢谢！！！
最后我想问下如果用Position属性来布局的话，
就比如什么:
position:absolute;
left:20px;
top:90px;
是不是也是可以的？？？
返回列表
评论