Html+Css+Javascript项目实战

最新推荐文章于 2024-07-24 16:51:37 发布
最新推荐文章于 2024-07-24 16:51:37 发布
阅读量1.3w 收藏 133
点赞数 17
文章标签： html css js 小项目

项目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>
Hlizhen
关注
HTML + CSS +JavaScript 实战小项目 【炫彩块块】
m0_72773837的博客
05-12 205
HTML + CSS + JavaScript 实战小项目
HTML + CSS +JavaScript 实战小项目 【实现动画导航栏效果】
m0_72773837的博客
05-10 1120
HTML + CSS + JavaScript 小项目 实战
Web前端开发实战：HTML5+CSS3+JavaScript+Vue+Bootstrap
weixin_32369749的博客
07-23 57
???? 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】引言Web前端开发是一项综合性的技术，包含多个方面的知识和技能。前端开发人员需要掌握HTML5来构建网页的结构，使用CSS3来美化网页，运用JavaScript实现交互功能，以及利用各种前端框架和库（如Vue.js和Bootstrap）来提升开发效率和用户体...
HTML5+CSS3+JavaScript网页实战
2303_82176667的博客
05-12 1273
HTML5，作为构建和呈现网页内容的标准标记语言，带来了许多革命性的变化。它不仅提供了更加语义化的标签，使得网页内容更具可读性和可访问性，还增加了对多媒体的原生支持，无需依赖第三方插件即可播放视频和音频。在本文中，我们将深入探讨HTML5的新特性，如, 和等标签，并展示如何使用这些标签来构建清晰、结构化的网页内容。通过实例，我们将看到HTML5如何帮助我们创建更加符合现代网页设计标准的网页。
初识HTML（详细版）
最新发布
wrrtx的博客
07-24 1582
尽可能讲述html的基本知识以及演示代码
项目实战（一）HTML5+CSS3+JS完成前端网站的制作
热门推荐
weixin_46244909的博客
10-13 2万+
制作首页HTML框架： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="X-UA-Compatible" content="ie=edg"> <meta name ="description" conte
html+css+javascript 电商网站web+mobile实战项目
12-28
html css javascript jquery实战演练项目 包含文本页面和移动页面 适合初学者学习 电商项目典型案列 web页面开发 移动端自适应页面开发 ！
JavaWeb基础知识：Html，Css和Javascript项目实战
Pinger的博客
07-27 1万+
Day04 Html，Css和Javascript项目实战项目1：使用Html5的Canvas对象绘制一个圆形钟盘，显示实时时间 效果图如下代码如下<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canv
【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事...
yzd
03-16 379
HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示，但它能影响到搜索引擎对网页的收录和排序，以及网页的各种全局设置，可以说是至关重要。 ▲知识点一——头部信息里设置网页的基底网址 基底网址的实质是统一设置超级链接的属性，基底网址标签是&lt;/base&gt;，它有两个属性，href和_target。href用于设置基底网址的路径，_...
HTML+CSS+JS+Jquery+练手项目+
dgayuiafahf的博客
05-05 814
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
157个HTML+CSS+JavaScript前端开发24实例
10-10
157个HTML+CSS+JavaScript前端开发24实例
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip
09-25
【资源说明】 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】
06-06
HTML5、CSS3和JavaScript是构建现代网页的三大核心技术，它们共同构成了网页的结构、样式和行为。这个压缩包文件“HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】”显然包含了丰富的学习资源，...
【Web前端】小米商城项目实战HTML+CSS+JavaScript
不会敲代码的程序员
09-15 6548
1、小米商城源码html 2、小米商城源码 github 3、小米商城源码项目h5 4、仿小米商城html网页源码 3.1、首页（index.html） 3.2、登录（login.html） 3.3、注册（register.html） 3.4、详情（plus5.html） 3.5、订单（order.html） 3.6、购物车（trolley.html）
网页设计与制作项目教程HTML+CSS+JavaScript之项目一
MrSuper王的博客
04-30 2499
制作第一个网页 <!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"> <h...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值