html+css+js实现的web小案例

已于 2024-05-29 15:24:55 修改
阅读量3.3k 收藏 20
点赞数 2
分类专栏： 前端JS 文章标签： css html 前端
于 2023-06-04 16:54:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46671666/article/details/131032974
版权

详细演示视频点击此处观看

上完了Web开发基础的课程之后，做了这么一个小案例作为课程的大作业。这个案例是静态页面，使用的技术有html+css+js，主要的知识点有页面的打开关闭、页面跳转、超链接、图片和音频的使用、轮播图、js函数等等。本案例的主要内容是注册、登陆之后进入首页，首页里面可以跳转向另外三个页面。
一、注册页面：
在这里插入图片描述
页面html代码：

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册</title>
</head>
<style type="text/css">
    body {
     
        background-image: url(images/01.jpg);
        background-repeat: no-repeat;
        background-size: 100% 650px;
        z-index: 10;
    }

    .title {
     
        width: 50%;
        height: 60px;
        float: left;
        clear: both;
        margin-left: 10%;
        margin-top: -5%;
        font-size: 30px;
        color: #FFF;
        letter-spacing: 5px;
    }

    .page {
     
        width: 470px;
        height: 630px;
        position: absolute;
        right: 240px;
        top: 10px;
        background-color: #FFF;
        opacity: 0.9;
    }

    .main {
     
        width: 400px;
        height: 600px;
        position: absolute;
        left: 40px;
        top: 30px;
    }

    .confirm img {
     
        width: 134px;
        height: 40px;
        vertical-align: middle;
    }

    .bt {
     
        position: absolute;
        top: 490px;
        left: 90px;
    }

    .bt-1 {
     
        width: 100px;
        height: 45px;
        font-size: 24px;
        letter-spacing: 5px;
        text-align: center;
        border-radius: 5px;
        border-color: #CCC;
        color: #FFF;
    }

    .footer {
     
        display: flex;
        width: 99%;
        margin: auto;
        margin-top: 0px;
        justify-content: center;
        background-color: white;
        position: absolute;
        top: 650px;
    }

    div#nav4 {
     
        width: 30%;
        height: 100%;
        float: left;
        flex-shrink: 0;
    }

    ul.box4 {
     
        font-size: 16px;
        text-align: center;
    }

    ul.box4 li {
     
        width: 80px;
        display: inline-block;
        text-align: center;
        margin-top: 8%;
    }

    div#copyright {
     
        width: 40%;
        height: 100%;
        float: left;
        flex-shrink: 0;
    }

    div#nav5 {
     
        width: 30%;
        height: 100%;
        float: left;
        flex-shrink: 0;
    }

    ul.box5 {
     
        text-align: center;
    }

    ul.box5 li {
     
        width: 80px;
        display: inline-block;
        text-align: center;
        align-items: center;
        font-size: 13px;
        margin-top: 8%;
    }
</style>

<body>
    <span class="title"><b>大学生活动管理系统</b> | 注册</span>
    <div class="page">
        <div class="main">
            <form  method="post">
                <table width="420" height="20" align="center" cellpadding="10" cellspacing="5">
                    <tr>
                        <td align="right">用户名：</td>
                        <td>
                            <input name="username" type="text" size="20" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">性别：</td>
                        <td>
                            <input name="sex" type="radio" value="男" />男&nbsp;&nbsp;
                            <input name="sex" type="radio" value="女" />女
                        </td>
                    </tr>
                    <tr>
                        <td align="right">年龄：</td>
                        <td>
                            <input type="number" name="age" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">电话：</td>
                        <td>
                            <input type="number" name="telephone" size="20" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">大学：</td>
                        <td>
                            <input type="text" name="school" size="20" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">学院：</td>
                        <td>
                            <input type="text" name="college" size="20" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">专业班级：</td>
                        <td>
                            <input type="text" name="major" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">密码：</td>
                        <td>
                            <input name="password" type="password" maxlength="20" size="20" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码：</td>
                        <td>
                            <input name="password2" type="password" maxlength="20" size="20" />
                        </td>
                    </tr>
                    <tr class="confirm">
                        <td align="right">验证码：</td>
                        <td>
最低0.47元/天 解锁文章
ES-Lad
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML+CSS+JS做一个漂亮简单的公司网站（JavaScript期末大作业）
wx___BJ050106的博客
12-07 2029
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
大二学生基于Html+Css+javascript的网页制作——动漫设计公司响应式网站模板 (10个页面)
qq_38514511的博客
03-27 704
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页
网页设计与制作
03-26 916
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
js+html+css实现简易商城项目
12-25
这是一个商城小项目，内含电子时钟、轮播图、表单验证、验证码等功能，包含注册、登录、设计说明、问卷调查、网上投票等页面！
html+css+js之20个练手小项目（一）
热门推荐
qq_40312477的博客
11-07 1万+
html+css+js之20个练手小项目（一）——Hangman前言一、HTML二、CSS三、JS 前言 前端新手练习，记录不迷失。 主要练习html和CSS布局以及JS。 来源github，参考链接：使用html+css和纯js实现小项目 Hangman是一个单词拼写的小游戏，主要功能包括： （1）利用svg画小人图 （2）生成随机单词并展示 （3）单词正确与错误提醒 一、HTML HTML结构比较简单，主要使用了SVG构造小人。学习一下标签svg中的line,circle。 <!DOCTY
HTML + CSS + Javascript 简易示例
cds7777的博客
06-25 1548
HTML简易示例
基于html+css+js+jquery的购物页面设计
qq_50280292的博客
10-12 2934
基于html+css+js+jquery的购物页面设计
HTML5+CSS+JS
iku_whf的博客
01-07 926
软件和文件内容的格式 HBuilder X 格式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 关于网页的一些属性 --> <!-- css样式 --> </head> <body> <!-- 主体内容 --> </body> </
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
html+css+js科幻后台登录界面模板
04-10
html+css+js科幻后台登录界面模板，适用于网页设计的登录...html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML+css+js制作的手风琴效果网页
06-15
整个网页是将CSS内联在了html的代码中；js中用到了for循环遍历，获取所有的li标签，添加点击事件，修改body的背景图片等一系列的操作。 希望本资源能给大家提供所需的帮助！！！！！！！！！！！！！！！！！！！！...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
html和javaScript资料和例子
11-20
html和javaScript资料和小例子
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html+css+js酷炫全屏的后台登录注册界面模板
最新发布
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，...html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)
qq_38518191的博客
04-04 369
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web大作业：基于html+css+javascript+jquery实现智能分控网站
网页设计与制作
01-09 163
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
50天50个前端小项目（纯html+css+js）第十六天（喝水模拟器）
lovestar墨竹的博客
10-27 874
50天50个前端小项目（纯html+css+js）第十六天（喝水模拟器）
HTML+JavaScript案例
m0_59138290的博客
02-22 590
HTML+JavaScript案例
html5+css3+javascript web前端开发案例教程(慕课版)答案
05-15
HTML5、CSS3、JavaScript是现代Web开发中必不可少的三种技术。如果你想学习这些技术，...综上所述，通过HTML5、CSS3、JavaScript的案例教程可以深入学习这些技术的应用，更好地掌握Web前端开发的基础知识和实践方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值