JavaWeb基础知识:Html,Css和Javascript项目实战

Posted 万合天宜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaWeb基础知识:Html,Css和Javascript项目实战相关的知识,希望对你有一定的参考价值。

html,Css和javascript项目实战

项目1:使用Html5的Canvas对象绘制一个圆形钟盘,显示实时时间

  • 效果图如下

  • 代码如下

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <canvas id="canvas" width="500" height="500"></canvas>
            <script>
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");
    
                function drawClock()
                    context.clearRect(0,0,500,500);
    
                var now = new Date();
                var sec = now.getSeconds();
                var min = now.getMinutes();
                var hours = now.getHours();
                //小时必须获取浮点类型 (小时+分钟/60)
                hours = hours+min/60;
                var hours = hours>12?hours-12:hours;
    
                context.lineWidth = 10;
                context.strokeStyle = "blue";
                context.beginPath();
                context.arc(250,250,200,0,360,false);
                context.closePath();
                context.stroke();
    
                for(var i=0;i<12;i++)
                    context.save();
                    context.lineWidth = 7;
                    context.strokeStyle = "#000";
                    context.translate(250,250);
                    context.rotate(i*30*Math.PI/180);
                    context.beginPath();
                    context.moveTo(0,-170);
                    context.lineTo(0,-190);
                    context.closePath();
                    context.stroke();
                    context.restore();
                
    
                for(var i=0;i<60;i++)
                    context.save();
                    context.beginPath();
                    context.lineWidth = 5;
                    context.strokeStyle = "#000";
                    context.translate(250,250);
                    context.rotate(i*6*Math.PI/180);
                    context.moveTo(0,-180);
                    context.lineTo(0,-190);
                    context.closePath();
    
                    context.stroke();
                    context.restore();
                
    
                context.save();
                context.lineWidth = 7;
                context.strokeStyle = "#000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(hours*30*Math.PI/180);
                context.moveTo(0,-140);
                context.lineTo(0,10);
                context.closePath();
                context.stroke();
                context.restore();
    
                context.save();
                context.lineWidth = 5;
                context.strokeStyle = "#000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(min*6*Math.PI/180);
                context.moveTo(0,-140);
                context.lineTo(0,10);
                context.closePath();
                context.stroke();
                context.restore();
    
                context.save();
                context.lineWidth = 5;
                context.strokeStyle = "#ff0000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(sec*6*Math.PI/180);
                context.moveTo(0,-160);
                context.lineTo(0,15);
                context.closePath();
                context.stroke();
                context.restore();
                
    
                setInterval(drawClock,1000);
            </script>
        </body>
    </html>
    

    项目2:模拟手机上的7881网页,使用Html,Css和Javascript联合开发

    1. 主页

    • 效果图如下

  • index.html主页主要代码如下


    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function init() 
                document.getElementById("seach").value = "输入搜索的内容";
            
    
            function _focus() 
                document.getElementById("seach").value = "";
            
    
            function _blur() 
                var name = document.getElementById("seach").value;
                if (name == "") 
                    document.getElementById("seach").value = "输入搜索的内容";
                 else 
                    document.getElementById("seach").style.color = "black";
                
            
            function clickme()
                alert("假装你已经搜到了种子!");
            
        </script>
        <style>
            #top 
                background-color: #E4F2FC;
            
            .div_user 
                position: relative;
                float: right;
                margin-top: 20px;
                margin-right: 20px;
            
            #left 
                width: 33.3%;
                position: relative;
                float: left;
            
            #center 
                width: 33.3%;
                position: relative;
                float: left;
            
            #right 
                width: 33.3%;
                position: relative;
                float: left;
            
            #bottom 
                position: relative;
                float: left;
                width: 100%;
            
        </style>
    </head>
    
    <body style="margin:0;background:#E4E4E4" onload="init()">
        <div id="top">
            <img src="../img/7881/logo.png" />
            <div class="div_user">
                <a href="login.html" style="text-decoration: none;">登录</a>&nbsp;
                <a href="regist.html" style="text-decoration: none;">注册</a>
            </div>
        </div>
        <div id="headad">
            <img src="../img/7881/s01.jpg" style="width: 100%;" onclick="location.href='login.html'" />
        </div>
        <div id="left">
            <img src="../img/7881/i01.png" width="100%" height="50%" onclick="location.href='buy.html'" />
            <img src="../img/7881/i02.png" width="100%" height="50%" onclick="location.href='change.html'" />
        </div>
        <div id="center">
            <img src="../img/7881/i05.png" width="100%" height="100%" onclick="location.href='list.html'" />
        </div>
        <div id="right">
            <img src="../img/7881/i03.png" width="100%" height="50%" onclick="location.href='list.html'" />
            <img src="../img/7881/i04.png" width="100%" height="50%" onclick="location.href='login.html'" />
        </div>
        <div id="bottom">
            <p align="center">
                <input type="text" id="seach" onfocus="_focus()" onblur="_blur()" style="color: darkgrey;" />
                <input type="button" value="搜索" onclick="clickme()" />
                <br> (c) Copyright 2016 Administrator. All Rights Reserved.
            </p>
        </div>
    </body>
    

