CreateByGSN(还需要多学习)

​x
 
<!DOCTYPE html>
<html>
  <head>
    <mate charset="utf-8"/>
    <title>Home</title>
    <script>
        var result_1;
      function MyFunction(){
        document.getElementById("append").innerHTML="becuase of It's a unuseful page!";
    }
        function add(){
          var a,b;
        a=document.getElementById("firstNumber").value;
        b=document.getElementById("secondNumber").value;
          var result = Number(a)+Number(b);
          sendResult(result);
        }
      function sendResult(result_1) {
  var num = document.getElementById("result")
  num.innerHTML = result_1;
}
      
    </script>
  </head>
  <body id="all">
    <div id="head">
      <ul>
        <li><a>首页</a></li>
        <li>热门</li>
        <li>路线</li>
        <li>景点</li>
        <li>酒店</li>
        <li><a>帮助</a></li>
      </ul>
      <button type="button" class="login">登陆</button>
      <button type="button" class="regist">注册</button>
    </div>
    <div id="start">
      <ul>
        <li>北京：
            <select>
                <option>天安门</option>
                <option>故宫</option>
                <option>紫禁城</option>
            </select>
         </li>
        <br/>
        <li>上海：
            <select>
                <option>迪士尼</option>
                <option>外滩</option>
                <option>东方之珠</option>
            </select>
        </li>
         <br/>
        <li>广州：
            <select>
                <option>小蛮腰</option>
                <option>观音山</option>
                <option>白云山</option>
            </select>
        </li>
         <br/>
        <li>成都：
            <select>
                <option>武侯祠</option>
                <option>欢乐谷</option>
                <option>熊猫基地</option>
            </select>
        </li>
      </ul>
      <div class="description">
        <sanp>
         <p id="append">I don't waht it is!</p>
         <button type="button" onclick="MyFunction()">Do you want the reson?</button>
        </sanp>
      </div>
      <div id="math">
        <p>计算器：</p>
        <input type="text" value="" id="firstNumber"/>
        <button type="button">+</button>
        <input type="text" value="" id="secondNumber"/>
        <button type="button" onclick="add()">=</button>
        <p id="result"></p>
      </div>
    </div>
  </body>
</html>

HTML

xxxxxxxxxx
 
#all li{
  list-style:none;
}
#head{
  background:#aaa;
  width:960px;
  height:30px;
  float:left;
}
#head>ul{
  width:550px;
  height:30px;
  margin-top:0px;
  margin-left:auto;
  background:#aaa;
  float:left;
}
#head>ul>li{
  width:60px;
  height:30px;
  line-height:30px;
  float:left;
  font-weight:bold;
  padding-left:20px;
  border-radius:3px;
}
#head>button{
  width:50px;
  height:30px;
  text-align:center;
  line-height:20px;
  float:right;
  background:#555;
  color:#fff;
}
#head>ul>li:hover{
  background:#2932e1;
  color:#fff;
}
#start{
  background:#eff;
  width:960px;
  height:160px;
  float:left;
  
}
#start>ul{
  background:#eff;
  width:200px;
  height:140px;
  float:left;
}
#start>ul>li{
  color:#2932e1;
  font-size:14px;
  font-weight:bold;
}
#start>ul>li>select{
  background:#666;
  color:#fff;
}
.description{
  width:400px;
  height:140px;
  background:red;
  float:left;
  margin-top:16px;
  text-align:center;
}
.description button{
  border:1px solid black;
  border-radius:2px;
}
#math{
  width:300px;
  height:140px;
  background:blue;
  float:left;
  margin-top:16px;
}
#math>input{
   width:30px;
  height:20px;
}

CSS