对html5up部分网站模板的分析
相关网站：
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
https://developer.mozilla.org/
下载链接：
Phantom - 幻影：https://html5up.net/phantom/download
Editorial - 编辑：https://html5up.net/editorial/download
两者的文件结构如下：
assets - 资产
images - 图片
elements - 元素
generic - 通用的
generic - 主页
LICENSE - 许可证
README - 自述
先对 Phantom - 幻影 进行分析：
Phantom展示页：[Phantom | HTML5 UP](https://html5up.net/phantom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| assets
- css
- fontawesome-all.min.css
- Font Awesome图标库样式
- main.css
- 主样式表，包括重置样式、文本样式、布局样式等
- noscript.css
- 当JavaScript被禁用时的样式定义
- js
- breakpoints.min.js
- 包含用于响应式设计的断点功能
- browser.min.js
- 包含浏览器检测功能，用于识别浏览器类型、版本、操作系统等信息
- jquery.min.js
- jQuery库的压缩版本，提供DOM操作、事件处理等功能
- util.js
- 包含一些实用函数，如navList生成器、panel化元素、placeholder属性polyfill等
- main.js
- 主JavaScript文件，包含页面初始化动画、触摸检测、表单自动调整大小、菜单处理等逻辑
- sass
- base
- _page.scss
- 包含页面基本样式设置，例如视口配置、最小宽度、盒模型等。
- _reset.scss
- 提供CSS重置样式，重置HTML元素的默认样式。
- _typography.scss
- 包含排版相关的样式定义，如字体、颜色、链接、标题等。
- components
- _actions.scss
- 包含动作按钮和链接的样式定义，使用Flexbox布局。
- _box.scss
- 包含盒子模型的样式定义，用于创建具有边框和内边距的容器。
- _button.scss
- 包含按钮的样式定义，包括提交按钮、重置按钮、普通按钮等。
- _form.scss
- 包含表单元素的样式定义，包括输入框、选择框、文本区域等。
- _icon.scss
- 包含图标的样式定义，用于图标的显示和交互效果。
- _icons.scss
- 包含图标列表的样式定义，用于展示一系列图标。
- _image.scss
- 包含图像的样式定义，用于图像的布局和样式。
- _list.scss
- 包含列表的样式定义，用于无序列表和有序列表的样式。
- _row.scss
- 包含行布局的样式定义，用于创建响应式布局的行。
- _section.scss
- 包含章节和文章的样式定义，用于章节和文章的布局和样式。
- _table.scss
- 包含表格的样式定义，用于创建表格和表格单元格的样式。
- _tiles.scss
- 包含瓷砖布局的样式定义，用于创建响应式瓷砖布局。
- layout
- _footer.scss
- 包含页脚区域的样式定义，使用Flexbox布局，定义了页脚内容的排版和响应式调整。
- _header.scss
- 包含头部区域的样式定义，包括logo和导航菜单的样式，以及响应式调整。
- _main.scss
- 包含主内容区域的样式定义，主要为内边距的设置和响应式调整。
- _menu.scss
- 包含菜单的样式定义，特别是移动设备上的侧边栏导航菜单的显示和隐藏效果。
- _wrapper.scss
- 包含页面包装器的样式定义，用于设置页面内容的最大宽度和内外边距。
- libs
- _breakpoints.scss
- 包含断点功能的样式定义，用于响应式设计的媒体查询。
- _functions.scss
- 包含Sass函数的样式定义，提供了一系列用于处理数据的工具函数。
- _html-grid.scss
- 包含HTML网格布局的样式定义，用于创建灵活的网格系统。
- _mixins.scss
- 包含Sass混合宏的样式定义，提供了一系列可重用的样式片段。
- _vars.scss
- 包含全局变量的样式定义，如颜色、字体、尺寸等。
- _vendor.scss
- 包含第三方库的样式定义，用于添加浏览器前缀等。
- main.scss
- noscript.scss
`main.scss` 和 `noscript.scss` 是两个不同的SCSS（Sass）文件，它们在Web项目中扮演不同的角色：
### main.scss
- **主样式表**：`main.scss` 通常是一个项目的主样式文件，它作为整个样式表的入口点。在这个文件中，你会导入项目所需的所有其他SCSS文件和库。
- **模块化组织**：通过导入`libs`、`base`、`components`和`layout`等目录下的SCSS文件，`main.scss` 组织和管理项目的样式代码，使其模块化和结构化。
- **样式集成**：它确保所有样式都被正确编译和链接到一起，形成一个完整的CSS文件，该文件随后会被应用到项目的HTML页面中。
- **维护和更新**：由于所有样式都通过`main.scss`导入，更新和维护样式变得更加集中和方便。
### noscript.scss
- **非JavaScript环境样式**：`noscript.scss` 包含当JavaScript被禁用或不可用时应用的样式。这确保了即使在没有JavaScript支持的情况下，网站也能提供基本的样式和功能。
- **增强可访问性**：通过为不支持或禁用JavaScript的用户提供备用样式，`noscript.scss` 增强了网站的可访问性和用户体验。
- **样式回退**：这个文件可能包含一些回退样式，以确保在JavaScript不可用时，网站的某些部分仍然可以以一种优雅的方式展示。
- **特定条件样式**：`noscript.scss` 中的样式只会在`<body>`标签上应用`is-preload`类的特定条件下被激活，这通常与页面加载状态有关。
总的来说，`main.scss` 是整个项目样式的中心枢纽，而`noscript.scss` 则专注于在特定条件下（如JavaScript不可用）提供样式支持。这两个文件共同确保了项目的样式完整性和灵活性。
|
纯html/渲染 前后对比
纯HTML：
渲染后：
现在我们照着html5up-phantom做一个自己的：
1.html
先从index.html开始做，搭建纯html框架；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| <!DOCTYPE html>
<html>
<head>
<title>霜晴避风港-新生</title>
<meta charset="utf-8" />
</head>
<body class="is-preload">
<div id="wrapper">
<header id="header">
<div id="inner">
<a href="index.html" class="logo">
<span class="symbol"><img src="images/logo.png" alt="" /></span><span class="title">霜晴避风港-新生</span>
</a>
<nav>
<ul>
<li><a href="#menu">Menu-目录</a></li>
</ul>
</nav>
</div>
</header>
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Home-主页</a></li>
<li><a href="about.html">About-关于</a></li>
</ul>
</nav>
<div id="main">
<div class="inner">
<header>
<h1>欢迎来到霜晴避风港-新生。我希望可以通过这个工程掌握制作精美实用网页的能力。<br />
可以跳转到<a href="https://opentap.cn">我的博客</a>。</h1>
<p>... la ringrazio.</p>
</header>
<section class="tiles">
<article class="style1">
<span class="image">
<img src="images/pic01.jpg" alt="" />
</span>
<a href="about.html">
<h2>About-关于</h2>
<div class="content">
<p>关于我-我是谁？我在哪？我要做什么？</p>
</div>
</a>
</article>
</section>
</div>
</div>
<footer id="footer">
<div class="inner">
<section>
<h2>留言</h2>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="昵称" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="留言"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="primary" /></li>
</ul>
</form>
</section>
<section>
<h2>Follow</h2>
<ul class="icons">
<li><a href="#" class="icon brands style2 fa-github"><span class="label">GitHub</span></a></li>
</ul>
</section>
<ul class="copyright">
<li>© 霜晴. All rights reserved</li><li>Design: <a href="https://opentap.cn">霜晴避风港</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
|
这是index.html，它现在长这样(对应上面的代码)：
此时的文件结构是这样的：
1
2
3
4
5
6
7
| html-birth
-images
-logo.png
-pic01.jpeg
-index.html
|
2.css
可以发现JS脚本对于网页是非常重要的。正好我们也发现了写Scripts脚本的位置。
我们从asserts/js/main.js入手。但我认为得先介绍一下jquery.min.js。
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它由 John Resig 创建，并于 2006 年 1 月发布。jQuery 的设计宗旨是简化 HTML 文档遍历和操作、事件处理、动画和 Ajax。以下是 jQuery 的一些关键特点：
简化选择器：jQuery 提供了一个简洁的 API 来选择 HTML 元素，使得 DOM 操作更加直观和简洁。
1
2
3
|
$('#myId').css('background-color', 'blue');
$('.myClass').hide();
|
事件处理：jQuery 提供了一个统一的方法来绑定事件处理器，无论在哪种浏览器上。
1
2
3
4
|
$('#myButton').click(function() {
alert('Button clicked!');
});
|
动画和效果：jQuery 允许你轻松地为元素添加动画效果。
1
2
3
4
|
$('#myElement').fadeOut();
$('#myElement').slideUp();
|
Ajax：jQuery 提供了一个简单的方式来进行异步数据请求，使得从服务器获取数据和更新页面部分内容变得容易。
1
2
3
4
|
$.get('/api/data', function(data) {
$('#result').html(data);
});
|
插件生态系统：jQuery 拥有一个庞大的插件生态系统，开发者可以创建和分享扩展 jQuery 功能的插件。
兼容性：jQuery 自动处理浏览器兼容性问题，这意味着你可以在不同的浏览器上使用 jQuery 而不需要担心兼容性问题。
链式调用：jQuery 允许链式调用，这意味着你可以在一个表达式中连续调用多个 jQuery 方法。
1
2
|
$('#myElement').hide().addClass('hidden').fadeIn();
|
轻量级：尽管功能丰富，jQuery 的文件大小相对较小，压缩后的版本通常在 30KB 左右，这使得它在加载速度上具有优势。
jQuery 已经成为 Web 开发中非常流行的库之一，尽管随着现代浏览器原生 JavaScript API 的增强，一些 jQuery 的功能可以通过原生 JavaScript 实现，但 jQuery 仍然因其简洁的语法和广泛的兼容性而在许多项目中被使用。
让我们回到main.js。照着html5up-phantom的main.js做一个自己的main.js(假设我们真的懂js)
