<div>

<h2 class="top">Personal blog</h2><hr class="hrId">

<div class="whole">

  <a href="#">Home</a>&nbsp

  <a href="#">Says</a>&nbsp

  <a href="#">Logs</a>&nbsp

  <a href="#">Photos</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

  <button onclick="alertid()">

    cilck

  </button><br>

   <p id="demo" class="win" onclick="mywin()">

     Motto

  </p>

</div>

<div class="right">

  <ol>

    <li>my name</li>

    <li>my age</li>

    <li>my job</li>

    <li>my photo</li>

  </ol>

</div>

<div class="bottom">

  <button onclick="getElementById('timedata').innerHTML=Date()">

    Time

  </button>

  <p id="timedata"></p>

</div>

</div>

function mywin()

{

  document.getElementById("demo").innerHTML="I learn or I win,I never lose.";

}

function alertid()

{

  alert("欢迎你，My Personal blog!");

}

h2.top{background-color:black;margin-bottom:0;color:white;text-align:center;}

div.whole{background-color:black;height:200px;width:290px;float:left;}

hr.hrId{margin-bottom:0;}

a{color:white;}

p.win{color:#00FFFF;}

div.right{background-color:black;height:200px;width:290px;float:right;}

li{color:#F0FFFF}

div.bottom{background-color:#F5F5DC;}