476.大学生HTML期末大作业 —【简单的原创设计企业网站(7页)】 Web前端网页制作 html+css+js

本实例应用html+css，div+css布局，代码精简，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含7个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云朵工厂 || 原创设计品牌</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="云朵工厂,奇趣,kidult,原创品牌,创意设计产品,云朵工厂,创意,原创,帽子,抱枕,手机链,T恤" />
<meta name="description" content="我们用孩子般纯真的视角来看世界，用我们手里的画笔来描述一个新奇、古怪和可爱的事情。通过漫画、绘本、动画创作及创意设计产品的开发，构建一个有趣、奇妙的幻想世界——云朵工厂。" />
</head>
<body>
<div class="bg_top">
<div class="header_bg">
<div class="header">
<a href="#" title="English" class="lan en" ></a>
<a href="index.html" title="中文版" class="lan cn" style="background-position:left top;"></a>
</div>
</div>
</div>
<div class="page_box" style="height:646px;">
<div class="index_left"></div>
<div class="index_right"> <a href="#"><img src="img/cloud_05.jpg" alt="云朵工厂||原创设计品牌" /></a></div>
<div class="index_menu">
<ul>
<li class="menu_1"><a href="about.html" title="关于工厂——云朵工厂简介"></a></li>
<li class="menu_2"><a href="t.html" title="广播站——云朵工厂官方微博"></a></li>

<li class="menu_5"><a href="product.html" title="厂区仓库——云朵工厂原创产品介绍"></a></li>
<li class="menu_6"><a href="job.html" title="招兵买马——云朵工厂照片"></a></li>
<li class="menu_4"><a href="#" title="游乐园"></a></li>
</ul>
</div>
</div>
<div class="footer">
<div class="footer_left"><a href="#" title="云朵工厂官方微博" target="_blank" class="sina"></a><a href="#" target="_blank" class="taobao" title="云朵工厂官方店铺" ></a><a href="#" title="云朵工厂豆瓣主页" target="_blank" class="douban"></a>
<div class="link">
<a class="contact" href="#" target="_blank" title="联系我们" ></a>
<a class="linker" href="#" target="_blank" title="云朵工厂友情链接" ></a>
</div>
</div>
<div class="footer_right"><p>Copyright©2012 Dodoo animation PTY.LTD. <a href="http://www.17sucai.com/" title="网站模板" target="_blank">网站模板</a>
</p>
</div>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

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

