项目分享|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"