大一新生HTML期末作业,网页制作作业——海鲜餐饮网站登录页面(单页面)HTML+CSS+JavaScript

于 2022-10-25 22:46:42 发布
阅读量229 收藏 1
点赞数 1
分类专栏： web课程与设计 文章标签： 大学生网页作业 html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512499/article/details/127523586
版权

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🎀 精彩专栏推荐👇🏻👇🏻👇🏻

🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录📂

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

在这里插入图片描述

五、代码实现 🪓

HTML结构代码🧱


<!DOCTYPE html>
<html>

<head>
    <title>用户登录</title>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" type="text/css" href="css/less.css">
    <link rel="stylesheet" type="text/css" href="css/basic.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="css/jquery.js" language="javascript"></script>

</head>

<body>
    <div class="wrapper" style="background-color: white;">
        <div class="login-top">
            <div style="height: 60px;background-color: white;">
                <div style=";margin-left: 160px;">
                    <img src="images/log_1.jpg" />
                </div>
                <div style="float:right;margin-top: -34px;width: 360px;font-size: 12px;">
                    <span>返回首页</span>
                    <span>|</span>
                    <span>忘记密码</span>
                    <span>|</span>
                    <span>在线客服</span>
                </div>
            </div>
            <div class="login-topBg">
                <div class="login-topBg1">

                    <div class="login-topStyle">


                        <div class="login-topStyle3" id="jqk" style="display:block;margin-top: 75px;">
                            <div style="float:left; width:50%; height:50px">
                                <h3>用户登录</h3>
                            </div>
                            <div style="float:right;margin-top: 12px;cursor:pointer;" onclick="f_test()">员工登陆</div>

                            <div class="ui-form-item loginUsername">
                                <input type="username" placeholder="用户名/手机号/密码">
                            </div>

                            <div class="ui-form-item loginPassword">
                                <input type="password" placeholder="请输入密码">
                            </div>

                            <div class="ui-form-item loginPassword">
                                <input type="text" style="width:130px" placeholder="验证码">
                                <img src="images/yzm.jpg" style="height:33px;float:right;">
                            </div>

                            <div class="login_reme">
                                <input type="checkbox">
                                <a class="reme1" style="color:#ffffff;">记住账号</a> <a class="reme2" href="#">忘记密码?</a>
                            </div>

                            <span class="error_xinxi" style="display:none;">您输入的密码不正确，请重新输入</span>

                            <a class="btnStyle btn-register" href="#"> 立即登录</a>
                        </div>

                        <div class="login-topStyle3" id="jql" style="display:none;margin-top: 75px;">
                            <div style="float:left; width:50%; height:50px">
                                <h3>员工登录</h3>
                            </div>
                            <div style="float:right;margin-top: 12px;cursor:pointer;" onclick="f_test()">用户登陆</div>

                            <div class="ui-form-item loginUsername">
                                <input type="username" placeholder="请输入您的工号">
                            </div>

                            <div class="ui-form-item loginPassword">
                                <input type="password" placeholder="请输入密码">
                            </div>

                            <span class="error_xinxi" style="display:none;">您输入的密码不正确，请重新输入</span>

                            <a class="btnStyle btn-register" href="#"> 员工登录</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="loginCen" style="margin-top: 55px;">
            <div class="login-center">
                <div class="loginCenter-moudle">
                    <div class="loginCenter-moudleLeft" style="margin-right: 60px;"> &nbsp;</div>
                    <div class="loginCenter-moudleRight" style="  width: 100%;">
                        <div class="main_news">
                            <div class="news_01">
                                <div class="news_title">
                                    <h2>大闸蟹</h2><b><a href="#" title="大闸蟹">更多>></a></b>
                                </div>
                                <ul>
                                    <li><a href="#" title="大闸蟹的10种做法">大闸蟹的10种做法</a></li>
                                    <li><a href="#" title="如何做出美味的大闸蟹">如何做出美味的大闸蟹</a></li>
                                    <li><a href="#" title="购买大闸蟹注意事项">购买大闸蟹注意事项</a></li>
                                    <li><a href="#" title="大闸蟹为什么要捆草绳呢">大闸蟹为什么要捆草绳呢</a></li>
                                    <li><a href="#" title="如何分辨大闸蟹的好坏">如何分辨大闸蟹的好坏</a></li>
                                    <li><a href="#" title="2016年海鲜市场有多大">2016年海鲜市场有多大</a></li>
                                    <li><a href="#" title="大闸蟹的营养价值">大闸蟹的营养价值</a></li>
                                    <li><a href="#" title="大闸蟹的养殖方法">大闸蟹的养殖方法</a></li>
                                    <li><a href="#" title="这几类人不适合吃大闸蟹">这几类人不适合吃大闸蟹</a></li>
                                    <li><a href="#" title="不宜食用大闸蟹的时间段">不宜食用大闸蟹的时间段</a></li>

                                </ul>
                                <div class="news_bot"></div>
                            </div>

                            <div class="news_01">
                                <div class="news_title">
                                    <h2>小龙虾</h2><b><a href="#" title="小龙虾">更多>></a></b>
                                </div>
                                <ul>
                                    <li><a href="#" title="大闸蟹的10种做法">小龙虾的10种做法</a></li>
                                    <li><a href="#" title="如何做出美味的大闸蟹">如何做出美味的小龙虾</a></li>
                                    <li><a href="#" title="购买大闸蟹注意事项">购买小龙虾注意事项</a></li>
                                    <li><a href="#" title="大闸蟹为什么要捆草绳呢">小龙虾为什么要捆草绳呢</a></li>
                                    <li><a href="#" title="如何分辨大闸蟹的好坏">如何分辨小龙虾的好坏</a></li>
                                    <li><a href="#" title="2016年海鲜市场有多大">2016年海鲜市场有多大</a></li>
                                    <li><a href="#" title="大闸蟹的营养价值">小龙虾的营养价值</a></li>
                                    <li><a href="#" title="大闸蟹的养殖方法">小龙虾的养殖方法</a></li>
                                    <li><a href="#" title="这几类人不适合吃大闸蟹">这几类人不适合吃小龙虾</a></li>
                                    <li><a href="#" title="不宜食用大闸蟹的时间段">不宜食用小龙虾的时间段</a></li>

                                </ul>
                                <div class="news_bot"></div>
                            </div>

                            <div class="news_01">
                                <div class="news_title">
                                    <h2>鱼类</h2><b><a href="#" title="鱼类">更多>></a></b>
                                </div>
                                <ul>
                                    <li><a href="#" title="草鱼的10种美味做法">草鱼的5种美味做法</a></li>
                                    <li><a href="#" title="黄鳝的10种美味做法">黄鳝的7种美味做法</a></li>
                                    <li><a href="#" title="鲤鱼的10种美味做法">鲤鱼的3种美味做法</a></li>
                                    <li><a href="#" title="鲫鱼的10种美味做法">鲫鱼的6种美味做法</a></li>
                                    <li><a href="#" title="泥鳅的10种美味做法">泥鳅的10种美味做法</a></li>
                                    <li><a href="#" title="草鱼的10种美味做法">草鱼的营养价值</a></li>
                                    <li><a href="#" title="黄鳝的10种美味做法">黄鳝的营养价值</a></li>
                                    <li><a href="#" title="鲤鱼的10种美味做法">鲤鱼的营养价值</a></li>
                                    <li><a href="#" title="鲫鱼的10种美味做法">鲫鱼的营养价值</a></li>
                                    <li><a href="#" title="泥鳅的10种美味做法">泥鳅的营养价值</a></li>

                                </ul>
                                <div class="news_bot"></div>
                            </div>

                            <div class="news_01" id="news_011">
                                <div class="news_title">
                                    <h2>海鲜公告</h2><b><a href="#" title="本站公告">更多>></a></b>
                                </div>
                                <ul>
                                    <li class="r"><a href="#" title="中秋节放假通知">中秋节放假通知</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工中秋节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工中秋节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工中秋节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工儿童节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工教师节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工国庆节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工劳动节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业单身员工情人节福利领取</a></li>
                                    <li><a href="#" title="企业员工中秋节福利领取">企业员工春节福利领取</a></li>

                                </ul>
                                <div class="news_bot"></div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="footer"> <span class="footerText">Copyright © 1995-2015 北京市某某海鲜城  ICP备: 12345678号</span> </div>
    </div>
