当前位置: 首页 > news >正文

HTML+CSS+JS网页设计与制作摄影类个人网页

 

可以使用网页三剑客html+css+js实现网页设计与制作,页面排版布局高端大气。

使用HTML+CSS页面布局设计,HTML+CSS+JS网页设计与制作摄影类个人网页,这是一个优质的个人网页制作。

凭借简约的设计风格、精湛的制作工艺,突破与创新的理念。

个人网站、个人博客、个人介绍、摄影作品、图片画廊展示等个人网站的设计与制作。

网站介绍

1、网站程序:主要使用网页三剑客html+css+javaScript实现网页设计与制作,完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。

2、网站布局:主要采用浮动布局。兼容各大主流浏览器、显示效果稳定。

3、网站文件:网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件等。

4、网站素材:搜集或制作适合网页风格和尺寸的图片,追求优质视觉体验。

5、网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意编辑软件进行编辑修改等操作)。

6、网页效果预览:双击html文件或者拖拽html文件到浏览器打开,即可预览当前网页效果。

网站亮点

1、视觉设计:排版布局极简设计,优质的视觉体验等。

2、动效交互:幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能、英文断行等。

HTML+CSS+JS网页设计与制作摄影类个人网页

网站文件目录

(1)index.html:首页html;

(2)style:静态资源目录,存放css网页样式文件、js网页特效文件、images网页图片文件等;

其中:

(1)css文件夹:存放网页所有css样式表文件文件;

(2)images文件夹:存放网页所有图片资源文件;

(3)js文件夹:存放网页所有网页特效文件;

网站源码

<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>木番薯科技(公众号)</title><meta name="keywords" content="木番薯科技,公众号,极速建站,木番薯科技(公众号)极速建站,企业快速建站"><meta name="description" content="木番薯科技(公众号)极速建站,拥有5年中外知名企业建站经验"><link type="text/css" href="style/css/vender.css" rel="stylesheet"/><link type="text/css" href="style/css/app.css" rel="stylesheet"/><link type="text/css" href="style/css/others.css" rel="stylesheet"/><link href="style/css/font-awesome.min.css" rel="stylesheet" /><link href="style/css/editorPageStyle.css" rel="stylesheet" />
</head>
<div id="aEUOSHbQ" data-key="" data-window_width="true" data-limit_width="true" data-stick-parent="" class="layout_group" style="background-color: rgb(158, 215, 255);"><!----><div><section data-effect="fixed" data-size="contain" data-pos="cl" class="layout_bg layout_bg_pc" style="background-image: url(style/images/1660620034353.png);"><img src="style/images/1660620034353.png" style="opacity: 0;"><div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div></section><section data-effect="fixed" data-size="contain" data-pos="tl" class="layout_bg layout_bg_mo" style="background-image: url(style/images/1660631523882.png);"><img src="style/images/1660631523882.png" style="opacity: 0;"><div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div></section></div><section class="layout_limit_wrapper"><section class="layout_container"><section class="layout_body"><section id="PMvyFKDU" data-type-detail="custom" data-justify_center="left" data-mo_justify_center="center" data-align_center="top" class="layout"><div class="layout-margin_placeholder_top"></div><section data-animate="0" data-key="" data-col="100" data-stick-parent="" class="row"><section id="PWAtJZgj" class="col editor_wrapper col-100 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"><!----><section class="editor ck-content"><p><span class="text-84 font-family" style="font-size:84px;color:rgb(255,255,255);font-family:Poppins-Bold;">Fash&shy;ion</span></p><p><span class="text-20 font-family" style="font-size:20px;color:rgb(255,255,255);font-family:Poppins-Bold;">时尚街拍</span></p></section><!----><!----><!----></section><!----><!----></section><div class="layout-margin_placeholder_bottom"></div></section><section id="ewHRQytA" data-type-detail="custom" data-justify_center="right" data-mo_justify_center="center" data-align_center="top" class="layout"><div class="layout-margin_placeholder_top"></div><section data-animate="0" data-key="" data-col="100" data-stick-parent="" class="row"><section id="ptOYCsKM" class="col editor_wrapper col-100 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"><!----><section class="editor ck-content"><p><span class="font-family" style="color:rgb(255,255,255);font-family:Poppins-Regular;">Loremip&shy;sum do&shy;lor sit amet, con&shy;secte&shy;tur adip&shy;isc&shy;ing elit. Etmo&shy;lestie habi&shy;tant enim, dig&shy;nis&shy;sim et, con&shy;secte&shy;tur eges&shy;tasin. Dig&shy;nis&shy;sim viverra lec&shy;tus cras el&shy;e&shy;men&shy;tum.</span></p></section><!----><!----><!----></section><!----><!----></section><div class="layout-margin_placeholder_bottom"></div></section></section></section></section><!----></div>

