console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
.container {
position: relative;
width: 100%;
}
#one,
.head {
text-align: center;
}
.head{
margin-top:30px;
}
.day {
position:absolute;
width:70px;
height:70px;
border-bottom-left-radius:20%;
border-bottom-right-radius:20%;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
}
.pass {
display:flex;
margin-left: 40px;
margin-top: -40px;
}
.news1 {
margin-left: 60px;
color: gray;
margin-top:20px;
}
.pic{
display:flex;
width:100%;
}
.one1{
position:absolute;
display:flex;
flex-direction:column;
width:100%;
margin-top:60px;
margin-left:-20px;
}
.add1{
text-decoration:none;
color:gray;
}
</style>
</head>
<body>
<div class="container">
<div class="world">
<div class="head">
<img src="https://www.zenitour.com/img/logoIndex.png">
</div>
<div id="one">
<img src="https://www.zenitour.com/upload/zetu.png" class="pic">
</div>
<div class="pass">
<img src="https://www.zenitour.com/upload/pangyinan.png" class="day">
<span style="margin-left: 52px; color: #fff ;font-size:10px; ">庞一男</span>
</div>
</div>
<div class="one1">
<p class="news1"> <a href="http://jsrun.net/uryKp" class="add1">html：简单主页</a></p>
<p class="news1"><a href="http://jsrun.net/gmyKp" class="add1"> html：各种文本</a></p>
<p class="news1"> <a href="http://jsrun.net/BryKp" class="add1">html：个人小日历</a></p>
<p class="news1"><a href="http://jsrun.net/amyKp" class="add1"> html：表单及控件</a></p>
<p class="news1"> <a href="http://jsrun.net/8MyKp" class="add1">javascript:点餐系统</a></p>
<p class="news1"><a href="http://jsrun.net/2ByKp" class="add1"> javascript:十进制转换成二进制</a></p>
<p class="news1"> <a href="http://jsrun.net/w4yKp" class="add1">javascript:字符串转换ASCII码</a></p>
<p class="news1"><a href="http://jsrun.net/KkbKp" class="add1"> javascript:单位转换</a></p>
</div>
</div>
</body>
</html>