web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用

Posted html网页设计

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用相关的知识，希望对你有一定的参考价值。


web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

​​1.网页作品简介方面​​​ ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：​​登录、注册、主页、列表页、详情页​​ 等总共 5 个页面html下载。

​​2.网页作品编辑方面​​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm​​ 所有编辑器均可使用）

​​3.网页作品布局方面​​：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

​​4.网页作品技术方面​​：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）


文章目录

  • ​
  • ​

一、作品演示

1.首页

web前端期末大作业

2.详情

web前端期末大作业

3.列表

web前端期末大作业

二、代码目录

web前端期末大作业

三、代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>XXX大学</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
    <div class="headCenter" id="headCenter">
        <div class="headMenu" id="headMenu">
            <div class="headMenuTelLogo">
            </div>
            <div class="headMenuTelCenter">
                <div class="headMenu01" id="headMenu01">
                    中心服务热线
                </div>
                <div class="headMenu02" id="headMenu02">
                    XXX
                </div>
            </div>
        </div>
        <div class="index_top_out">
            <div class="index_top">
                <div class="index_nav">
                    <ul>
                        <li class="cur"><a href="#">首页</a> </li>
                        <li><a href="#">中心概括</a> </li>
                        <li><a href="#">指挥校园</a> </li>
                        <li><a href="#">网络管理</a> </li>
                        <li><a href="#">校园一卡通</a> </li>
                        <li><a href="#">法规制定</a> </li>
                        <li><a href="#">等保工作</a> </li>
                        <li><a href="#">正版软件中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="main-center">
        <div class="g-login-mid-outer">
            <div id="side">
                <ul class="m">
                    <li style="background-image: url(images/banner01.png);"><a href="javascript:void(0)">
                    </a></li>
                    <li style="background-image: url(images/banner02.png);"><a href="javascript:void(0)">
                    </a></li>
                    <Web前端期末大作业-响应式唯美婚庆公司网站网页设计（HTML+CSS+JavaScript）


 Web前端期末大作业-响应式唯美婚庆公司网站网页设计（HTML+CSS+JavaScript）


 Web前端期末大作业--响应式美女健身教练瑜伽馆网页设计（HTML+CSS+JavaScript+）实现


 Web前端期末大作业--响应式美女健身教练瑜伽馆网页设计（HTML+CSS+JavaScript+）实现


 Web前端期末大作业--零食商城网页设计（HTML+CSS+JavaScript+）实现


 Web前端期末大作业--零食商城网页设计（HTML+CSS+JavaScript+）实现