body{ background:url(img/main_bg.gif) left top; padding:0px; margin:0px;}
ul,li{ list-style:none; padding:0px; margin:0px;}
img{border:0px;}
.bg_top{ width:100%; height:600px; background:url(img/top_bg.jpg) right top; }
.header_bg{ width:100%; height:151px; background:url(img/cloud_02.jpg) right top no-repeat; margin:auto;}
.header{ width:1000px; margin:auto;}
.header .logo{ width:184px; height:63px; background:url(img/logo.jpg) left top; display:block; margin:20px auto auto 50px; float:left;display:inline; position:relative; z-index:100;}
.page_box{ width:1000px; height:700px; position:relative; margin:auto; margin-top:-450px; z-index:5;}
.header .lan{ width:45px; height:30px; float:right; margin-top:25px; background:url(img/lan.jpg) no-repeat left bottom; display:block;}
.header .lan:hover{ background-position:left top;}
.header .en{ background-position:right bottom; margin-top:25px;}
.header .en:hover{ background-position:right top;}
.index_left{ width:443px; height:646px; background:url(img/cloud_17.jpg) left bottom no-repeat; float:left;}
.index_right{ width:488px; height:646px; float:left;}
.index_menu{ width:74px; float:right;position:absolute; right:-3px;}
.index_menu li{ width:100%;}
.index_menu .menu_1{ width:46px; height:107px; float:left; margin-top:60px;}
.index_menu .menu_1 a{width:46px; height:107px; display:block; background:url(img/cloud_07.png) left top; float:left;}
.index_menu .menu_1 a:hover{ width:46px; height:107px; display:block; background:url(img/fact_sele.png) left top; float:left;}
.index_menu .menu_2{ width:46px; height:108px; float:left; margin-top:10px;}
.index_menu .menu_2 a{width:46px; height:108px; display:block; background:url(img/cloud_10.png) left top; float:left;}
.index_menu .menu_2 a:hover{width:46px; height:108px; display:block; background:url(img/airing_sele.png) left top; float:left;}
.index_menu .menu_3{ width:74px; height:106px; float:left; margin-top:10px;}
.index_menu .menu_3 a{width:74px; height:106px; display:block; background:url(img/cloud_12.jpg) left top; float:left;}
.index_menu .menu_4{ width:66px; height:90px; float:left; margin-top:10px;}
.index_menu .menu_4 a{width:66px; height:90px; display:block; background:url(img/cloud_15.png) left top; float:left;}
.index_menu .menu_4 a:hover{width:66px; height:90px; display:block; background:url(img/cloud_play.png) left top; float:left;}
.index_menu .menu_5{ width:74px; height:85px; float:left; margin-top:10px;}
.index_menu .menu_5 a{width:74px; height:85px; display:block; background:url(img/cloud_20.png) left top; float:left;}
.index_menu .menu_5 a:hover{width:74px; height:85px; display:block; background:url(img/factstore_sel.png) left top; float:left;}
.index_menu .menu_6{ width:74px; height:100px; float:left; margin-top:10px;}
.index_menu .menu_6 a{width:74px; height:100px; display:block; background:url(img/cloud_21.png) left top; float:left;}
.index_menu .menu_6 a:hover{width:74px; height:100px; display:block; background:url(img/army_sele.png) left top; float:left;}
.page_right{ background:none;}
.page_box_bg{ background:url(img/page_06.jpg) center top no-repeat; margin-top:-505px;}
.page_bot{ width:100%; height:200px; background:url(img/page_09.jpg) center top no-repeat; position:absolute; z-index:1; top:601px; left:0px;}
.page_left_menu,.broadcast,.fract_set,.games_set{ position:absolute; width:81px; height:202px; left:0px; top:195px; left:-17px;}
.page_left_menu li,.broadcast li,.fract_set li,.games_set li{ height:67px; width:81px;}
/*广播站（团队博客，新鲜事大箩框）*/
.broadcast li a {display:block; width:69px; height:100px; background:url(img/Radio_classification.png) left top no-repeat; margin-left:13px;}
.broadcast li a.on{display:block; width:69px; height:100px; background:url(img/Radio_classification_sele.png) left top no-repeat;}
.broadcast li a:hover{ display:block; width:69px; height:100px; background:url(img/Radio_classification_sele.png) left top no-repeat; }
.broadcast .menu1_blog a{background-position:left -20px;}
.broadcast .menu1_blog a.on{background-position:left -20px;}
.broadcast .menu1_blog a:hover{background-position:left -20px;}
.broadcast .menu2_news a{background-position:left -135px; margin-top:30px;}
.broadcast .menu2_news a.on{background-position:left -135px;}
.broadcast .menu2_news a:hover{background-position:left -135px;}
/*end*/

/*厂区（许愿云系列，自由行走的梦想系列）*/
.fract_set li{ height:135px; width:55px;}
.fract_set li a {display:block; width:55px; height:135px; background:url(img/cloud_drean.png) left top no-repeat; margin-left:25px;}
.fract_set li a.on{display:block; width:55px; height:130px; background:url(img/cloud_drean_select.png) left top no-repeat;}
.fract_set li a:hover{ display:block; width:55px; height:130px; background:url(img/cloud_drean_select.png) left top no-repeat; }
.fract_set .menu1_clud_set a{background-position:left 0px;}
.fract_set .menu1_clud_set a.on{background-position:left 0px;}
.fract_set .menu1_clud_set a:hover{background-position:left 0px;}
.fract_set .menu2_dream_set a{background-position:left -170px; margin-top:30px;}
.fract_set .menu2_dream_set a.on{background-position:left -170px;}
.fract_set .menu2_dream_set a:hover{background-position:left -170px;}
/*end*/

/*游乐园（小游戏大集合，表情下载）*/
.games_set li a{}
.games_set li a {display:block; width:69px; height:100px; background:url(img/Radio_classification.png) left top no-repeat; margin-left:13px;}
.games_set li a:hover{ display:block; width:69px; height:100px; background:url(img/Radio_classification_sele.png) left top no-repeat; }
.games_set .menu1_blog a{background-position:left -20px;}
.games_set .menu1_blog a:hover{background-position:left -20px;}
.games_set .menu2_news a{background-position:left -135px; margin-top:30px;}
.games_set .menu2_news a:hover{background-position:left -135px;}

/*end*/

/*厂区仓库*/
.pro7_l{ display:block; background:url(img/original_T.png) no-repeat; width:882px; height:636px;}

...