【web网页制作】html+css网页制作企业网站办公用品主题（3页面）【附源码】

企业网站目录

涉及知识
写在前面
一、网页主题
二、网页效果
- Page1、主页
- Page2、用品展示
- Page3、关于我们
三、网页架构与技术
- 3.1 脑海构思
- 3.2 整体布局
- 3.3 技术说明书
四、网页源码
- 4.1 主页模块源码
- 4.2 源码获取方式
作者寄语

涉及知识

办公用品企业主题HTML网页制作，企业主题web开发，期末网页HTML大作业，网页作业成品HTML+CSS，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面，视频音频播放网页制作，视频音频网页成品。

专栏：web前端大作业网页制作
关于我：一个持续输出型博主，爱分享，喜技术，期待关注与交流！
公众号：《IT黄大大》更多分享抢先看；
研究主题：影视，明星，家乡，旅游，个人，美食，校园，商城，运动，特效，企业网站等
技术涉猎：HTML+CSS，HTML+CSS+JS，Java+数据库，vue项目等
开发软件：vscode，dreamweaver，hbuilder，sublime text，eclipse，idea等；

写在前面

两天前我朋友看到我的文章和我说，得分享一些高质量的页面出来大家看看，当然确实还有不少特效设计感页面后续会陆陆续续公布。希望大家能持续关注与支持。
前面也分享了不少有关个人主题，宠物主题，明星主题，学校主题，动漫主题等，针对企业门户的还没有对外公布，那么我们这期就针对企业网站做一个分享，一般来说都是要求清爽且有一定篇幅的，今天给大家分享的是关于家具主题的企业网站，希望能给大家带来一些作业上的灵感，也希望大家能够从中得到启发，解决自己眼前的作业窘境，当然能够学到知识是最好的，废话也不多说了，我尽量做到定期更新哈，希望大家能持续关注我哈！

声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》

一、网页主题

本次主要研究的方向是一个企业网站主题相关的，以家具主题为例哈，当清爽色系的主题与设计感发生碰撞，有一种舒适而高级感，这个也是基于html+css开发的企业类主题网页，满满的设计与配色，完整源码包可以唯心G众号《IT黄大大》私信，回复“企业办公”，希望大家能谅解，创作不易。
看下面的效果图，是不是满满的科技设计，希望大家能够喜欢这类风格的哈。

其中特色效果主要包括音频播放、视频播放、js动态切换

二、网页效果

Page1、主页

在这里插入图片描述

Page2、用品展示

在这里插入图片描述

Page3、关于我们

在这里插入图片描述

三、网页架构与技术

3.1 脑海构思

要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。

3.2 整体布局

在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
菜单：menu（主要是采用a标签进行跳转的，包括logo）
主体：main（核心内容展示,包括banner背景图）
底部：foot（版权声明）
其中头部和菜单及底部三个模块都是公用的，针对每个页面的切换主要体现在中间的主体模块，这也是一个好的网页作品必要的四大元素，不然就是斜坡上盖房子了。

3.3 技术说明书

主要应用了web前端2个模块的技术HTML + CSS
HTML模块
主要针对页面的结构搭建，该网站整体采用的是div标签作为盒子，其中包含:
有关无序列表 ul li 、
链接标签a、
段落标签 p、
图片标签 img 、
行内标签span、换行br
表单input,按钮button
字体标签 h2 h3.等
音频、视频标签

声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》
CSS模块
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的border属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。

主要用到了font的文字基本属性，background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性，设置div的左边框的厚度和颜色。
JS模块
简单的动态切换，点击不同按钮切换不同iframe,好比这个按钮切换显示不同图。
在这里插入图片描述