发表于： 2017-03-11 23:25:18
4 669
今天完成的事：
修不了任务4，把任务5的header和footer做好了。
明天计划的事：
完成任务5，开始任务6.
问题：
暂无大问题，明天一起总结。
收获：
学习了box-sizing属性
使用html5的写法，设置背景图片。
broder不能设置百分比，可以不设数值默认。
header和footer的固定。
html{
font-size: 62.5%;
}
body{
margin: 0;
}
img{
max-width: 100%;
max-height: 100%;
}
header{
width: 100%;
height: 6rem;
font-size: 2rem;
color: #fff;
background:#68cdd5;
text-align: center;
line-height: 6rem;
top: 0;
position: absolute;
}
main{
}
footer{
width: 100%;
height: 6rem;
font-size: 2rem;
position: absolute;
bottom: 0;
text-align: center;
}
.box{
width: 100%;
float: left;
}
.box1{
float: left;
margin: 1% 0;
margin-left: 2%;
width: 46%;
height: 4rem;
color: #68cdd5;
background: #fff;
border: solid #68cdd5;
border-radius: 1rem;
line-height: 4rem;
}
.box2{
float: left;
margin: 1% 0;
margin-left: 2%;
width: 46%;
height: 4rem;
color: #fff;
background: #68cdd5;
border: solid #68cdd5;
border-radius: 1rem;
line-height: 4rem;
}
</style>
</head>
<body>
<header>
个人主页
</header>
<main></main>
<footer>
<div class="box">
<div class="box1">留言</div>
<div class="box2">电话联系</div>
</div>
返回列表
评论