相关文章:

HTML+CSS+JS网页设计与制作摄影类个人网页

可以使用网页三剑客htmlcssjs实现网页设计与制作&#xff0c;页面排版布局高端大气。 使用HTMLCSS页面布局设计&#xff0c;HTMLCSSJS网页设计与制作摄影类个人网页&#xff0c;这是一个优质的个人网页制作。 凭借简约的设计风格、精湛的制作工艺&#xff0c;突破与创新的理念…...

U-boot(五):启动内核

本文主要探讨210的uboot启动内核过程。 嵌入式系统状态启动 未上电时bootloader、kernel、rootfs以镜像形式存储在启动介质中(X210为iNand/SD卡),运行时搬运到DDR中 未上电时u-boot.bin,zImage,rootfs在SD卡中各自对应的分区中,启动时去对应分区寻找(分区表一…...

tp8 使用rabbitMQ(2)工作队列

代码的参数说明在 第一小节的代码中&#xff0c;如果需要可移步到第一节中查看 工作队列 工作队列&#xff08;又称&#xff1a;任务队列——Task Queues&#xff09;是为了避免等待一些占用大量资源、时间的操作。当我们把任务&#xff08;Task&#xff09;当作消息发送到队列…...

ZKP11.4 Use CI to instantiate Fiat-Shamir

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 11: From Practice to Theory (Guest Lecturer: Alex Lombardi) 11.4 Use CI to instantiate Fiat-Shamir Avoid Bad Challenges Def: Given false claim x x x and a first message α \alpha α, a challenge β \beta …...

华为云编译构建CodeArts Build常见问答汇总

1.【Build】公有云编译构建是否支持导入外部机器做执行机 答&#xff1a;参考链接&#xff1a;https://support.huaweicloud.com/usermanual-devcloud/devcloud_01_0017.html • 使用代理机功能&#xff0c;需要配备1台4U8G或以上规格、磁盘>80GB的主机。 • 安装代理的…...

009 OpenCV 二值化 threshold

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、二值化算法 2.1、概述 在机器视觉应用中&#xff0c;OpenCV的二值化函数threshold具有不可忽视的作用。主要的功能是将一幅灰度图进行二值化处理&#xff0c;以此大幅降低图像的数…...

基于python的NBA球员数据可视化分析的设计与实现

完整下载&#xff1a;基于python的NBA球员数据可视化分析的设计与实现.docx 基于python的NBA球员数据可视化分析的设计与实现 Design and Implementation of NBA Player Data Visualization Analysis based on Python 目录 目录 2 摘要 3 关键词 4 第一章 引言 4 1.1 研究背景 …...

《使用Python将Excel数据批量写入MongoDB数据库》

在数据分析及处理过程中&#xff0c;我们经常需要将数据写入数据库。而MongoDB作为一种NoSQL数据库&#xff0c;其具有强大的可扩展性、高性能以及支持复杂查询等特性&#xff0c;广泛用于大规模数据存储和分析。在这篇文章中&#xff0c;我们将使用Python编写一个将Excel数据批…...

leetcode_828_统计子串中的唯一字符

题意&#xff1a;所有子串中单个字符出现的次数和 问题转化&#xff1a;对于串中的每个字符&#xff0c;只包含其一次的所有子串的个数和 关于求只包含某位置字符一次的子串个数 class Solution { public:int uniqueLetterString(string s) {/* ...A...A...A...*/int n s.size…...

「Java开发中文指南」IntelliJ IDEA插件安装(一)

IntelliJ IDEA是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的Java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能是非常强大的。 插件扩展了Intel…...

单机多卡训练

参考几个不错的帖子&#xff08;还没来得及整理&#xff09;&#xff1a; 基于pytorch多GPU单机多卡训练实践_多卡训练效果不如单卡-CSDN博客 关于PyTorch单机多卡训练_能用torch.device()实现多卡训练吗-CSDN博客 Pytorch多机多卡分布式训练 - 知乎 (zhihu.com) 当代研究生…...

数据库基础教程之数据库的创建(一)

双击打开Navicat&#xff0c;点击&#xff1a;文件-》新建连接-》PostgreSQL 在下图新建连接中输入各参数&#xff0c;然后点击&#xff1a;连接测试&#xff0c;连接成功后再点击确定。 点击新建数据库 数据库设置如下&#xff1a;...

Python教程:DataFrame列数据类型的转换

Pandas提供了多种数据类型转换方法。可以使用astype()函数来转换数据类型。例如&#xff0c;可以将字符串类型的列转换为整数类型的列&#xff1a; # Author : 小红牛 # 微信公众号&#xff1a;wdPython import pandas as pd# 创建包含字符串类型列的DataFrame df pd.DataFra…...

4-Python与设计模式--抽象工厂模式

4-Python与设计模式–抽象工厂模式 一、快餐点餐系统 想必大家一定见过类似于麦当劳自助点餐台一类的点餐系统吧。在一个大的触摸显示屏上&#xff0c; 有三类可以选择的上餐品&#xff1a; 汉堡等主餐、小食、饮料。当我们选择好自己需要的食物&#xff0c;支付完成后&#…...

STM32 默认时钟更改 +debug调试

STM32时钟 文章目录 STM32时钟前言一、修改系统时钟二、DEBUG 前言 为什么我们要改STM32的时钟呢&#xff0c;打个比方在做SPI驱动的时候&#xff0c;需要16M的时钟&#xff0c;但是stm32默认是72的分频分不出来&#xff0c;这个时候我们就要改系统时钟了&#xff0c;那么怎么…...

转成String类型的几种方式

文章目录 1. String.valueOf()2. 包装类-toString()3. 使用字符串拼接4. 强制类型转换 (String) object5. 总结&#xff1a;6. 基本数据类型和包装类 1. String.valueOf() String.valueOf()&#xff1a;基本数据类型或包装类都可以通过 String.valueOf() 方法转为字符串表示形…...

Android BSP 开发之六

1.设定Android settings中某个xml文件&#xff08;包括其子项&#xff09;或者某个Preference不被搜索到 设定某个xml文件(包括子项)不被搜索到 找到该xml文件对应的fragment java文件中的SEARCH_INDEX_DATA_PROVIDER,在该provider中对isPageSearchEnabled方法进行重写并…...

mybatis的使用,mybatis的实现原理,mybatis的优缺点,MyBatis缓存,MyBatis运行的原理,MyBatis的编写方式

文章目录 MyBatis简介结构图Mybatis缓存&#xff08;一级缓存、二级缓存&#xff09;MyBatis是什么&#xff1f;mybatis的实现原理JDBC编程有哪些不足之处&#xff0c;MyBatis是如何解决这些问题的&#xff1f;Mybatis优缺点优点缺点映射关系 MyBatis的解析和运行原理MyBatis的…...

Effective Modern C++(1.顶层const与底层const)

1.顶层const与底层const的定义 const修饰的变量不可以改变&#xff0c;那么他就是顶层const&#xff0c;如&#xff1a; const int a 10; 那么&#xff0c;对于 const int *const p new int(10); 第二个const就是顶层const&#xff0c;因为他修饰的是p&#xff1b;第一个…...

mmsegmentation学习笔记

mmsegmentation教程 下载预训练权重 github–>mmsegmentation–>model zoo–>XXX model(如&#xff1a;PSPNet)–>找到预选连权重与config的前缀一致&#xff1a;pspnet_r50-d8_4xb2-40k_cityscapes-512x1024 &#xff08;model&#xff09; 了解配置文件 查看…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...