SOURCE

<div class="header">
	<div class="logo"></div>
	<center>
		<div class="nav">
			<ul id="wrap">
				<li><a href="main0.html">首页</a></li>
				<li><a href="main1.html">酒馆</a></li>
				<li><a href="main2.html">关于</a></li>
			</ul>
		</div>
	</center>
</div>
<div class="main2">
    <div class="logo">
        <img src="http://114.116.34.206/touxiang.jpg">
    </div>
    <div class="name">
        <span>highfly</span>
    </div>
    <div class="info">
        <ul>
            <li>班级：17计一</li>
            <li>学号：1**********9</li>
            <li>喜欢：c(唱)t(跳)r(rap)l(篮球)</li>
            <li><img src="http://114.116.34.206/gaoci.jpg"></li>
        </ul>
    </div>
</div>
<div class="footer"></div>

* {
    padding: 0;
    margin: 0;
}

.nav li {
    list-style: none;
    display: inline-block;
}

.nav li a {
    text-decoration: none;
    position: relative;
    color: #aaa;
    font-size: 30px;
    font-weight: 700;
    font-family: sans-serif;
    display: block;
    overflow: hidden;
    transition: 0.7s all;
    padding: 10px 20px;
    text-transform: uppercase;
}

.nav li a:before {
    content: '';
    width: 60px;
    position: absolute;
    border-bottom: 8px solid;
    bottom: 0;
    right: 350px;
    transition: 0.7s all;
}

.nav li a:hover:before {
    right: 0;
}

#wrap {
    background: #333;
}

.main2 .logo {
    width: 100%;
    height: 120px;
    text-align: center;
}

.main2 .logo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px #aaa solid;
    display: inline-block;
    margin: 10px 0;
}

.main2 .name {
    text-align: center;
    display: block;
}

.main2 .info {
    text-align: center;
    margin: 20px 0;
    font-size: 30px;
    font-family: sans-serif;
}

.main2 .info li {
    margin: 10px 0;
    padding: 10px 0;
}