2. 登录界面

  • 效果图如下

  • login.html登录页主要代码如下

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script>
                function clickme() 
                    var name = document.getElementById("name").value;
                    var pass = document.getElementById("pass").value;
                    var reg = /^[\\w]6,12$/;
                    if(name =="用户名:" || pass == "密码:" || !pass.match(reg))
                        alert("用户名或密码错误");
                    else
                        location.href = "index.html";
                    
                
    
                function init() 
                    document.getElementById("name").value = "用户名:";
                    document.getElementById("pass").value = "密码:";
                
    
                function name_focus() 
                    document.getElementById("name").value = "";
                
    
                function pass_focus() 
                    document.getElementById("pass").value = "";
                    document.getElementById("pass").type = "password";
                
    
                function name_blur() 
                    var name = document.getElementById("name").value;
                    if (name == "") 
                        document.getElementById("name").value = "用户名:";
                     else 
                        document.getElementById("name").style.color = "black";
                    
                
    
                function pass_blur() 
                    var pass = document.getElementById("pass").value;
                    if (pass == "") 
                        document.getElementById("pass").value = "密码:";
                        document.getElementById("pass").type = "text";
                     else 
                        document.getElementById("pass").style.color = "black";
                    
                
            </script>
            <style>
                .div_head 
                    width: 100%;
                    height: 50px;
                    background: #0073C3;
                    padding-top: 15px;
                
                #img_back 
                    width: 25px;
                    height: 25px;
                    margin-top: 5px;
                    margin-left: 12px;
                    position: relative;
                    float: left;
                
                #img_home 
                    position: relative;
                    float: right;
                    width: 32px;
                    height: 30px;
                    margin-top: 5px;
                    margin-right: 14px;
                
                span 
                    font-size: 25px;
                    color: white;
                    font-family: "微软雅黑";
                    margin-top: 20px;
                
                input 
                    width: 80%;
                    height: 20px;
                    margin: 8px;
                    padding: 10px;
                    color: #B2B2B2;
                    font-size: large;
                
                #btn 
                    width: 85%;
                    background: #F9873C;
                    height: 50px;
                    color: white;
                    margin-top: 25px;
                    font-size: large;
                
                #a_login 
                    position: relative;
                    float: left;
                    margin-left: 60px;
                    margin-top: 30px;
                
                #a_regist 
                    position: relative;
                    float: right;
                    margin-right: 60px;
                    margin-top: 30px;
                
            </style>
        </head>
    
        <body style="margin:0;background:#E4E4E4" id="body" onload="init()">
            <div class="div_head">
                <p align="center" style="margin-top: 0px;">
                    <a href="index.html">
                        <img src="../img/7881/back.png" id="img_back" />
                    </a>
                    <span>会员登录</span>
                    <a href="index.html">
                        <img src="../img/7881/home.png" id="img_home" />
                    </a>
                </p>
            </div>
            <center style="margin-top: 20px; height: 200px;">
                <input type="text" id="name" onfocus="name_focus()" onblur="name_blur()" />
    
                <input type="text" id="pass" onfocus="pass_focus()" onblur="pass_blur()" />
    
                    <input type="button" value="登录" id="btn" onclick="clickme()" />
            </center>
            <div style="height: 80px;" align="center">
                <p>
                    <a href="regist.html" id="a_login" style="text-decoration: none;">用户注册</a>
                    <a href="#" id="a_regist" style="text-decoration: none;">忘记密码</a>
                </p>
            </div>
    
            <div style="height: 50px;" align="center">
                <p>
                    <a href="index.html" style="text-decoration: none;">登录</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="regist.html" style="text-decoration: none;">注册</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#body" style="text-decoration: none;">返回顶部</a>
                </p>
            </div>
    
            <div align="center">
                (c) 2014 m.7881.com
            </div>
    
        </body>
    
    </html>
    

    3. 注册界面

    • 效果图如下

    • regist.html注册页主要代码如下

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title></title>
          <script>
              function register() 
                  var pass = document.getElementById("pass");
                  var conpass = document.getElementById("conpass");
                  var reg = /^[\\w]6,12$/;
                  var passValue = pass.value;
                  var conpassValue = conpass.value;
                  if (passValue == "密码:(6-12位英文或数字)" || conpassValue == "确认密码:") 
                      alert("密码不完整");
                      return;
                  
                  if (passValue != conpassValue) 
                      alert("两次密码不一致!");
                   else 
                      if (!passValue.match(reg)) 
                          alert("密码格式不对");
                       else 
                          location.href = "index.html";
                      
                  
              
      
              function init() 
                  document.getElementById("phone").value = "请输入你的手机号码:";
                  document.getElementById("pass").value = "密码:(6-12位英文或数字)";
                  document.getElementById("conpass").value = "确认密码:";
                  document.getElementById("phone_very").value = "请输入手机验证码";
              
      
              function phone_focus() 
                  document.getElementById("phone").value = "";
              
      
              function pass_focus() 
                  document.getElementById("pass").value = "";
                  document.getElementById("pass").type = "password";
              
      
              function conpass_focus() 
                  document.getElementById("conpass").value = "";
                  document.getElementById("conpass").type = "password";
              
      
              function very_focus() 
                  document.getElementById("phone_very").value = "";
              
      
              function phone_blur() 
                  var phone = document.getElementById("phone").value;
                  if (phone == "") 
                      document.getElementById("phone").value = "请输入你的手机号码:";
                   else 
                      document.getElementById("phone").style.color = "black";
                  
              
      
              function pass_blur() 
                  var pass = document.getElementById("pass").value;
                  if (pass == "") 
                      document.getElementById("pass").value = "密码:(6-12位英文或数字)";
                      document.getElementById("pass").type = "text";
                   else 
                      document.getElementById("pass").style.color = "black";
                  
              
      
              function conpass_blur() 
                  var conpass = document.getElementById("conpass").value;
                  if (conpass == "") 
                      document.getElementById("conpass").value = "确认密码:";
                      document.getElementById("conpass").type = "text";
                   else 
                      document.getElementById("conpass").style.color = "black";
                  
              
      
              function very_blur() 
                  var very = document.getElementById("phone_very").value;
                  if (very == "") 
                      document.getElementById("phone_very").value = "请输入手机验证码";
                   else 
                      document.getElementById("phone_very").style.color = "black";
                  
              
          </script>
          <style>
              @import url("../css/head.css");
              #phone,
              #pass,
              #conpass 
                  width: 90%;
                  margin: 8px;
                  padding: 10px;
                  color: #B2B2B2;
                  font-size: large;
              
              #btn 
                  width: 95%;
                  background: #F9873C;
                  height: 50px;
                  color: white;
                  margin-top: 25px;
                  font-size: large;
              
              #phone_very 
                  width: 50%;
                  position: relative;
                  float: left;
                  margin: 8px;
                  padding: 10px;
                  color: #B2B2B2;
                  font-size: large;
              
              #btn_very 
                  width: 30%;
                  position: relative;
                  float: right;
                  height: 42px;
                  margin: 8px;
                  padding: 5px;
                  color: #E1E5D6;
                  background: #898989;
                  font-size: large;
              
              .div_very 
                  width: 98%;
                  height: 60px;
              
          </style>
      </head>
      
      <body style="margin:0;background:#E4E4E4" onload="init()">
      
          <div class="div_head">
              <p align="center" style="margin-top: 0px;">
                  <a href="index.html">
                      <img src="../img/7881/back.png" id="img_back" />
                  </a>
                  <span>会员注册</span>
                  <a href="index.html">
                      <img src="../img/7881/home.png" id="img_home" />
                  </a>
              </p>
          </div>
      
          <center style="margin-top: 20px; height: 350px;">
              <input type="phone" id="phone" value="请输入你的手机号码:" onfocus="phone_focus()" onblur="phone_blur()" />
      
              <input type="text" id="pass" value="密码:(6-12位英文或数字)" onfocus="pass_focus()" onblur="pass_blur()" />
      
              <input type="text" id="conpass" value="确认密码:" onfocus="conpass_focus()" onblur="conpass_blur()" />
      
              <div class="div_very">
                  <input type="text" id="phone_very" value="请输入手机验证码" onfocus="very_focus()" onblur="very_blur()" />
                  <input type="button" id="btn_very" value="发送验证码" />
              </div>
      
              <input type="button" value="注册" id="btn" onclick="register()" />
          </center>
      
          <div style="height: 50px;" align="center">
              <p>
                  <a href="login.html" style="text-decoration: none;">登录</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="regist.html" style="text-decoration: none;">注册</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="#body" style="text-decoration: none;">返回顶部</a>
              </p>
          </div>
      
          <div align="center">
              (c) 2014 m.7881.com
          </div>
      
      </body>
      

    4. 物品详情页

    • 效果图如下

    • list.html物品详情页主要代码如下


      <head>
          <meta charset="utf-8">
          <title></title>
          <style>
              @import url("../css/head.css");
          .continar 
              background: white;
              height: 410px;
              width: 94%;
              margin-top: 15px;
          
          #btn 
              width: 94%;
              background: #F9873C;
              height: 50px;
              color: white;
              margin-top: 15px;
              font-size: large;
          
          font 
              position: relative;
              float: left;
          
          #backlist 
              position: relative;
              float: right;
          
      </style>
      

      <div class="div_head">
          <p align="center" style="margin-top: 0px;">
              <a href="index.html">
                  <img src="../img/7881/back.png" id="img_back" />
              </a>
              <span>忘仙</span>
              <a href="index.html">
                  <img src="../img/7881/home.png" id="img_home" />
              </a>
          </p>
      </div>
      
      <center>
          <div class="continar">
              <p style="width: 80%; ">
                  <font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-top: 20px;margin-bottom: 10px;">寄</font>&nbsp;&nbsp;
                  <b><font color="#1873CC" size="4" style="padding: 5px;margin-top: 20px;font-family: '微软雅黑';margin-bottom: 10px;">7300银两=100元  &nbsp;即买即发</font></b>
              </p>
              <br/>
              <hr width="80%" />
              <p style="width: 80%; ">
                  <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏名称:忘仙</font></b>
              </p>
              <br/>
              <p style="width: 80%; ">
                  <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏区服:三区/万剑逍遥</font></b>
              </p>
              <br/>
              <p style="width: 80%; ">
                  <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏类型:游戏币</font></b>
              </p>
              <br/>
              <p style="width: 80%; ">
                  <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 单件数量:7300银两</font></b>
              </p>
              <br/>
              <p style="width: 80%; ">
                  <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 商品单价:0.0135698515744元/银两</font></b>
              </p>
              <br/>
              <p style="width: 80%; ">
                  <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-bottom: 15px;"> 商品库存:1件</font></b>
              </p>
              <br/>
              <br/>
              <hr width="80%" />
              <p style="width: 80%; ">
                  <b><font color="#FF6600" size="6" style="font-family: '微软雅黑';">¥100</font>&nbsp;&nbsp;</b>
                  <font id="backlist" color="#1873CC" size="5" style="font-family: '微软雅黑';margin: 4px;"><a href="list.html" style="text-decoration: none;">返回列表页</a></font>
              </p>
              <br/>
          </div>
      
          <a href="index.html" style="text-decoration: none;">
              <input type="button" value="立即购买" id="btn" />
          </a>
      </center>
      
      <div style="height: 50px;" align="center">
          <p>
              <a href="login.html" style="text-decoration: none;">登录</a> &nbsp;&nbsp;|&nbsp;&nbsp;
              <a href="regist.html" style="text-decoration: none;">注册</a> &nbsp;&nbsp;|&nbsp;&nbsp;
              <a href="#body" style="text-decoration: none;">返回顶部</a>
          </p>
      </div>
      

