html5学生dw网页设计大作业，hbuilder仿茅台集团网页设计模板

茅台集网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计。

网页有搜素框导航栏 js图片轮播；

网页由网站首页，公司简介，公司发展历程，最新新闻动态组成；

具体效果图展示：

egMark是具有现代设计和最新Bootstrap版本的数字市场HTML模板。凭借优秀的设计很容易创建虚拟商品交易网站，比如图片素材在线交易，视频文件交易，代码交易等虚拟商品交易。

主要特色

Bootstrapv5
移动响应
FontAwesome图标
jQuery增强
简单的色彩管理
干净而独特的设计
标准代码
完整的浏览器兼容性
Ipad 和 Iphone 友好

数字交易市场图片素材下载虚拟交易代码下载设计素材

Bootstrap版本的数字市场HTML模板（共196个文件）

assets
about.html
author.html
blog-detail.html
blog.html
cart.html
checkout.html
contact.html
error.html
faq.html
index-2.html
index-3.html
index.html
login.html
privacy.html
product-detail.html
products.html
profile.html
signup.html
terms.html
thankyou.html

家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

什么是 JSX-Email

JSX-Email 是 React-email 的一个分支！React-email包含一系列高质量、无样式的组件，用于使用 React 和 TypeScript 创建精美的电子邮件。减少了通过暗模式支持编写响应式电子邮件的痛苦，同时解决了 Gmail、Outlook 和其他电子邮件客户端之间的不一致问题。

JSX-Email 提供了一组 React 组件和工具函数，用于构建令人愉快且响应迅速的电子邮件模板，与现代电子邮件客户端兼容。

这些组件可以处理繁重的兼容性和客户端不一致问题，因此设计人员和开发人员可以专注于构建有影响力和吸引力的模板。该项目的目标是更加注重开发人员体验、维护、快速改进和快速发布。因此，jsx-email 比 React-email 有许多改进和优势。其中包括：

电子邮件客户端兼容性检查
Tailwind 支持
支持组件内的 <Suspense> 和异步
Exclusive Components
增强的开发人员体验 (DX)
更好的命令行工具
与 Monorepos 开箱即用, 无需详尽的设置。
更简单、更流畅的预览服务器
更快的改进、功能开发和发布
社区驱动的维护而不是公司规划优先
工具没有供应商锁定, jsx-email 仅使用通用组件和工具

使用 JSX-Email 构建和渲染的电子邮件可以与任何提供用于以字符串形式发送电子邮件的 API 的电子邮件提供商一起使用，包括： AWS SES、Loops、Nodemailer、Postmark、Resend、Plunk 和 SendGrid 等等。

目前，JSX-Email 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

如何使用 JSX-Email

首先需要安装相应依赖：

npm add jsx-email
yarn add jsx-email
pnpm add jsx-email
bun add jsx-email

接着可以在项目中导入组件库：

import {render} from 'jsx-email';

import {BatmanTemplate} from './emails/Batman';

const html = await render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

可用的配置包括：

export interface Options {
  minify?: boolean;
  // 压缩渲染模板的 HTML，如果为 true 或一个对象，则将目标电子邮件渲染为纯文本
  // 如果需要修改目标渲染为纯文本的方式，则应使用表示 html 到文本选项的对象
  plainText?: boolean | PlainTextOptions;
  pretty?: boolean;
  //  美化每封目标电子邮件的 HTML 输出
  strip?: boolean;
  // 从每个目标电子邮件的输出中去除 data-id 属性
}

下面是一个 JSX 电子邮件组件，设置锚元素的样式以显示为按钮：

import {Button} from 'jsx-email';

const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px'}}>
      Click me
    </Button>
  );
};

下面是一个 JSX 电子邮件组件，为配色方案支持提供元和样式基础：

import {Body, ColorScheme, Head, Html} from 'jsx-email';

const Email = () => {
  return (
    <Html>
      <Head>
        <ColorScheme mode="light only" />
      </Head>
      <Body></Body>
    </Html>
  );
};

此时将输出如下的 HTML：

<html>
  <head>
    <meta name="color-scheme" content="light only" />
    <meta name="supported-color-schemes" content="light only" />
    <style>
      :root {
        color-scheme: light only;
        supported-color-schemes: light only;
      }
    </style>
  </head>
  <body></body>
</html>

下面示例是一个 JSX 电子邮件组件，可以使用 Tailwind 风格 CSS 来设置电子邮件样式：

import { Button, Tailwind } from 'jsx-email';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291'
            }
          }
        }
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

当然，更强的是用户还可以使用markdown语法：

import { Html, Markdown } from 'jsx-email';

const Email = () => {
  return (
    <Html lang="en" dir="ltr">
      <Markdown
        markdownCustomStyles={{
          h1: { color: 'red' },
          h2: { color: 'blue' },
          codeInline: { background: 'grey' }
        }}
        markdownContainerStyles={{
          padding: '12px',
          border: 'solid 1px black'
        }}
      >{`# Hello, World!`}</Markdown>
      {/* OR */}
      <Markdown children={`# This is a ~~strikethrough~~`} />
    </Html>
  );
};

本文总结

本文主要和大家介绍 JSX-Email ，其提供了一组 React 组件和工具函数，用于构建令人愉快且响应迅速的电子邮件模板，与现代电子邮件客户端兼容。因为篇幅问题，关于 JSX-Email 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/shellscape/jsx-email

https://github.com/resend/react-email

https://www.youtube.com/watch?app=desktop&v=I4DKr1JLC50

https://react.email/

https://jsx.email/docs/components/markdown

在线咨询

上一篇：把HTML网页下载为单文件，可离线访问
下一篇：简单小程序：登录页面（html）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。