</body>

</html>

CSS样式代码💒


@charset "utf-8";
/* CSS Document */

/*ҳ湫Ԫʽʼ*/

/*¼ҳʽʼ*/

.wrapper {
    background-color: #f5f5f5;
    width: 100%;
    min-width: 1190px;
    color: #666;
}

.login-top {
    height: 480px;
    width: 100%;
}

.login-topBg {
    background: url(../images/login_img.jpg) center center no-repeat #fff;
    height: 480px;
    min-width: 1190px;
}

.login-topBg1 {
    height: 480px;
}

.login-topTab {
    height: 84px;
    width: 100%;
    text-align: center;
}

.login-topTabBg {
    width: 1190px;
    margin: 0px auto;
}

.login-topTab-logo {
    float: left;
    padding: 18px 0px;
}

.login-topTab-logo img {
    display: inline-block;
}

.login-topTab-right {
    float: right;
    padding: 35px 0px;
}

span.login_text_right_language {
    padding-right: 2px;
    padding-left: 15px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

span.login_text_right_language img {
    vertical-align: middle;
    margin-left: 5px;
    display: inline-block;
}

.login-topStyle {
    color: #ffffff;
    font-family: ;
    width: 1190px;
    position: relative;
    margin: 0px auto;
}

.login-topStyle1 {
    display: inline-block;
    padding-top: 90px;
    padding-left: 172px;
}

span.loginStyle1 {
    font-size: 16px;
    line-height: 24px;
    display: block;
    font-family: "΢ź";
}

span.loginStyle2 {
    display: inline-block;
    font-size: 72px;
    font-family: "΢ź";
}

.login-topStyle2 {
    text-align: center;
    padding: 34px 0px;
}

a.btnStyle {
    font-size: 20px;
    line-height: 30px;
    width: 300px;
    border-radius: 5px;
    display: inline-block;
}

a.btnStyle.btnLogin {
    background-color: #3598db;
    padding: 10px 0px;
    margin-right: 120px;
}

a.btnStyle.btnLogin:hover {
    background-color: #3ea1e3;
}

a.btnStyle.btnregister {
    border: 1px solid #ffffff;
    padding: 8px 0px;
    color: #ffffff;
}

a.btnStyle.btnregister:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/*¼ʽʼ*/

.login-topStyle3 {
    background: url(../images/login_bg_white.png) center center repeat;
    width: 228px;
    height: auto;
    overflow: hidden;
    top: 34px;
    right: 50px;
    position: absolute;
    border-radius: 5px;
    padding: 22px 30px;
}

.login-topStyle3 h3 {
    font-size: 22px;
    line-height: 33px;
    color: #ffffff;
    padding-bottom: 22px;
    font-family: "΢ź";
}

.ui-form-item {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 18px;
}

.ui-form-item.loginUsername input[type="username"],
.ui-form-item.loginPassword input[type="password"],
.ui-form-item.loginPassword input[type="text"] {
    width: 100%;
    border: none;
    border: 1px solid #ffffff;
    padding: 8px 0px 8px 5px;
}

.ui-form-item.loginPassword {}

.ui-form-item.loginPassword input[type="password"] {}

.login_reme {
    padding-bottom: 8px;
    margin-top: 20px\0;
}

.login_reme a.reme1 {
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
}

.login_reme a.reme2 {
    font-size: 12px;
    vertical-align: top;
    margin-left: 97px;
    color: #ffffff;
}

span.error_xinxi {
    font-size: 14px;
    line-height: 22px;
}

a.btn-Login,
a.btn-register {
    width: 228px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    padding: 8px 0px;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
}

a.btn-Login {
    color: #3598db;
    background-color: #ffffff;
}

a.btn-Login:hover {
    opacity: 0.8;
}

a.btn-register {
    color: #ffffff;
    background-color: #3598db;
}

a.btn-register:hover {
    background-color: #3ea1e3;
}

.loginCen {
    width: 100%;
}

.login-center {
    background: url(../images/login-center-bg.png) center center no-repeat;
    width: 100%;
    /*height: 140px;*/
    margin: 20px auto 0px auto;
    position: relative;
}

.loginCenter-moudle {
    padding: 0px 0px 30px 0px;
    overflow: hidden;
    /*height: 140px;*/
}

.loginCenter-moudleLeft {
    float: left;
    margin-top: 9px;
    margin-right: 28px;
    font-weight: bold;
}

.loginCenter-moudleLeft span {
    display: block;
}

.loginCenter-moudleLeft span.number {
    color: #fb5016;
    font-size: 48px;
    line-height: 72px;
}

.loginCenter-moudleLeft span.text {
    font-size: 14px;
    line-height: 22px;
    color: #4c4c4c;
}

.loginCenter-moudleRight {
    overflow: hidden;
    float: left;
    width: 992px;
    /*height: 140px;*/
}

.loginCenter-moudleRight a.loginCenter-mStyle {
    width: 335px;
    position: relative;
    top: 50%;
    margin-top: -35px;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle1 {
    width: 312px;
    -moz-width: 312px;
    float: left;
    margin-right: 5px;
}

.loginCenter-moudleRight a span.moudle-img {
    height: 64px;
    width: 64px;
    float: left;
    padding-right: 5px;
}

.loginCenter-moudleRight a span.moudle-img img {}

.loginCenter-moudleRight a span.moudle-text {
    display: inline-block;
    -moz-width: 242px;
    -webkit-width: 262px;
    text-align: left;
    position: relative;
    top: 50%;
    margin-top: 8px;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle3 span.moudle-text {
    margin-top: 4px;
}

.loginCenter-moudleRight a span.moudle-text .moudle-text1 {
    font-size: 18px;
    line-height: 26px;
    display: block;
    color: #767676;
    text-align: left;
    font-family: ΢ź;
}

.loginCenter-moudleRight a span.moudle-text .moudle-text2 {
    font-size: 14px;
    font-family: ΢ź;
    line-height: 18px;
    color: #969696;
}

.loginCenter-moudleRight a span.moudle-text .moudle-text3 {
    font-size: 12px;
    line-height: 22px;
    display: block;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle2 {
    float: left;
    margin-right: 5px;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle1.moudle1 span.moudle-text {
    top: -19px;
    left: -60px;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle2.moudle2 span.moudle-text {
    top: -37px;
    left: -40px;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle3.moudle3 span.moudle-text {
    top: -19px;
    left: -56px;
}

.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle3 {
    float: left;
}

/*ʾϢʽ*/

.error-information {
    color: #d02e50;
    font-size: 12px;
    padding-bottom: 3px;
}

/*¼ҳģʽ*/

/*¼ҳʽ*/

/*footerʽ*/

.footer {
    height: 60px;
    background-color: #e1e1e1;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    line-height: 60px;
    min-width: 1190px;
}

.footer span.footerText {
    font-size: 14px;
    font-family: ;
    color: #606060;
    display: inline-block;
}

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值