项目分享|html+css+js制作企业官网-期末HTML网页作业课设毕设

本文分享了一次使用HTML、CSS和JavaScript制作企业官网的项目经验，作为HTML期末作业或课设。介绍了HTML的网页结构，CSS的样式应用，以及JS在行为交互中的作用。项目包括了静态资源目录、网站图标、首页HTML等内容，并展示了部分HTML布局代码。

摘要由CSDN通过智能技术生成

项目分享|html+css+js制作企业官网-期末HTML网页作业课设毕设

我主要使用原生HTML、CSS、JavaScript编写的一个静态企业官网展示类型的网站。

本次HTML期末大作业、课设，用HTML+CSS做一个漂亮简单的个人网页或企业官网展示页。

简要介绍一下：

HTML——结构
CSS——样式
JS——行为

HTML

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML 网页结构

下面是一个可视化的HTML页面结构：

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件。

项目文件目录

assets：静态资源目录；
favicon.ico：网站图标；
index.html：首页html；

assets静态资源目录下有css、fonts、images、js等资源目录；

网页界面效果

html布局代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="keywords" content="ChatChat, Chat, 木番薯, 电子商务, 微信商城">
  <meta name="description" content="关于您所想所悟我们知道您一直想付诸实现，木番薯服务不止于单纯的信息服务，我们将全程与您一同创建打造。
依托于木番薯服务与技术团队超过十年的经验积累，我们有能力成为您细细专业领域的左膀右臂。">
  <title>木番薯网络科技</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./assets/dist/css/lib.css">
  <link rel="stylesheet" href="./assets/dist/css/common.css">
  <link rel="stylesheet" href="./assets/dist/css/index.css">
</head>
<body>

  <!-- 导航栏 -->
  <div class="header container-fluid" id="pc-header">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar"