选手信息展示界面模板-Blue

版本1草稿:

XsInfo.htmll文档:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选手信息</title>
<link rel="stylesheet" type="text/css" href="Blue/css/blue.css">
</head>
<body>
<header class="vcenter">
陕西航天大学2020歌咏大赛
</header>
<main>
<figure>
<div class="pic">&nbsp;</div>
<figcaption>杜淳</figcaption>
</figure>
<ul class="person">
<li>AAAA</li>
<li>1111111</li>
<li>BBBB</li>
<li>2222222</li>
</ul>
<div class="contest vcenter">
mmmmmmmmmmmmmmmmm
</div>
</main>
<footer class="vcenter">陕西航天大学计算机系承办</footer>
</body>
</html>

Blue.css

@charset "utf-8";
/* CSS Document */
*{
    padding:0;    
    margin:0;
    box-sizing:border-box;    
}
html,body{
    height:100%;    
}
body{
    position:relative;
    background-image:url(../bg.jpg);
    background-size:100% 100%;
    border:30px solid #000 ;
    -webkit-border-image:url(../border.png) 30 round; 
    -o-border-image:url(../border.png) 30 round; 
    border-image:url(../border.png) 30 round;
}
/**/
.vcenter{
    display: flex;
    justify-content: center;
    align-items: center;
}

header,footer{
    text-align:center;
    position:absolute;
    margin:0;    
}
header{    
    top:2%;    
    height:20%;
    width:100%;
    background-color:#F00;    
}
main{    
    position:absolute;
    top:22%;
    height:68%;
    width:100%;
    background-color:#00F;
}
figure{
    display:block;
    width:40%;
    height:70%;
    margin-left:auto;
    margin-right:auto;
    background-color:#F0F;
    position:relative;
}
.pic{
    width:40%;
    height:70%;
    background-image:url(../../img/Xs/杜淳.jpg);
    background-size:100% 100%;    
}
.person{
    position:absolute;
    top:10%;
    left:50%;    
}
.contest{
    position:absolute;
    text-align:center;
    height:30%;
    width:80%;
    bottom:0;
    margin-left:10%;
    margin-right:10%;
    background-color:#FF0;
}
footer{        
    height:10%;
    width:100%;
    bottom:0;
    background-color:#F0F;
}

来源：https://www.cnblogs.com/dshow/p/12215176.html

标签

position