Version 1 Draft:
XsInfo.htmll document:
<!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"> </div> <figcaption>杜淳</figcaption> </figure> <ul class="person"> <li>AAAA</li> <li>1111111</li> <li>BBBB</li> <li>2222222</li> </ul > < div class = "Contest The vCenter" > mmmmmmmmmmmmmmmmm </ div > </ main > < footer class = "vCenter" > Department of Computer Science Shaanxi Aerospace contractors </ 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; }