网页设计步骤总结-CSDN博客

本文链接：https://blog.csdn.net/wkj001/article/details/139306476

第一步：

css重置 https://blog.csdn.net/BradenHan/article/details/132122504

Eric Meyer’s “Reset CSS”（重置的很极端）
官方网址：https://meyerweb.com/eric/tools/css/reset/

HTML5 Doctor CSS Reset
官方网址：http://html5doctor.com/html-5-reset-stylesheet/

Yahoo! (YUI 3) Reset CSS（推荐）
官方网址：http://developer.yahoo.com/yui/3/cssreset/

Normalize.css（推荐，因为重置较为标准化，不是很极端）
官方网址：http://necolas.github.io/normalize.css/

第二步：媒体查询不同尺寸加载不同的css文件https://blog.csdn.net/Yi_Lesama/article/details/131184469

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

注意：手机版本必须加

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

第三步：字体图标

字体 https://fontawesome.com.cn/
图标：https://www.iconfont.cn/
使用：https://blog.csdn.net/weixin_52540797/article/details/133975245
https://blog.csdn.net/qq_26599807/article/details/89233419

第三步：swiper https://www.swiper.com.cn/index.html

第四步：特效 animate.js animate.css hover.css wow.js aos,js

https://animista.net/
https://animate.style/
https://www.minimamente.com/project/magic/
https://angrytools.com/css/animation/
https://ianlunn.github.io/Hover/

全屏滚动特效
https://alvarotrigo.com/fullPage/zh/
http://fullpage.81hu.com/
https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs

============

1.Your Plan,Your Planet
2.Species in Pieces
3.New Tactics - Sneak Peak
4.Miki Mottes
5.Genesis
6.KIKK Festival
7.Onedesigncompany
8.Marie Morelle

===================

css计算屏幕高度

在CSS中，您可以使用vh（viewport height）单位来计算屏幕的高度。vh单位表示视口高度的百分比，1vh等于视口高度的1%。

.full-screen {
  height: 100vh; /* 设置元素的高度为100%的视口高度 */
}