网站页面开发书札

前言

突发奇想，想要给自己的网站写的简单的主页，所以有了此篇！因为也不说搞前端的，写的简陋，所以只是提供个参考！目的是为了留一个书札，或者说无聊，所以想写点东西！

正文

直接贴上代码

<!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="">优快云</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!