5. 手游交易界面

  • 效果图如下

  • change.html手游交易界面主要代码如下


    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            @import url("../css/head.css");
            .tab 
                background: white;
                width: 90%;
                border: solid thin #E4E4E4;
                font-size: 20px;
                color: #6F7383;
            
            .more 
                width: 100%;
                height: 40px;
            
            #moreGm 
                position: relative;
                float: right;
                margin-right: 20px;
            
            #left_content 
                position: absolute;
                margin-left: 22px;
            
            #right_content 
                position: absolute;
                margin-left: 22px;
            
        </style>
        <script>
            function showLeft() 
                // 显示左边
                document.getElementById("left_content").style.visibility = "visible";
                document.getElementById("right_content").style.visibility = "hidden";
            
    
            function showRight() 
                // 显示右边
                document.getElementById("right_content").style.visibility = "visible";
                document.getElementById("left_content").style.visibility = "hidden";
            
        </script>
    </head>
    
    <body style="margin:0;background:#E4E4E4">
    
        <div class="div_head">
            <p align="center" style="margin-top: 0px;">
                <a href="index.html">
                    <img src="../img/7881/back.png" id="img_back" />
                </a>
                <span>手游交易</span>
                <a href="index.html">
                    <img src="../img/7881/home.png" id="img_home" />
                </a>
            </p>
        </div>
    
        <center>
            <table style="width: 100%; height: 30px; margin-top:30px ;font-size: 20px;color: #6F7383;">
                <tr>
                    <th><a href="#" onclick="showLeft()" style="text-decoration: none;">热门游戏</a></th>
                    <th><a href="#" onclick="showRight()" style="text-decoration: none;">最近浏览</a></th>
                </tr>
            </table>
            <hr width="90%" style="margin-top: 15px;margin-bottom: 15px;"></hr>
    
            <div style="height: 200px;" align="center">
                <table class="tab" id="left_content" border="1px" cellpadding="0px" cellspacing="0px">
                    <tr style="height: 50px;">
    
                        <td style="width: 50%"><font style="margin-left: 20px;">忘仙</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">神魔</font></td>
    
                    </tr>
                    <tr style="height: 50px;">
                        <td style="width: 50%"><font style="margin-left: 20px;">仙变</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">时空猎人</font></td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="width: 50%"><font style="margin-left: 20px;">神与魔</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">九州OL</font></td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="width: 50%"><font style="margin-left: 20px;">世界OL</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">诸神OL</font></td>
                    </tr>
                </table>
    
                <table id="right_content" class="tab" border="1px" cellpadding="0px" cellspacing="0px" style="visibility: hidden;">
                    <tr style="height: 50px;">
    
                        <td style="width: 50%"><font style="margin-left: 20px;">1</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">2</font></td>
    
                    </tr>
                    <tr style="height: 50px;">
                        <td style="width: 50%"><font style="margin-left: 20px;">3</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">4</font></td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="width: 50%"><font style="margin-left: 20px;">5</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">6</font></td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="width: 50%"><font style="margin-left: 20px;">7</font></td>
                        <td style="width: 50%"><font style="margin-left: 20px;">8</font></td>
                    </tr>
    
                </table>
            </div>
        </center>
    
        <div class="more">
            <b>
            <p id="moreGm"><a href="#" style="text-decoration: none;"><font color="#1280C8">更多手机游戏>></font></a></p>
            </b>
        </div>
    
        <div style="height: 50px;" align="center">
            <p>
                <a href="login.html" style="text-decoration: none;">登录</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="regist.html" style="text-decoration: none;">注册</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#body" style="text-decoration: none;">返回顶部</a>
            </p>
        </div>
        <div align="center">
            (c) 2014 m.7881.com
        </div>
    
    </body>
    

