发表于： 2018-11-16 20:25:32
2 759
今天完成的事情：开始做任务五，进度缓慢。47.104.248.130
遇到的问题挺多的 1. 分辨率改变文字位置不能固定。
2.vertical-align设置了没效果，图标和文字不能水平居中，图片在上文字在下。
3.自己在绝对定位相对定位这方面知识掌握不过关，所以做得很慢，在下图
布局没有之前顺利，但自己又不知道哪里错，请师兄指导。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>personalpage</title>
<style>
.header{
position: relative;
margin: 0 auto;
height:12vw;
width: 100%;
background-color:#5fc0cd;
}
.headercontent{
position: absolute;
margin:auto;
left:50%;
top:50%;
transform:translate(-50%, -50%);
text-align:center;
color:white;
font-weight: 300;
font-size: 48px;
font-size:3rem;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.headericon{
position: absolute;
margin:auto;
top:50%;
left:5%;
transform:translate(-5%,-50%);
width:auto;
height:auto;
}
.banner{
line-height: 100%;
position: relative;
margin: 0 auto;
height:auto;
width: 100%;
overflow: hidden;
}
.portrait{
position: absolute;
margin:auto;
top:50%;
left:10%;
height: auto;
width: auto;
transform: scale(1.5,1.5) translate(-7.5%,-37.5%);
}
.Pinformation{
position:absolute;
margin:auto;
top:45%;
left:35%;
transform:translate(-35%,-45%);
height:auto;
width:auto;
font-size: 32px;
font-size:2rem;
font-weight: 300;
color:white;
}
.adressicon{
display:table-cell;
vertical-align:middle;
position: absolute;
line-height: 32px;
margin:auto;
top: 50%;
left: 35%;
transform: translate(-35%,-60%);
font-size: 32px;
font-size: 2rem;
color:white;
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.adress{
position:absolute;
margin:auto;
top:40%;
left:42%;
transform:translate(-42%,-40%);
height:auto;
width:auto;
font-size: 32%;
font-size:2rem;
font-weight: 300;
color:white;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<h class="header">
<p1 class="headercontent">
个人主页
</p1>
<img class=headericon src="/image/returnicon.png">
</h>
<p1 class="banner">
<img style="width:100%" src="/image/banner.jpg">
<img class="portrait" src="/image/portrait.png">
<p class="Pinformation" style="font-size: 3rem" >徐士林 55岁</p>
</p1>
<p2 class="adressicon">
<p3 ><img src="/image/zuobiaoicon.png">北京·通州·果园</p3>
</p2>
</body>
</html>
返回列表
评论