Document

156. web前端网页制作绿色的实验楼教育响应式网页设计实例大学生期末大作业 html+css+js

2024-05-05 00:21:38
dfer
28
课程设计 html5 javascript css jquery bootstrap java CSDN

前言

绿色的实验楼教育响应式网页设计实例，应用html+css+js，应用 Div、导航条、留言表单、注册页面、登录页面、背景特效、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。

一、网页概述

1.网页布局

。

2.知识应用

本实例应用HTML+CSS+JS，应用 Div、导航条、留言表单、注册页面、登录页面、背景特效、搜索等。

3.网页支持

支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

三、网页效果

提示：以下是本篇文章正文内容，下面案例供参考:

四、代码展示

1.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="author" content="Lei Shi">
<meta http-equiv="Cache-Control" content="o-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">


<title>讨论区 - 实验楼</title>

<meta content="实验楼课程分为基础课和项目课，内容涵盖了Linux、Python、Java、C语言、Ruby、Android、IOS开发、大数据、信息安全等IT技术领域。" name="description">
<meta content="实验楼课程,IT培训课程,IT实训课程,IT在线课程,all" name="keywords">

/* modal 模态框*/
#invite-user .modal-body {
overflow: hidden;
}
       #invite-user .modal-body .form-label {
           margin-bottom: 16px;
           font-size:14px;
       }
       #invite-user .modal-body .form-invite {
           width: 80%;
           padding: 6px 12px;
           background-color: #eeeeee;
           border: 1px solid #cccccc;
           border-radius: 5px;
           float: left;
           margin-right: 10px;
       }
       #invite-user .modal-body .msg-modal-style {
           background-color: #7dd383;
           margin-top: 10px;
           padding: 6px 0;
           text-align: center;
           width: 100%;
       }
       #invite-user .modal-body .modal-flash {
           position: absolute;
           top: 53px;
           right: 74px;
           z-index: 999;
       }
       /* end modal */

.en-footer {
padding: 30px;
text-align: center;
font-size: 14px;
}
</style>
</head>

...

2.CSS

代码如下（节选示例）：

/*
* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
* */

.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #002b36;
color: #839496;
-webkit-text-size-adjust: none;
}

.hljs-comment,
.diff .hljs-header,
.hljs-doctype,
.hljs-pi,
.lisp .hljs-string,
.hljs-javadoc {
color: #586e75;
}

/* Solarized Green */
.hljs-keyword,
.hljs-winutils,
.method,
.hljs-addition,
.css .hljs-tag,
.hljs-request,
.hljs-status,
.nginx .hljs-title {
color: #859900;
}

/* Solarized Cyan */
.hljs-number,
.hljs-command,
.hljs-string,
.hljs-tag .hljs-value,
.hljs-rule .hljs-value,
.hljs-phpdoc,
.hljs-dartdoc,
.tex .hljs-formula,
.hljs-regexp,
.hljs-hexcolor,
.hljs-link_url {
color: #2aa198;
}

/* Solarized Blue */
.hljs-title,
.hljs-localvars,
.hljs-chunk,
.hljs-decorator,
.hljs-built_in,
.hljs-identifier,
.vhdl .hljs-literal,
.hljs-id,
.css .hljs-function,
.hljs-name {
color: #268bd2;
}

/* Solarized Yellow */
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.smalltalk .hljs-number,
.hljs-constant,
.hljs-class .hljs-title,
.hljs-parent,
.hljs-type,
.hljs-link_reference {
color: #b58900;
}

/* Solarized Orange */
.hljs-preprocessor,
.hljs-preprocessor .hljs-keyword,
.hljs-pragma,
.hljs-shebang,
.hljs-symbol,
.hljs-symbol .hljs-string,
.diff .hljs-change,
.hljs-special,
.hljs-attr_selector,
.hljs-subst,
.hljs-cdata,
.css .hljs-pseudo,
.hljs-header {
color: #cb4b16;
}

/* Solarized Red */
.hljs-deletion,
.hljs-important {
color: #dc322f;
}

/* Solarized Violet */
.hljs-link_label {
color: #6c71c4;
}

.tex .hljs-formula {
background: #073642;
}

...

3.JS

代码如下（节选示例）：

...

五、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q；关注我带您学习各种前端插件、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等；以上内容技术有兴趣的可以交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

上一篇：计算机毕业设计php

下一篇：使用 HTML 和

Document

156. web前端网页制作 绿色的实验楼教育响应式网页设计实例 大学生期末大作业 html+css+js

前言

一、网页概述

1.网页布局

2.知识应用

3.网页支持

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

156. web前端网页制作绿色的实验楼教育响应式网页设计实例大学生期末大作业 html+css+js