JavaWeb基础知识：Html，Css和Javascript项目实战

Posted 2022-12-09 万合天宜

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. 登录界面

效果图如下

<!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