本实例应用html5+css3+js，Div、导航条、留言表单、注册页面、登录页面、背景特效、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如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.交互式强

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

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

关注作者，点赞收藏博文，获取完整源码，Thanks!

上一篇： 142.大学生HTM

下一篇：基于php的考研互助