685.大学生HTML期末大作业 —【简单的动漫手办公司网页(2页)】 Web前端网页制作 html5+css3

一只小小的眠羊

1833人浏览 · 2025-11-27 08:00:00

一只小小的眠羊 · 2025-11-27 08:00:00 发布

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-CSDN博客

一、网页简介

本实例应用html5+css3，div+css布局，代码简单,带登录页面，带实验报告书。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含2个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>米哈游</title>
       <link rel="stylesheet" href="index.css">
   </head>
   <body>
       <div id="wrap">
           <div id="header">
               <ul id="menu">
                   <li class="menuitem"><a href="">首页</a></li>
                   <li class="menufenge"></li>
                   <li class="menuitem"><a href="">在线销售</a>
                       <ul>
                           <li><a href="">周边产品</a></li>
                           <li><a href="">点卡销售</a></li>
                       </ul>
                   </li>
                   <li class="menufenge"></li>
                   <li class="menuitem"><a href="">公司新闻</a></li>
                   <li class="menufenge"></li>
                   <li class="menuitem"><a href="">在线服务</a></li>
                   <li class="menufenge"></li>
                   <li class="menuitem"><a href="">联系方式</a></li>
                   <li class="menufenge"></li>
                   <li class="menuitem"><a href="">公司荣誉</a></li>
                   <li class="menufenge"></li>
                   <li class="menuitem"><a href="login.html">登录</a></li>
               </ul>
           </div>
           <div id="clear"></div>
           <div id="main">
               <div id="main-left">
                   <div class="title"><a href="">公司介绍</a></div>
                   <ul>
                            米哈游成立于2012年，是一家深耕动漫文化的科技公司。米哈游多年来秉持技术自主创新，坚持走原创精品之路，围绕原创IP打造了涵盖漫画、动画、游戏、音乐、小说及动漫周边的全产业链。
                       公司总部位于上海，是上海市科技小巨人企业、上海市明星软件企业以及上海市文化出口重点企业，
                       并在东京、香港及台湾等地设有分公司。公司目前规模逾2000人，其中，核心团队成员半数来自北大、
                       清华、浙大、上海交大、复旦、同济、中科大等知名985高校。
                       作为一家技术密集型的公司，米哈游在动画、渲染、引擎等领域均处于业内顶尖水平。成立9年来，公司业务和规模持续高速增长，
                       先后获得上海十佳文化企业、国家文化出口重点企业，中国互联网百强等荣誉。
                       2019年度公司总营收超过30亿元。

</ul>
               </div>
               <div id="main-right">
                   <div>
                       <div class="title"><a href="">公司新闻</a></div>
                       <ul>
                           <li><a href="">腾讯侧目！米哈游大作上线半年吸金超65亿元</a><span>2024-11-15</span></li>
                           <li><a href="">《原神》拿下中国手游出海收入五连冠</a><span>2024-11-15</span></li>
                           <li><a href="">中国最成功出海游戏开发商年会感受下！礼物壕到无法直视</a><span>2024-11-15</span></li>
                           <li><a href="">《原神》公司年会大奖是1600个月工资？这才是真相</a><span>2024-11-15</span></li>
                           <li><a href="">3月手游厂商全球收入榜公布：第一毫无悬念</a><span>2024-11-15</span></li>
                           <li><a href="">《崩坏3》兔女郎引不满</a><span>2024-11-15</span></li>
                           <li><a href="">力压腾讯！《原神》拿下中国手游出海收入五连冠</a><span>2024-11-15</span></li>
                           <li><a href="">腾讯两前员工入职米哈游被判各赔偿腾讯超百万元</a><span>2024-11-15</span></li>
                       </ul>
                   </div>
               </div>
               
           </div>
           <div id="clear"></div>
           <div id="center">
               <div id="center-logo">
                   <p>在线销售</p>
               </div>
               <li><img src="images/3.jpg" /><h1>绿头玩偶       ￥28.00</h1></li>
               <li><img src="images/4.jpg" /><h1>海报          ￥28.00</h1></li>
               <li><img src="images/5.jpg" /><h1>粉黄玩偶        ￥28.00</h1></li>
               <li><img src="images/7.jpg" /><h1>墙纸           ￥28.00</h1></li>
           </div>

...

2.CSS

代码如下（节选示例）：

* {
font-size: 12px;
}

#clear {
clear: both;
}

.title {
   font-size: 12px;
   height: 40px;
   padding-left: 44px;
   line-height: 44px;
   background-color: #F3EFC9;
}

#wrap {
   height: 1088px;
   width: 998px;
   background-color: #EEEEEE;
   margin: 0 auto;
   border: 1px solid #000;
   position: relative;
}

#header {
   height: 255px;
   width: 100%;
   background: #008000;
   background-image: url(Images/a2.jpg);
   position: relative;
}

#header #menu {
   list-style-type: none;
   padding-top: 208px;
   padding-left: 100px;
}

#header #menu>li {
float: left;
}

#header #menu li a {
   text-decoration: none;
   color: burlywood;
   font-size: 16px;
}

#header #menu .menufenge {
   background-image: url(./Images/xina.jpg);
   height: 21px;
   width: 6px;
   margin: 0px 8px;
}

#header #menu .menuitem:hover ul {
display: block;
}

#header #menu ul {
   list-style: none;
   display: none;
   padding-top: 5px;
   background-color: #880000;
   padding-left: 3px;
   position: absolute;
   width: 80px;
}

#main #main-left .title a {
font-size: 20px;
text-decoration: none;
}

#main #main-left .title a:hover {
   font-size: 22px;
   text-decoration: underline;
   color: black;
}

#main #main-left ul {
font-size: 14px;
line-height: 26px;
}

#main #main-right .title a {
font-size: 20px;
text-decoration: none;
}

#main #main-right .title a:hover {
   font-size: 22px;
   text-decoration: underline;
   color: black;
}

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

六、更多推荐

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

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责