diff --git a/Readme_English.md b/Readme_English.md new file mode 100644 index 0000000..1724fd2 --- /dev/null +++ b/Readme_English.md @@ -0,0 +1,330 @@ +#Project Introduction + +Slides is a static website building tool that simplifies the website creation process by providing pre-designed templates and powerful built-in modules. It is perfect for users who want to build a website quickly but lack professional development skills. Whether it is a personal blog, a business website, or a portfolio showcase, Slides can help users easily achieve their goals. This project consists of four free static HTML website templates created using Slides, and the team members have focused on analyzing the functions of these four templates. + +#✨ Project Features +The following are the features of the Slides project: + +1.Built with HTML, CSS, and JavaScript +-Easy-to-understand and modifiable code: The project is built with HTML, CSS, and JavaScript, which are the fundamental technologies for web development. The code structure is clear, easy to understand and modify, and convenient for developers to customize according to their needs. + +-Good compatibility with other web technologies: HTML works closely with CSS and JavaScript. CSS is used to control the visual presentation of the page, and JavaScript injects interactivity into the page. The combination of the three enables developers to create powerful and visually attractive websites. + +-Strong scalability: HTML has good scalability. With the evolution of web technologies, HTML is constantly updated with new tags and attributes to support richer multimedia content and interactive functions. + +2.Responsive Design +-Adaptable to various devices: The project adopts a responsive design, which can adapt to devices of different sizes, including mobile phones, tablets, and desktop computers, ensuring a good user experience on all devices. + +-Cross-platform: HTML is cross-platform. The same HTML document can run seamlessly on different devices and browsers. Regardless of whether a desktop computer, tablet, or mobile phone is used, the HTML document can be rendered and maintain a similar visual effect. + +3.Dynamic Effects and Strong Interactivity +Rich dynamic effects: Using CSS and JavaScript, the project implements dynamic effects such as sliding and fading in and out, enhancing the interactivity and visual appeal of the page. +Integrated with various interactive functions: The project integrates functions such as chatting, discussion, and email collection, providing rich interactivity, which helps to increase user engagement and improve sales capabilities. + +4.Rich Built-in Modules +-A variety of functional modules: The project includes a variety of powerful built-in modules, such as typography, background music, pop-up windows, and user interface elements, which are convenient for users to set up and customize. +-Animation screenshot function: The project provides an animation screenshot function. Users can view the animation effects by downloading the templates, which increases the project's attractiveness. + + +5.SEO Optimization +-Search engine optimization: The project has been optimized for search engines. By using appropriate title tags, descriptive and relevant meta tags, and providing text descriptions for images, the visibility in search engines is improved, which helps to enhance the website's ranking. + +6.Multi-page Support and Integration of Popular Services +-Support for multi-page websites: It supports the creation of websites with multiple pages to meet more complex needs. +-Integration of popular services: The project integrates popular services, such as social media sharing buttons, enhancing the functionality and social interactivity of the website. + +7.Easy to Use and Free Templates +-Intuitive user interface: The project provides an intuitive user interface, allowing you to build a website without complex +programming knowledge. + +-Free templates: The project provides free static HTML website templates, which users can use for personal or commercial projects, but they cannot be resold. + +8.Rich Documentation and Tutorials +-Detailed documentation support: The project provides detailed documentation and tutorials to help users understand and use the project. +-These features make Slides a feature-rich, easy-to-use, and attractive website building tool, especially suitable for users who want to launch a website quickly. + +##🚀 Quick Start +##Clone the Project + +1.Open the command prompt (Windows can use cmd/Terminal/Powershell, Mac can use Terminal) +First, create a new folder on drive D: +cd D:\github + +2.Enter the command, copy the address, and clone it to your repository: +git clone https://github.com/wenxiao1234/html-website-templates.git + +##Install Dependencies +Open the project in a suitable IDE (such as Visual Studio Code or IntelliJ IDEA) according to the project requirements and install the dependencies. +If the project uses npm, you can run: +npm install + +###Launch the Project +1.Open the cloned project in Visual Studio Code to clearly view the document structure and corresponding code. + +2.To see the specific web page effect, you can directly double-click index.html (This web page template is generated by Slides and requires external website resources. When accessing from within the country, an accelerator is needed). + +3.Open the generated file in the browser to view the project effect. The project will run in the browser at: +file:///D:/github/html-website-templates/Animated%20Landing%20Page%20Website%20Template/index.html +file:///D:/github/html-website-templates/Horizontal%20Scroll%20One%20Page%20Template%20Website/index.html +file:///D:/github/html-website-templates/One%20Page%20Portfolio%20Website%20Template/index.html + + +##📦 Project Structure +``` + +Animated Landing Page Website Template/ # Animated Landing Page Website Template +├── assets/ # Image resources +│ ├── img/ # Image library +│ ├── background/ # Background image library +│ ├── img-09.jpg +│ ├── img-14.jpg +│ ├── img-15.jpg +│ ├── img-85.jpg +│ ├── img-89.jpg +│ └── img-95.jpg +│ ├── appstore.jpg # Apple App Store image +│ ├── googleplay.jpg # Google Play image +│ ├── image-100.png +│ ├── image-89-1.jpg +│ └── image-89-2.jpg +│ ├── svg/ # Directional icon library +│ ├── icons.svg # Negative film +│ ├── play.svg # Play button +│ ├── video-icon-dark.svg # Dark background play icon +│ └── video-icon.svg # White background play icon +├── css/ +│ ├── slides.css # Ensuring the normal functionality and display effect of the web page. +│ ├── slides.min.css # Using a nested structure to define the styles of web page elements. +│ └── swiper.min.css # Swiper carousel component, defining relevant styles, supporting different effects and compatibility with different devices +├── js/ # Script folder +│ ├── plugins.js # A collection of front-end development plugins, used to enhance web page interactivity and improve user experience +│ ├── slides.js # Slideshow script, used to create dynamic and responsive web page slideshows +│ ├── slides.min.js # Web page slideshow library +│ ├── soundcloud.min.js # Background music playback script +│ └── swiper.min.js # Plugin script to enrich slideshow display +├── manual/ # Documentation providing detailed instructions and guidance +│ └── manual.url # Quick access to the corresponding web page without manually entering the URL +├── scss/ # Preprocessor files based on CSS +│ ├── colors.scss # Defining various colors +│ ├── dialog.scss # Dialog box +│ ├── flex.scss # Web page tools +│ ├── framework.scss # Framework +│ ├── grid.scss # Grid +│ ├── layout.scss # Layout +│ ├── mixins.scss # Developer toolkit +│ ├── plumber.scss # Typesetting tool +│ ├── reset.scss # Reset +│ ├── slides.scss # Slideshow +│ ├── typography.scss # Typesetting +│ ├── useful-classes.scss # Various functions of web page design +│ └── variables.scss # Variables +│ +├── _first-steps.url # Home page web link shortcut +├── _open-generator.url # App shortcut +├── ajax-email.php # Email validation +├── index.html # Main interface +└── readme first.txt # Declaration of its creation source as a specified web page +复制 +Horizontal Scroll One Page Template Website/ # Horizontal Scroll One Page Template Website +├── assets/ # Image resources +│ ├── img/ # Image library +│ ├── background/ # Background image library +│ ├── img-26.jpg +│ ├── img-27.jpg +│ ├── img-34.jpg +│ ├── img-60.jpg +│ ├── img-83.jpg +│ ├── img-91.jpg +│ └── img-95.jpg +│ ├── appstore.jpg +│ ├── gallery-60-1.jpg +│ ├── gallery-60-2.jpg +│ ├── gallery-60-3.jpg +│ ├── googleplay.jpg +│ ├── icon-1.png +│ ├── icon-2.png +│ ├── iphones-34.png +│ ├── watch-26-1.png +│ └── watch-26-2.png +│ ├── svg/ # Icon library +│ ├── icons.svg # Negative film +│ ├── video-icon-dark.svg # Dark background play icon +│ └── video-icon.svg # White background play icon +├── css/ +│ ├── slides.css # Unifying the style, layout, and interactive effects of the web page. +``` +``` + + +Landing Page Website for App/ +├── assets/ # Static resources +│ ├── img/ # Image resources +│ └── svg/ # SVG icons +│ ├── icons.svg # Icon SVG file +│ ├── video-icon-dark.svg # Dark video icon SVG file +│ └── video-icon.svg # Video icon SVG file +├── css/ # CSS folder +│ ├── slides.css # Slideshow style file +│ └── slides.min.css # Minified slideshow style file +├── js/ # JavaScript folder +│ ├── plugins.js # Plugin script file, containing basic plugins and utility functions (image caching, event listeners, mouse wheel event handling, etc.), providing interactive functions for the website +│ ├── slides.js # Slideshow script file, implementing slideshow transitions, animation effects, responsive layout, and controlling the display logic and user interaction of slides +│ ├── slides.min.js # Minified slideshow file, with the same functionality as slides.js +│ └── swiper.min.js # Minified script file of the Swiper plugin, used for implementing carousel functionality, providing touch swiping and autoplay features +└── manual/ # Manual documentation folder + └── manual.url # Manual documentation link file, possibly containing links to external or internal documentation + +# One Page Portfolio Website Template/ +├── assets/ # Static resources folder +│ ├── img/ # Image resources folder +│ │ ├── demo.jpg # Sample image file +│ │ └── demo2.jpg # Sample image file +│ ├── svg/ # SVG icons folder +│ │ ├── icons.svg # Icon SVG file +│ │ ├── play.svg # Play icon SVG file +│ │ ├── video-icon-dark.svg # Dark video icon SVG file +│ │ └── video-icon.svg # Video icon SVG file +├── css/ # CSS folder +│ ├── slides.css # Slideshow style file +│ └── slides.min.css # Minified slideshow style file +│ └── swiper.min.css # Minified style file of the Swiper plugin +├── js/ # JavaScript folder +│ ├── plugins.js # Script file containing required plugins +│ ├── slides.js # Slideshow script file +│ └── slides.min.js # Minified slideshow script file +│ ├── soundcloud.min.js # Minified script file of the SoundCloud player plugin +│ └── swiper.min.js # Minified script file of the plugin +├── manual/ # Manual documentation folder + ├── manual.url # Manual documentation link file +├── _first-steps.url # Link file for initial steps +├── _open-generator.url # Link file to open the generator +├── ajax-email.php # PHP file for handling AJAX requests +├── index.html # Main HTML file +└── readme first.txt # Project description file +``` + +## 📮 Main Features and Screenshots of the Project + + +1. **Animated Landing Page Website Template** + - This is an animated landing page website template consisting of 6 pages, with a sidebar to switch between pages. The layout is aesthetically pleasing and well-organized. + - The first page is a login page. After filling out the form, you can start using it, and there is a video tutorial in the middle. + ![Project Interface Screenshot](images/wx/pic0_1.png) + - The second and third pages are introduction pages that guide users on how to use the project. + ![Project Interface Screenshot](images/wx/pic0_2.png) + ![Project Interface Screenshot](images/wx/pic0_3.png) + - The fourth page is used to introduce products, with clickable images and videos for more details. + ![Project Interface Screenshot](images/wx/pic0_4.png) + - The fifth and sixth pages guide users to try out the product. + +2. **Horizontal Scroll One Page Template Website** + - This is a horizontal scroll single-page website consisting of 7 scrollable pages. The interface transitions smoothly when scrolling down. + - On the first page, clicking on the watch image centers it on the page. + ![Project Interface Screenshot](images/wx/pic_1.png) + ![Project Interface Screenshot](images/wx/pic_2.png) + - The second page allows you to play a video tutorial by clicking on it. + ![Project Interface Screenshot](images/wx/pic_3.png) + - The third and fourth pages allow you to switch between different watch styles by clicking on the watch images. + ![Project Interface Screenshot](images/wx/pic_4.png) + ![Project Interface Screenshot](images/wx/pic_5.png) + - The fifth page redirects to the first page when you click on "Purchase." + ![Project Interface Screenshot](images/wx/pic_6.png) + - The sixth and seventh pages guide users to try out the product. + +3. **Landing Page Website for App** + - This is a landing page website specifically designed for mobile applications (Apps), consisting of 7 scrollable pages. The interface is responsive and user-friendly. + + 1. The first page features a phone image that can be switched by clicking. + + ![Project Interface Screenshot](images/wx/pic2_1.png) + 2. The second page has 7 images. Clicking on them displays a larger version, and the three modules below default to redirecting to the first page. + ![Project Interface Screenshot](images/wx/pic2_2.png) + + 3. The third page is an introduction page where clicking on the phone image displays a larger version. + ![Project Interface Screenshot](images/wx/pic2_3.png) + + 4. The remaining pages guide users to try out the app. + +4. **One Page Portfolio Website Template** + - This template is designed to showcase personal or company portfolios, skills, services, and contact information. The layout is well-organized, with a good balance of text and images, and an aesthetically pleasing interface. + + 1. The first page focuses on titles and text. + ![Project Interface Screenshot](images/wx/pic3_1.png) + + 2. The second page, like the third template, is divided into 7 images that can be clicked to view larger versions. + + 3. The third page combines videos, images, and text in an elegant and spacious layout. + ![Project Interface Screenshot](images/wx/pic3_2.png) + + 4. The fourth page provides a more detailed introduction with beautiful images, and clicking on an image defaults to redirecting to the first page. + ![Project Interface Screenshot](images/wx/pic3_3.png) + + 5. The fifth page includes some text and the contact information of the studio. + ![Project Interface Screenshot](images/wx/pic3_4.png) + + + + +## Core Features: + +### plugins.js + +1. **Cross-browser Mouse Wheel Event Plugin**: Implements a mouse wheel event handler compatible with different browsers by extending jQuery methods, allowing developers to use a unified mouse wheel event handling logic in projects. + +2. **Feature-rich Touch Event Plugin**: Supports various touch events such as swipe, pinch, tap, double-tap, and long press, ensuring compatibility across devices and browsers, providing a convenient touch interaction solution for developers. + +3. **Social Sharing Plugin**: Enables developers to easily add share buttons for multiple social platforms on web pages, display share counts, track share actions, and offers functionalities like opening share pop-ups. + +4. **Image Click Zoom Functionality**: Supports keyboard shortcuts to open images in new windows and handles events like scroll, keyboard, click, and touch to control the zoom state. Enhances user experience with mask layers and animation effects. + +5. **Utility JavaScript Modules**: Combines several practical modules for front-end development, including event management, size calculation, element selection, and layout management. The Masonry module facilitates masonry layout implementation. Each module follows a modular design principle, supporting various loading methods for easy integration into different projects. + +6. **Event Emitter (EvEmitter) and Image Loading Detection (imagesLoaded)**: EvEmitter provides event binding, triggering, and removal functionalities. imagesLoaded, based on EvEmitter, detects the loading status of images and background images, offering corresponding event callbacks. + +7. **jQuery Form Plugin**: Supports various form submission methods, including using FormData objects and iframe methods, ensuring cross-browser compatibility. Also provides form data processing, form reset, and field clearing functionalities. + +8. **detectZoom Tool**: Uses multiple methods to detect the browser's zoom level and the ratio of device pixels to CSS pixels. It selects the appropriate detection method based on the browser environment, providing developers with a unified interface to obtain this information. + +### slides.js + +1. Initializes page state, listens for events, configures parameters based on page class names, and handles page loading and slide-related logic. + +2. Implements slide transition functionalities, including displaying specified slides, changing slides, handling click events, and performing image zoom operations. + +3. Handles page scroll and touch move events, executing different scroll logic based on page modes (scroll or slide mode). It also switches slides under specific conditions and hides the dropdown menu during scrolling. + +4. Implements two core functionalities: determining the state of `.slide` elements based on page scroll position and updating styles and triggering events, and performing scroll animations on elements with the `ae-` class under specific conditions. + +5. Implements three functionalities: gesture handling for mobile and desktop devices, responsive panel layout adjustments, and hiding panels during scrolling. + +6. Implements keyboard event handling, navigation point and tooltip generation, internal page link handling, and navigation update functionalities. + +7. Implements sidebar display and hide functionalities, along with related interaction logic. + +8. Implements popup display and hide functionalities, along with related interaction logic. + +9. Implements element height adaptation and window size change detection functionalities. + +10. Implements slider component interaction logic, including autoplay, click switching, controller operations, and previous/next switch button functionalities. + +11. Implements dropdown menu display and hide functionalities, along with social sharing functionalities. + +12. Implements dialog display and hide functionalities, along with AJAX form submission logic. + +13. Implements audio playback control functionalities, as well as device, browser, and operating system detection functionalities. + +### slides.min.js + +1. Detects user device, browser, operating system, etc., and adds corresponding CSS classes to HTML elements based on the detection results, facilitating subsequent style customization. + +### soundcloud.min.js + +1. Implements SoundCloud player-related functionalities, divided into two parts: defining the `window.soundcloud` object to handle SoundCloud widget events, and implementing player UI and interaction logic based on jQuery. + +2. Implements a SoundCloud-based music player using the jQuery library to manipulate the DOM and handle events. + +### swiper.min.js + +1. Implements the core functionality of the Swiper library, a powerful mobile touch sliding plugin for creating carousel and slider interactions. + +2. Uses the Swiper library to create two different carousel slider instances, assigned to `window.swiper98` and `window.swiper99`. Swiper is a popular mobile touch sliding plugin for creating carousel and slider interactions. diff --git a/Readme_zh.md b/Readme_zh.md new file mode 100644 index 0000000..0415f1e --- /dev/null +++ b/Readme_zh.md @@ -0,0 +1,318 @@ +# SimpleTodo +# 项目简介 + +Slides 是一个静态网站构建工具，它通过提供预设计的模板和强大的内置模块，简化了网站创建过程。它非常适合希望快速搭建网站但缺乏专业开发技能的用户。无论是个人博客、商业网站还是作品集展示，Slides 都能帮助用户轻松实现他们的目标。本项目是slides的四个免费的静态网页模板，小组成员着重对四个模板的功能进行分析。 + +## ✨ 项目特点 + +以下是Slides项目的特点： +1.基于HTML、CSS和JavaScript构建 +- 代码易于理解和修改：项目使用HTML、CSS和JavaScript构建，这些是网页开发的基础技术，代码结构清晰，易于理解和修改，方便开发者根据需求进行定制。 +- 与其他Web技术兼容性好：HTML与CSS和JavaScript紧密结合，CSS用于控制页面的视觉呈现，JavaScript为页面注入交互性，三者结合使得开发者能够创建功能强大且视觉吸引力高的网站。 +- 可扩展性强：HTML具有良好的可扩展性，随着Web技术的演进，HTML也不断更新，引入了新的标签和属性，以支持更丰富的多媒体内容和交互功能。 + +2.响应式设计 +- 适配多种设备：项目采用了响应式设计，能够适配不同尺寸的设备，包括手机、平板和桌面电脑，确保在各种设备上都能提供良好的用户体验。 +- 跨平台性：HTML是跨平台的，同一个HTML文档可以在不同的设备和浏览器上无缝运行，无论使用的是桌面电脑、平板还是手机，HTML文档都能够被渲染并保持相似的视觉效果。 + +3.动态效果与交互性强 +- 丰富的动态效果：利用CSS和JavaScript，项目实现了动态效果，如滑动、淡入淡出等，增强了页面的互动性和视觉吸引力。 +- 集成多种交互功能：项目集成了聊天、讨论、邮件收集等功能，提供了丰富的交互性，有助于增强用户参与度和提升销售能力。 + +4.内置模块丰富 +- 多种功能模块：项目包含了多种强大的内置模块，如排版、背景音乐、弹出窗口、用户界面元素等，方便用户进行设置和定制。 +- 动画截图功能：提供了动画截图功能，用户可以通过下载模板来查看动画效果，增加了项目的吸引力。 + +5.SEO优化 +- 搜索引擎优化：项目进行了搜索引擎优化，通过使用合适的标题标签、描述性和相关性的meta标签，以及为图片提供文本描述等，提高了在搜索引擎中的可见性，有助于提升网站的排名。 + +6.多页支持与流行服务集成 +- 支持多页网站：支持创建包含多个页面的网站，满足更复杂的需求。 +- 集成流行服务：项目集成了流行的服务，如社交媒体分享按钮等，增强了网站的功能性和社交互动性。 + +7.易于使用与免费模板 +- 直观的用户界面：项目提供了直观的用户界面，无需复杂的编程知识即可构建网站。 +- 免费模板：项目提供了免费的静态HTML网站模板，用户可以用于个人或商业项目，但不能转售。 + +8.丰富的文档和教程 +- 详细的文档支持：项目提供了详细的文档和教程，帮助用户理解和使用项目。 + +这些特点使得Slides成为一个功能丰富、易于使用且具有吸引力的网站构建工具，特别适合希望快速上线网站的用户。 + +## 🚀 快速开始 + +### 克隆项目 + +1.打开命令行提示符（Windows 可以用cmd/Terminal/Powershell，Mac 直接用终端） +先在D盘创建新文件 +cd D:\github + +2.输入命令，复制地址，克隆到自己的仓库： +git clone https://github.com/wenxiao1234/html-website-templates.git + +### 安装依赖 +slides +根据项目需求，使用合适的 IDE（如 Visual Studio Code 或 IntelliJ IDEA）打开项目并安装依赖项。 +如果项目使用 npm，可以运行：npm install + +### 启动项目 +1.把克隆好的项目在Visual Studio Code中打开，可以清晰地查看文档结构和相应代码 +2.如需看具体网页效果，可直接双击index.html（此网页模板由slides生成，需借助此外网网站资源，国内访问需使用加速器） +3.在浏览器中打开生成的文件，查看项目效果 +项目将在浏览器中运行: +`file:///D:/github/html-website-templates/Animated%20Landing%20Page%20Website%20Template/index.html` +`file:///D:/github/html-website-templates/Horizontal%20Scroll%20One%20Page%20Template%20Website/index.html` +`file:///D:/github/html-website-templates/One%20Page%20Portfolio%20Website%20Template/index.html` + + +## 📦 项目结构 + + +``` +Animated Landing Page Website Template/ #动画登陆页面网站模板 +├── assets/ # 图片资源 +│ ├── img/ # 图片库 +│ ├── background/ # 背景图片库 +│ ├── img-09.jpg +│ ├── img-14.jpg +│ ├── img-15.jpg +│ ├── img-85.jpg +│ ├── img-89.jpg +│ └── img-95.jpg +│ ├── appstore.jpg # 苹果软件商店图片 +│ ├── googleplay.jpg # 谷歌应用商店图片 +│ ├── image-100.png +│ ├── image-89-1.jpg +│ └── image-89-2.jpg +│ ├── svg/ # 指向性图标库 +│ ├── icons.svg #底片 +│ ├── play.svg #播放按钮 +│ ├── video-icon-dark.svg #黑底播放图标 +│ └── video-icon.svg #白底播放图标 +├── css/ +│ ├── slides.css # 确保网页的正常功能和显示效果。 +│ ├── slides.min.css # 采用嵌套结构，定义网页元素样式。 +│ └── swiper.min.css # Swiper轮播组件，定义相关样式，支持不同效果与不同设备的适配 +├── js/ # 脚本文件夹 +│ ├── plugins.js # 前端开发插件集合，用于增强网页交互性和改善用户体验 +│ ├── slides.js # 幻灯片展示脚本，用于创建动态、响应式的网页幻灯片展示 +│ ├── slides.min.js # 网页幻灯片展示库 +│ ├── soundcloud.min.js # 背景音乐播放脚本 +│ └── swiper.min.js # 丰富幻灯片展示的插件脚本 +├── manual/ # 提供详细说明和指导的文档 +│ └── manual.url # 快速访问对应的网页，不用手动输入网址 +├── scss/ # 基于 CSS 的预处理器文件 +│ ├── colors.scss # 定义各种颜色 +│ ├── dialog.scss # 对话框 +│ ├── flex.scss # 网页工具 +│ ├── framework.scss # 框架 +│ ├── grid.scss # 网格 +│ ├── layout.scss # 布局 +│ ├── mixins.scss # 开发者工具集 +│ ├── plumber.scss # 排版工具 +│ ├── reset.scss # 重置 +│ ├── slides.scss # 幻灯片 +│ ├── typography.scss # 排版 +│ ├── useful-classes.scss # 网页设计的各种功能 +│ └── variables.scss # 变量 +│ +├── _first-steps.url # 首页网页链接快捷方式 +├── _open-generator.url # app快捷方式 +├── ajax-email.php # 验证邮箱 +├── index.html # 主界面 +└── readme first.txt # 声明其创建来源为指定的网页 +``` +``` +Horizontal Scroll One Page Template Website/ # 水平滚动单页模板网站 +├── assets/ # 图片资源 +│ ├── img/ # 图片库 +│ ├── background/ # 背景图片库 +│ ├── img-26.jpg +│ ├── img-27.jpg +│ ├── img-34.jpg +│ ├── img-60.jpg +│ ├── img-83.jpg +│ ├── img-91.jpg +│ └── img-95.jpg +│ ├── appstore.jpg +│ ├── gallery-60-1.jpg +│ ├── gallery-60-2.jpg +│ ├── gallery-60-3.jpg +│ ├── googleplay.jpg +│ ├── icon-1.png +│ ├── icon-2.png +│ ├── iphones-34.png +│ ├── watch-26-1.png +│ └── watch-26-2.png +│ ├── svg/ # 图标库 +│ ├── icons.svg # 底片 +│ ├── video-icon-dark.svg # 黑底播放图标 +│ └── video-icon.svg # 白底播放图标 +├── css/ +│ ├── slides.css # 统一网页风格，布局和交互效果。 +│ ├── slides.min.css # 样式表,提供一套完整的幻灯片展示解决方案 +├── js/ # 各类脚本文件夹 +│ ├── plugins.js # 前端开发插件集合，用于增强网页交互性和改善用户体验 +│ ├── slides.js # 幻灯片展示脚本，用于创建动态、响应式的网页幻灯片展示 +│ ├── slides.min.js # 网页幻灯片展示库 +│ └── swiper.min.js # 丰富幻灯片展示的插件脚本 +├── manual/ # 提供详细说明和指导的文档 +│ └── manual.url # 快速访问对应的网页，不用手动输入网址 +├── scss/ # 基于 CSS 的预处理器文件 +│ ├── colors.scss # 定义各种颜色 +│ ├── dialog.scss # 对话框 +│ ├── flex.scss # 网页工具 +│ ├── framework.scss # 框架 +│ ├── grid.scss # 网格 +│ ├── layout.scss # 布局 +│ ├── mixins.scss # 开发者工具集 +│ ├── plumber.scss # 排版工具 +│ ├── reset.scss # 重置 +│ ├── slides.scss # 幻灯片 +│ ├── typography.scss # 排版 +│ ├── useful-classes.scss # 网页设计的各种功能 +│ └── variables.scss # 变量 +│ +├── _first-steps.url # 首页网页链接快捷方式 +├── _open-generator.url # app快捷方式 +├── ajax-email.php # 验证邮箱 +├── index.html # 主界面 +└── readme first.txt # 声明其创建来源为指定的网页 +``` + +``` +Landing Page Website for App/ +├── assets/ # 静态资源 +│ ├── img/ # 图片资源 +│ └── svg/ # SVG 图标 +│ ├── icons.svg # 图标 SVG 文件 +│ ├── video-icon-dark.svg # 暗色视频图标 SVG 文件 +│ └── video-icon.svg # 视频图标 SVG 文件 +├── css/ # CSS 文件夹 +│ ├── slides.css # 幻灯片样式文件 +│ └── slides.min.css # 压缩后的幻灯片样式文件 +├── js/ # JavaScript 文件夹 +│ ├── plugins.js # 插件脚本文件，包含一些基础插件和工具函数（图片缓存、事件监听、鼠标滚轮事件处理等），提供网站的交互功能 +│ ├── slides.js # 幻灯片脚本文件，实现幻灯片的切换、动画效果、响应式布局等功能，控制幻灯片的显示逻辑和用户交互 +│ ├── slides.min.js # 压缩后的幻灯片文件，与 slides.js 功能相同 +│ └── swiper.min.js # Swiper 插件压缩后的脚本文件，用于实现轮播图功能，提供触摸滑动、自动播放 +└── manual/ # 手动文档文件夹 + └── manual.url # 手动文档链接文件，可能包含指向外部文档或内部文档的链接 + +# One Page Portfolio Website Template/ +├── assets/ # 静态资源文件夹 +│ ├── img/ # 图片资源文件夹 +│ │ ├── demo.jpg # 示例图片文件 +│ │ └── demo2.jpg # 示例图片文件 +│ ├── svg/ # SVG 图标文件夹 +│ │ ├── icons.svg # 图标 SVG 文件 +│ │ ├── play.svg # 播放图标 SVG 文件 +│ │ ├── video-icon-dark.svg # 暗色视频图标 SVG 文件 +│ │ └── video-icon.svg # 视频图标 SVG 文件 +├── css/ # CSS 文件夹 +│ ├── slides.css # 幻灯片样式文件 +│ └── slides.min.css # 压缩后的幻灯片样式文件 +│ └── swiper.min.css # Swiper 插件压缩后的样式文件 +├── js/ # JavaScript 文件夹 +│ ├── plugins.js # 包含所需插件的脚本文件 +│ ├── slides.js # 幻灯片脚本文件 +│ └── slides.min.js # 压缩后的幻灯片脚本文件 +│ ├── soundcloud.min.js #音乐播放器插件压缩后的脚本文件 +│ └── swiper.min.js # 插件压缩后的脚本文件 +├── manual/ # 手动文档文件夹 + ├── manual.url # 手动文档链接文件 +├── _first-steps.url # 初步步骤链接文件 +├── _open-generator.url # 打开生成器链接文件 +├── ajax-email.php # 处理 AJAX 请求的 PHP 文件 +├── index.html # 主 HTML 文件 +├── readme first.txt # 项目说明文件 +``` + + +## 📮 项目主要功能说明与截图 + +一、Animated Landing Page Website Template +这是一个动画登录页面网站模板，由6个页面组成，侧边栏可以选择要切换到页面。页面布局美观合理。 +第一个页面是登录页面，填写好表单可以开始使用，中间有视频教程 +![项目界面截图](images/wx/pic0_1.png) +第二、三个页面属于介绍页面，引导人使用其项目 +![项目界面截图](images/wx/pic0_2.png) +![项目界面截图](images/wx/pic0_3.png) +第四个页面用来介绍产品，图和视频都能点击查看详情 +![项目界面截图](images/wx/pic0_4.png) +第五、六个页面是引导用户试用 + +二、Horizontal Scroll One Page Template Website +这是一个水平滚动单页网站网站，此网页由7个滚动页面构成，当鼠标下滑时可以向右滚动切换页面。整体界面切换比较流畅，页面切换衔接舒适。 +第一个页面点击手表时可使图片聚焦在页面中心 +![项目界面截图](images/wx/pic_1.png) +![项目界面截图](images/wx/pic_2.png) +第二个页面点击视频课播放 +![项目界面截图](images/wx/pic_3.png) +第三、四个页面点击手表图片可切换不同样式的手表图片 +![项目界面截图](images/wx/pic_4.png) +![项目界面截图](images/wx/pic_5.png) +第五个页面点击“购买”会跳转到第一个页面 +![项目界面截图](images/wx/pic_6.png) +第六、七个页面是引导用户试用 + +三.Landing Page Website for App + 这是为移动应用（App）专门设计的着陆页网站。此网页由7个滚动页面构成， 整体界面自适应屏幕大小，界面用户友好性强。 + 1.第一个页面有个手机图片，单击可切换图片 +![项目界面截图](images/wx/pic2_1.png) + 2.第二个页面有7张图片，单击可查看大图，下方三个模块默认跳转到第一页 +![项目界面截图](images/wx/pic2_2.png) + 3.第三个页面是介绍页，单击手机图片可查看大图 + ![项目界面截图](images/wx/pic2_3.png) + 4.其余页面为引导用户试用 + +四.One Page Portfolio Website Template +这是一个专门设计用于展示个人或公司作品、技能、服务和联系方式等信息的网站模板。整体页面布局合理，图文并茂，介绍详略得当，界面美观。 +1.第一个页面以标题和文字为主。 +![项目界面截图](images/wx/pic3_1.png) +2.第二个页面和第三个模板一样分为7个图片，单击可查看大图 +3.第三个页面是视频、图片与文本结合，布局美观大气 +![项目界面截图](images/wx/pic3_2.png) +4.第四个页面是更详细的图文介绍页面，配图美观，单击图片默认跳转第一页 +![项目界面截图](images/wx/pic3_3.png) +5.第五张网页有部分文本，有着工作室的联系方式。 +![项目界面截图](images/wx/pic3_4.png) + + +核心功能： +plugins.js的功能有： +1.实现了一个兼容不同浏览器的鼠标滚轮事件处理插件，通过扩展 jQuery 的方法，方便开发者在项目中使用统一的鼠标滚轮事件处理逻辑。 +2.实现了一个功能丰富的触摸事件处理插件，支持滑动、捏合、点击、双击、长按等多种触摸事件，同时兼容不同设备和浏览器，为开发者提供了便捷的触摸交互解决方案。 +3.实现了一个功能丰富的社交分享插件，允许开发者在网页上方便地添加多种社交平台的分享按钮，显示分享计数，跟踪分享行为，并提供了打开分享弹窗等功能。 +4.实现了图片点击缩放功能，支持键盘快捷键在新窗口打开图片，还处理了滚动、键盘、点击和触摸等事件以控制缩放状态。同时，代码使用了遮罩层和动画效果提升用户体验。 +5.组合了多个实用的 JavaScript 模块，为前端开发提供了事件管理、尺寸计算、元素选择、布局管理等功能，Masonry 模块能方便地实现瀑布流布局。每个模块都遵循模块化设计原则，支持多种模块加载方式，便于集成到不同项目中。 +6.实现了一个事件发射器 EvEmitter 和一个图片加载检测工具 imagesLoaded。EvEmitter 提供了事件的绑定、触发和移除功能，imagesLoaded 则基于 EvEmitter 实现了图片加载状态的检测，支持检测图片和背景图片的加载情况，并提供了相应的事件回调。 +7.实现了一个功能强大的 jQuery 表单插件，支持多种表单提交方式，包括使用 FormData 对象和 iframe 方式，兼容不同浏览器，还提供了表单数据处理、表单重置、字段清空等辅助功能。 +8.detectZoom 工具通过多种方法检测浏览器的缩放级别和设备像素与 CSS 像素的比例，根据不同的浏览器环境选择合适的检测方法，为开发者提供了统一的接口来获取这些信息。 + +slides.js的功能有： +1.用于初始化页面状态、监听事件、根据页面类名配置参数，以及处理页面加载和滑动相关的逻辑。 +2.主要实现了幻灯片切换相关的功能，包括显示指定幻灯片、改变幻灯片、点击事件处理以及图片缩放相关操作。 +3.主要处理页面滚动和触摸移动事件，根据不同的页面模式（滚动模式或幻灯片模式）执行不同的滚动逻辑，还会在特定条件下切换幻灯片，并在滚动时隐藏下拉菜单。 +4.实现了两个核心功能：一是根据页面滚动位置判断 .slide 元素的状态并更新相关样式和触发事件；二是在特定条件下对带有 ae- 类的元素执行滚动动画。 +5.实现了三个功能：移动端和桌面端的滑动手势处理、响应式面板布局调整以及滚动时隐藏面板。 +6.主要实现了键盘事件处理、导航点和提示框生成、页面内导航链接处理以及导航更新功能。 +7.实现了侧边栏的显示、隐藏功能，以及相关的交互逻辑。 +8.实现了弹出窗口（popup）的显示、隐藏功能，以及相关的交互逻辑。 +9.实现了元素高度自适应和窗口大小变化检测的功能。 +10.实现了一个滑块（slider）组件的交互逻辑，包含自动播放、点击切换、控制器操作以及前后切换按钮功能。 +11.实现了下拉菜单（dropdown）的显示、隐藏功能，以及社交分享功能。 +12.实现了对话框（dialog）的显示、隐藏功能，以及 AJAX 表单提交的相关逻辑。 +13.实现了音频播放控制功能，以及设备、浏览器和操作系统的检测功能。 + +slides.min.js的功能有： +1.主要用于检测用户设备、浏览器、操作系统等信息，并且依据检测结果给 HTML 元素添加对应的 CSS 类，方便后续进行样式定制。 + +soundcloud.min.js的功能有： +1.实现了一个 SoundCloud 播放器相关的功能，主要分为两部分：第一部分是 window.soundcloud 对象的定义，用于处理 SoundCloud 小部件事件；第二部分是基于 jQuery 实现的播放器 UI 和交互逻辑。 +2.实现了一个基于 SoundCloud 的音乐播放器，使用 jQuery 库来操作 DOM 和处理事件。 + +swiper.min.js的功能有： +1.代码是 Swiper 库的核心实现，Swiper 是一个强大的移动端触摸滑动插件，用于创建轮播图、滑块等交互效果。 +2.使用了 Swiper 库来创建两个不同的轮播滑块实例，分别赋值给 window.swiper98 和 window.swiper99。Swiper 是一个流行的移动端触摸滑动插件，可用于创建轮播图、滑块等交互效果。 + diff --git a/ai_usage_screenshots/2205302010315_1.png b/ai_usage_screenshots/2205302010315_1.png new file mode 100644 index 0000000..8374d06 Binary files /dev/null and b/ai_usage_screenshots/2205302010315_1.png differ diff --git a/ai_usage_screenshots/2205302010315_2.png b/ai_usage_screenshots/2205302010315_2.png new file mode 100644 index 0000000..3c379da Binary files /dev/null and b/ai_usage_screenshots/2205302010315_2.png differ diff --git a/ai_usage_screenshots/2205302010340_1.png b/ai_usage_screenshots/2205302010340_1.png new file mode 100644 index 0000000..abf49dd Binary files /dev/null and b/ai_usage_screenshots/2205302010340_1.png differ diff --git a/ai_usage_screenshots/2205302010340_2.png b/ai_usage_screenshots/2205302010340_2.png new file mode 100644 index 0000000..0981c6c Binary files /dev/null and b/ai_usage_screenshots/2205302010340_2.png differ diff --git a/ai_usage_screenshots/2205302010340_3.png b/ai_usage_screenshots/2205302010340_3.png new file mode 100644 index 0000000..67e1fa5 Binary files /dev/null and b/ai_usage_screenshots/2205302010340_3.png differ diff --git a/ai_usage_screenshots/2205302010340_4.png b/ai_usage_screenshots/2205302010340_4.png new file mode 100644 index 0000000..4c32807 Binary files /dev/null and b/ai_usage_screenshots/2205302010340_4.png differ diff --git a/ai_usage_screenshots/2205302010340_5.png b/ai_usage_screenshots/2205302010340_5.png new file mode 100644 index 0000000..4febd04 Binary files /dev/null and b/ai_usage_screenshots/2205302010340_5.png differ diff --git a/ai_usage_screenshots/2205302010340_6.png b/ai_usage_screenshots/2205302010340_6.png new file mode 100644 index 0000000..4172209 Binary files /dev/null and b/ai_usage_screenshots/2205302010340_6.png differ diff --git a/ai_usage_screenshots/2205302010340_7.png b/ai_usage_screenshots/2205302010340_7.png new file mode 100644 index 0000000..4d5c05a Binary files /dev/null and b/ai_usage_screenshots/2205302010340_7.png differ diff --git a/ai_usage_screenshots/2205302010340_8.png b/ai_usage_screenshots/2205302010340_8.png new file mode 100644 index 0000000..e41631c Binary files /dev/null and b/ai_usage_screenshots/2205302010340_8.png differ diff --git a/ai_usage_screenshots/2205302020304_1.png b/ai_usage_screenshots/2205302020304_1.png new file mode 100644 index 0000000..118d570 Binary files /dev/null and b/ai_usage_screenshots/2205302020304_1.png differ diff --git a/ai_usage_screenshots/2205302020304_2.png b/ai_usage_screenshots/2205302020304_2.png new file mode 100644 index 0000000..3871b8c Binary files /dev/null and b/ai_usage_screenshots/2205302020304_2.png differ diff --git a/ai_usage_screenshots/2205308060316_1.png b/ai_usage_screenshots/2205308060316_1.png new file mode 100644 index 0000000..081f46d Binary files /dev/null and b/ai_usage_screenshots/2205308060316_1.png differ diff --git a/ai_usage_screenshots/2205308060316_10.png b/ai_usage_screenshots/2205308060316_10.png new file mode 100644 index 0000000..0ed058c Binary files /dev/null and b/ai_usage_screenshots/2205308060316_10.png differ diff --git a/ai_usage_screenshots/2205308060316_11.png b/ai_usage_screenshots/2205308060316_11.png new file mode 100644 index 0000000..c7a3e48 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_11.png differ diff --git a/ai_usage_screenshots/2205308060316_12.png b/ai_usage_screenshots/2205308060316_12.png new file mode 100644 index 0000000..c6b00c1 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_12.png differ diff --git a/ai_usage_screenshots/2205308060316_13.png b/ai_usage_screenshots/2205308060316_13.png new file mode 100644 index 0000000..8fce853 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_13.png differ diff --git a/ai_usage_screenshots/2205308060316_2.png b/ai_usage_screenshots/2205308060316_2.png new file mode 100644 index 0000000..cd694e5 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_2.png differ diff --git a/ai_usage_screenshots/2205308060316_3.png b/ai_usage_screenshots/2205308060316_3.png new file mode 100644 index 0000000..683ace8 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_3.png differ diff --git a/ai_usage_screenshots/2205308060316_4.png b/ai_usage_screenshots/2205308060316_4.png new file mode 100644 index 0000000..99f6949 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_4.png differ diff --git a/ai_usage_screenshots/2205308060316_5.png b/ai_usage_screenshots/2205308060316_5.png new file mode 100644 index 0000000..d8ceb33 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_5.png differ diff --git a/ai_usage_screenshots/2205308060316_6.png b/ai_usage_screenshots/2205308060316_6.png new file mode 100644 index 0000000..e436ffb Binary files /dev/null and b/ai_usage_screenshots/2205308060316_6.png differ diff --git a/ai_usage_screenshots/2205308060316_7.png b/ai_usage_screenshots/2205308060316_7.png new file mode 100644 index 0000000..e77346b Binary files /dev/null and b/ai_usage_screenshots/2205308060316_7.png differ diff --git a/ai_usage_screenshots/2205308060316_8.png b/ai_usage_screenshots/2205308060316_8.png new file mode 100644 index 0000000..5159459 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_8.png differ diff --git a/ai_usage_screenshots/2205308060316_9.png b/ai_usage_screenshots/2205308060316_9.png new file mode 100644 index 0000000..c513574 Binary files /dev/null and b/ai_usage_screenshots/2205308060316_9.png differ diff --git a/ai_usage_screenshots/2205308060332_1.png b/ai_usage_screenshots/2205308060332_1.png new file mode 100644 index 0000000..44c1041 Binary files /dev/null and b/ai_usage_screenshots/2205308060332_1.png differ diff --git a/ai_usage_screenshots/2205308060332_2.png b/ai_usage_screenshots/2205308060332_2.png new file mode 100644 index 0000000..614f458 Binary files /dev/null and b/ai_usage_screenshots/2205308060332_2.png differ diff --git a/ai_usage_screenshots/2205308060352_1.png b/ai_usage_screenshots/2205308060352_1.png new file mode 100644 index 0000000..6e14bdb Binary files /dev/null and b/ai_usage_screenshots/2205308060352_1.png differ diff --git a/ai_usage_screenshots/2205308060352_2.png b/ai_usage_screenshots/2205308060352_2.png new file mode 100644 index 0000000..82c5c69 Binary files /dev/null and b/ai_usage_screenshots/2205308060352_2.png differ diff --git a/ai_usage_screenshots/2205308060352_3.png b/ai_usage_screenshots/2205308060352_3.png new file mode 100644 index 0000000..7c8bec9 Binary files /dev/null and b/ai_usage_screenshots/2205308060352_3.png differ diff --git a/ai_usage_screenshots/2205308060352_4.png b/ai_usage_screenshots/2205308060352_4.png new file mode 100644 index 0000000..ea0a127 Binary files /dev/null and b/ai_usage_screenshots/2205308060352_4.png differ diff --git a/ai_usage_screenshots/2205308060352_5.png b/ai_usage_screenshots/2205308060352_5.png new file mode 100644 index 0000000..b79d086 Binary files /dev/null and b/ai_usage_screenshots/2205308060352_5.png differ diff --git a/ai_usage_screenshots/2205308060352_6.png b/ai_usage_screenshots/2205308060352_6.png new file mode 100644 index 0000000..c6e638f Binary files /dev/null and b/ai_usage_screenshots/2205308060352_6.png differ diff --git a/ai_usage_screenshots/ai_usage_screenshots/2205308060332_1.png b/ai_usage_screenshots/ai_usage_screenshots/2205308060332_1.png new file mode 100644 index 0000000..44c1041 Binary files /dev/null and b/ai_usage_screenshots/ai_usage_screenshots/2205308060332_1.png differ diff --git a/ai_usage_screenshots/ai_usage_screenshots/2205308060332_2.png b/ai_usage_screenshots/ai_usage_screenshots/2205308060332_2.png new file mode 100644 index 0000000..614f458 Binary files /dev/null and b/ai_usage_screenshots/ai_usage_screenshots/2205308060332_2.png differ diff --git a/images/weronghua/image.png b/images/weronghua/image.png new file mode 100644 index 0000000..dd6b2e2 Binary files /dev/null and b/images/weronghua/image.png differ diff --git "a/images/weronghua/\345\233\276\347\211\2071.png" "b/images/weronghua/\345\233\276\347\211\2071.png" new file mode 100644 index 0000000..4d111fe Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2071.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\20710.png" "b/images/weronghua/\345\233\276\347\211\20710.png" new file mode 100644 index 0000000..05cdc1f Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\20710.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\20711.png" "b/images/weronghua/\345\233\276\347\211\20711.png" new file mode 100644 index 0000000..be89eb5 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\20711.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\20712.png" "b/images/weronghua/\345\233\276\347\211\20712.png" new file mode 100644 index 0000000..672d0be Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\20712.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2072.png" "b/images/weronghua/\345\233\276\347\211\2072.png" new file mode 100644 index 0000000..2010c20 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2072.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2073.png" "b/images/weronghua/\345\233\276\347\211\2073.png" new file mode 100644 index 0000000..cee0beb Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2073.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2074.png" "b/images/weronghua/\345\233\276\347\211\2074.png" new file mode 100644 index 0000000..3b0a065 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2074.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2075.png" "b/images/weronghua/\345\233\276\347\211\2075.png" new file mode 100644 index 0000000..46c3b54 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2075.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2076.png" "b/images/weronghua/\345\233\276\347\211\2076.png" new file mode 100644 index 0000000..1b42954 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2076.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2077.png" "b/images/weronghua/\345\233\276\347\211\2077.png" new file mode 100644 index 0000000..04fa0ea Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2077.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2078.png" "b/images/weronghua/\345\233\276\347\211\2078.png" new file mode 100644 index 0000000..5eaa490 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2078.png" differ diff --git "a/images/weronghua/\345\233\276\347\211\2079.png" "b/images/weronghua/\345\233\276\347\211\2079.png" new file mode 100644 index 0000000..4145ae2 Binary files /dev/null and "b/images/weronghua/\345\233\276\347\211\2079.png" differ diff --git a/images/wx/pic0_1.png b/images/wx/pic0_1.png new file mode 100644 index 0000000..06d7b50 Binary files /dev/null and b/images/wx/pic0_1.png differ diff --git a/images/wx/pic0_2.png b/images/wx/pic0_2.png new file mode 100644 index 0000000..738f988 Binary files /dev/null and b/images/wx/pic0_2.png differ diff --git a/images/wx/pic0_3.png b/images/wx/pic0_3.png new file mode 100644 index 0000000..5361f41 Binary files /dev/null and b/images/wx/pic0_3.png differ diff --git a/images/wx/pic0_4.png b/images/wx/pic0_4.png new file mode 100644 index 0000000..b00ed28 Binary files /dev/null and b/images/wx/pic0_4.png differ diff --git a/images/wx/pic2_1.png b/images/wx/pic2_1.png new file mode 100644 index 0000000..2ef6005 Binary files /dev/null and b/images/wx/pic2_1.png differ diff --git a/images/wx/pic2_2.png b/images/wx/pic2_2.png new file mode 100644 index 0000000..7845813 Binary files /dev/null and b/images/wx/pic2_2.png differ diff --git a/images/wx/pic2_3.png b/images/wx/pic2_3.png new file mode 100644 index 0000000..912bff2 Binary files /dev/null and b/images/wx/pic2_3.png differ diff --git a/images/wx/pic3_1.png b/images/wx/pic3_1.png new file mode 100644 index 0000000..1ac5b20 Binary files /dev/null and b/images/wx/pic3_1.png differ diff --git a/images/wx/pic3_2.png b/images/wx/pic3_2.png new file mode 100644 index 0000000..bd907d6 Binary files /dev/null and b/images/wx/pic3_2.png differ diff --git a/images/wx/pic3_3.png b/images/wx/pic3_3.png new file mode 100644 index 0000000..d4b9830 Binary files /dev/null and b/images/wx/pic3_3.png differ diff --git a/images/wx/pic3_4.png b/images/wx/pic3_4.png new file mode 100644 index 0000000..636b1eb Binary files /dev/null and b/images/wx/pic3_4.png differ diff --git a/images/wx/pic_1.png b/images/wx/pic_1.png new file mode 100644 index 0000000..ca229a7 Binary files /dev/null and b/images/wx/pic_1.png differ diff --git a/images/wx/pic_2.png b/images/wx/pic_2.png new file mode 100644 index 0000000..a673f24 Binary files /dev/null and b/images/wx/pic_2.png differ diff --git a/images/wx/pic_3.png b/images/wx/pic_3.png new file mode 100644 index 0000000..01e3890 Binary files /dev/null and b/images/wx/pic_3.png differ diff --git a/images/wx/pic_4.png b/images/wx/pic_4.png new file mode 100644 index 0000000..01c4798 Binary files /dev/null and b/images/wx/pic_4.png differ diff --git a/images/wx/pic_5.png b/images/wx/pic_5.png new file mode 100644 index 0000000..b1ed24f Binary files /dev/null and b/images/wx/pic_5.png differ diff --git a/images/wx/pic_6.png b/images/wx/pic_6.png new file mode 100644 index 0000000..4e51c5a Binary files /dev/null and b/images/wx/pic_6.png differ diff --git a/modification_log.md b/modification_log.md new file mode 100644 index 0000000..704e497 --- /dev/null +++ b/modification_log.md @@ -0,0 +1,65 @@ +# AI 修改记录 +## 覃美静AI修改记录 +截图 +![覃美静](ai_usage_screenshots/2205302010340_1.png) +![覃美静](ai_usage_screenshots/2205302010340_2.png) +![覃美静](ai_usage_screenshots/2205302010340_3.png) +![覃美静](ai_usage_screenshots/2205302010340_4.png) +![覃美静](ai_usage_screenshots/2205302010340_5.png) +![覃美静](ai_usage_screenshots/2205302010340_6.png) +![覃美静](ai_usage_screenshots/2205302010340_7.png) +![覃美静](ai_usage_screenshots/2205302010340_8.png) + + + +## 李贵成AI修改记录 +截图 +![李贵成](ai_usage_screenshots/2205308060352_1.png) +![李贵成](ai_usage_screenshots/2205308060352_2.png) +![李贵成](ai_usage_screenshots/2205308060352_3.png) +![李贵成](ai_usage_screenshots/2205308060352_4.png) +![李贵成](ai_usage_screenshots/2205308060352_5.png) +![李贵成](ai_usage_screenshots/2205308060352_6.png) + + + +## 蔡昀甫AI修改记录 +截图 +![蔡昀甫](ai_usage_screenshots/2205302020304_1.png) +![蔡昀甫](ai_usage_screenshots/2205302020304_2.png) + + +## 文晓AI修改记录 +截图 +![蔡昀甫](ai_usage_screenshots/2205308060332_1.png) +![蔡昀甫](ai_usage_screenshots/2205308060332_2.png) + +参考资源 +* git基本语法 +https://www.bilibili.com/video/BV1s3411g7PS/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=35bbaf0bd4df4722af9716be3a7d478c； +* 如何合并分支 +https://www.bilibili.com/video/BV1d541147pR/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=35bbaf0bd4df4722af9716be3a7d478c； +* MarkDown基本语法 +https://www.bilibili.com/video/BV1eJ4m157kC/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=35bbaf0bd4df4722af9716be3a7d478c； + +## 韦荣华AI修改记录 +截图 +![韦荣华](ai_usage_screenshots/2205308060316_1.png) +![韦荣华](ai_usage_screenshots/2205308060316_2.png) +![韦荣华](ai_usage_screenshots/2205308060316_3.png) +![韦荣华](ai_usage_screenshots/2205308060316_4.png) +![韦荣华](ai_usage_screenshots/2205308060316_5.png) +![韦荣华](ai_usage_screenshots/2205308060316_6.png) +![韦荣华](ai_usage_screenshots/2205308060316_7.png) +![韦荣华](ai_usage_screenshots/2205308060316_8.png) +![韦荣华](ai_usage_screenshots/2205308060316_9.png) +![韦荣华](ai_usage_screenshots/2205308060316_10.png) +![韦荣华](ai_usage_screenshots/2205308060316_11.png) +![韦荣华](ai_usage_screenshots/2205308060316_12.png) +![韦荣华](ai_usage_screenshots/2205308060316_13.png) + + +## 周英AI修改记录 +截图 +![周英](ai_usage_screenshots/2205302020315_1.png) +![周英](ai_usage_screenshots/2205302020315_2.png) diff --git a/terms.md b/terms.md new file mode 100644 index 0000000..d038591 --- /dev/null +++ b/terms.md @@ -0,0 +1,59 @@ +1.HTML (超文本标记语言) +作用：用于创建网页内容的结构和标记。 + +2.CSS (层叠样式表) +作用：用于设置网页的视觉样式和布局。 + +3.JavaScript +作用：一种编程语言，用于实现网页的动态行为和交互。 + +4.jQuery +作用：一个快速、小巧且功能丰富的JavaScript库，简化了HTML文档操作、事件处理、动画和Ajax交互。 + +5.SVG (可缩放矢量图形) +作用：一种基于XML的标记语言，用于描述二维矢量图形。 + +6.Slides Framework +作用：一个静态网站构建器，用于创建响应式和动画丰富的网站。 + +7.Font (字体) +作用：用于定义网页中使用的字体样式。 + +8.Icon (图标) +作用：用于在网页中显示小图形符号，通常用于导航和功能指示。 + +9.Navigation (导航) +作用：用于在网站中引导用户从一个页面跳转到另一个页面。 + +10.Sidebar (侧边栏) +作用：通常位于页面的一侧，用于显示额外的信息或导航链接。 + +11.Slide (幻灯片) +作用：在单页网站中，每个幻灯片代表一个页面或页面的一部分。 + +12.Popup Video (弹出视频) +作用：在用户与页面交互时弹出的视频窗口，用于展示视频内容。 + +13.Progress Bar (进度条) +作用：显示任务的完成进度，通常用于加载或提交过程中。 + +14.Button (按钮) +作用：用户可以点击的界面元素，用于触发特定的动作或事件。 + +15.Embed Video (嵌入视频) +作用：将外部视频嵌入到网页中，用户可以直接在网页上观看视频。 + +16.Panel (面板) +作用：用于组织和展示内容的容器，通常包含标题和内容区域。 + +17.Link (链接) +作用：用于在网页中创建超链接，连接到其他页面或资源。 + +18.Image (图像) +作用：用于在网页中显示图片。 + +19.Form (表单) +作用：用于收集用户输入的数据，如文本输入、密码输入等。 + +20.Content (内容) + 作用：网页上展示的主要信息或数据。 \ No newline at end of file