6. 购物清单页

  • 效果图如下

  • buy.html购买清单页主要代码如下


    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function clickme() 
                var result = confirm("确认购买吗?");
                if (result) 
                    alert("购买成功");
                 else 
            
        </script>
        <style>
            @import url("../css/head.css");
            .first 
                background: white;
                height: 140px;
                width: 94%;
                margin-top: 15px;
            
            .second 
                background: white;
                height: 140px;
                width: 94%;
                margin-top: 5px;
            
            .three 
                background: white;
                height: 140px;
                width: 94%;
                margin-top: 5px;
            
            .decs 
                position: relative;
                float: left;
                width: 220px;
                height: 120px;
            
            .buy 
                position: relative;
                float: right;
            
            font 
                position: relative;
                float: left;
            
            input 
                width: 60px;
                height: 30px;
                background: #0073C3;
                color: white;
                font-size: 18px;
                margin-right: 28px;
                margin-top: 60px;
            
        </style>
    </head>
    
    <body style="margin:0;background:#E4E4E4">
    
        <div class="div_head">
            <p align="center" style="margin-top: 0px;">
                <a href="index.html">
                    <img src="../img/7881/back.png" id="img_back" />
                </a>
                <span>忘仙</span>
                <a href="index.html">
                    <img src="../img/7881/home.png" id="img_home" />
                </a>
            </p>
        </div>
    
        <center>
            <div class="first">
                <div class="decs">
                    <p>
                        <font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px;">寄</font>&nbsp;&nbsp;
                        <b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微软雅黑';">7300银两=100元</font></b>
                        <font></font>
                    </p>
                    <p>
                        <b><font color="#FF6600" size="5" style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px;">¥100</font>&nbsp;&nbsp;</b>
                    </p>
    
                    <p>
                        <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px;"> 三区/万剑逍遥/游戏币</font></b>
                    </p>
                </div>
    
                <div class="buy">
                    <input type="button" value="购买" onclick="clickme()" />
                </div>
    
            </div>
            <div class="second">
                <div class="decs" style="width: 240px;height: 120px;">
                    <p>
                        <font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px;">寄</font>&nbsp;&nbsp;
                        <b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微软雅黑';">7300银两=100元</font></b>
                        <font></font>
                    </p>
                    <p>
                        <b><font color="#FF6600" size="5" style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px;">¥100</font>&nbsp;&nbsp;</b>
                    </p>
    
                    <p>
                        <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px;"> 三区/万剑逍遥/游戏币</font></b>
                    </p>
                </div>
    
                <div class="buy">
                    <input type="button" value="购买" onclick="clickme()" />
                </div>
            </div>
            <div class="three">
                <div class="decs">
                    <p>
                        <font color="white " style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px; ">寄</font>&nbsp;&nbsp;
                        <b><font color="#1873CC " size="4 " style="padding: 5px;margin-left: 2px;font-family: '微软雅黑'; ">7300银两=100元</font></b>
                        <font></font>
                    </p>
                    <p>
                        <b><font color="#FF6600 " size="5 " style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px; ">¥100</font>&nbsp;&nbsp;</b>
                    </p>
    
                    <p>
                        <b><font color="#424240 " style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px; "> 三区/万剑逍遥/游戏币</font></b>
                    </p>
                </div>
    
                <div class="buy">
                    <input type="button" value="购买" onclick="clickme()" />
                </div>
            </div>
        </center>
    
        <div style="height: 50px; " align="center">
            <p>
                <a href="login.html " style="text-decoration: none; ">登录</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="regist.html " style="text-decoration: none; ">注册</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#body " style="text-decoration: none; ">返回顶部</a>
            </p>
            <p>
                <img style="width: 150px;height: 60px; " src="../img/7881/bottom.png " />
            </p>
        </div>
    
    </body>
    

以上是关于JavaWeb基础知识:Html,Css和Javascript项目实战的主要内容,如果未能解决你的问题,请参考以下文章

JavaWeb之HTML&CSS

初学者学javaweb的学习内容有啥

JavaWeb基础知识:Html,Css和Javascript项目实战

JavaWeb基础知识:Html和Css实战WebView实现手机显示网页

JavaWeb之Bootstrap

JavaWeb之Bootstrap