前言
突发奇想,想要给自己的网站写的简单的主页,所以有了此篇!因为也不说搞前端的,写的简陋,所以只是提供个参考!目的是为了留一个书札,或者说无聊,所以想写点东西!
正文
直接贴上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>灰犀牛团队</title>
<style type="text/css">
a{
text-decoration:none;
}
body {
margin-left: 0px;
margin-top: 0px;
}
#aa {
position: fixed;
height: 662px;
width: 1366px;
background: #FFF;
}
#bb {
background: #FFF;
position: absolute;
left: 0px;
top: 0px;
width:860px;
height:416px;
}
#cc {
background: #09C;
position: absolute;
height: 63px;
width: 1580px;
left: 0px;
top: 418px;
font-size: 36px;
color: #FFF;
}
#dd {
position: absolute;
height: 124px;
width: 175px;
left: 1142px;
top: 136px;
}
#ee {
position: absolute;
height: 295px;
width: 510px;
left: 953px;
top: 70px;
line-height: 24px;
}
#ff {
position: absolute;
height: 66px;
width: 300px;
left: 608px;
top: 553px;
font-size: 45px;
font-weight: bold;
}
.gg {
font-size: 36px;
}
#aa #bb #ee table tr td {
color: #000;
}
#aa #bb #ee table {
color: #000;
}
#gg {
position: absolute;
height: 161px;
width: 195px;
left: 573px;
top: -55px;
font-size: 16px;
}
.haha img{
width:100%;
height:100%;
}
.divcss{text-align:center}
.left{ width:30%; float:left}
.right{ width:70%; float:right;}
</style>
</head>
<body>
<div id="aa">
<div class="divcss" id="cc">
探索 团队 创新 思维© </div>
<div class="haha" id="bb">
<div id="ee">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><hr /></td>
</tr>
<tr>
<td><p>姓名:Ethan</p></td>
</tr>
<tr>
</tr>
<tr>
<td>bwapp:<a href="">渗透测试平台</a></td>
</tr>
<tr>
<td>sqli-libs:<a href="">sql注入测试平台</a></td>
</tr>
<tr>
<td>团队:灰犀牛安全团队</a></td>
</tr>
<tr>
<td>博客:<a href="">CSDN</a></td>
</tr>
<tr>
</tr>
<tr>
<td>兴趣爱好:做饭,看别人吃我做的吃饭,安全</td>
</tr>
<tr>
</tr>
<tr>
<td>QQ:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>宗旨:不积硅步,无以至千里!祝大家学习愉快!</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<img src="im.jpg" width="1580" height="418" /></div>
<div class="divcss" id="ff">
<div id="gg">
<p> </p>
<p> </p>
<p> </p>
<p><a href="">个人博客</a></p>
<form id="form1" name="form1" method="post" action="">
</form>
</div>
Hack me,Boy!
</div>
</div>
<div style="position: fixed;top: 20px;right: 20px"><!-- 此处样式是为了让锚点链接悬浮在右上角 -->
<a href="">第一关</a>
<a href="">第二关</a>
<a href="">第三关</a>
<a href="">第四关</a>
<a href="">第五关</a>
</div>
</body>
</html>
页面实现效果
结语
祝大家,新的一年有新气象,学习进步,事业顺利,幸福快乐,多来点0day!