html5學(xué)生dw網(wǎng)頁設(shè)計(jì)大作業(yè)，hbuilder仿茅臺(tái)集團(tuán)網(wǎng)頁設(shè)計(jì)模板

茅臺(tái)集網(wǎng)頁設(shè)計(jì)要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計(jì)。

網(wǎng)頁有搜素框導(dǎo)航欄 js圖片輪播；

網(wǎng)頁由網(wǎng)站首頁，公司簡介，公司發(fā)展歷程，最新新聞動(dòng)態(tài)組成；

具體效果圖展示：

egMark是具有現(xiàn)代設(shè)計(jì)和最新Bootstrap版本的數(shù)字市場HTML模板。憑借優(yōu)秀的設(shè)計(jì)很容易創(chuàng)建虛擬商品交易網(wǎng)站，比如圖片素材在線交易，視頻文件交易，代碼交易等虛擬商品交易。

主要特色

Bootstrapv5
移動(dòng)響應(yīng)
FontAwesome圖標(biāo)
jQuery增強(qiáng)
簡單的色彩管理
干凈而獨(dú)特的設(shè)計(jì)
標(biāo)準(zhǔn)代碼
完整的瀏覽器兼容性
Ipad 和 Iphone 友好

數(shù)字交易市場圖片素材下載虛擬交易代碼下載設(shè)計(jì)素材

Bootstrap版本的數(shù)字市場HTML模板（共196個(gè)文件）

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

家好，很高興又見面了，我是"高級(jí)前端進(jìn)階"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!

什么是 JSX-Email

JSX-Email 是 React-email 的一個(gè)分支！React-email包含一系列高質(zhì)量、無樣式的組件，用于使用 React 和 TypeScript 創(chuàng)建精美的電子郵件。減少了通過暗模式支持編寫響應(yīng)式電子郵件的痛苦，同時(shí)解決了 Gmail、Outlook 和其他電子郵件客戶端之間的不一致問題。

JSX-Email 提供了一組 React 組件和工具函數(shù)，用于構(gòu)建令人愉快且響應(yīng)迅速的電子郵件模板，與現(xiàn)代電子郵件客戶端兼容。

這些組件可以處理繁重的兼容性和客戶端不一致問題，因此設(shè)計(jì)人員和開發(fā)人員可以專注于構(gòu)建有影響力和吸引力的模板。該項(xiàng)目的目標(biāo)是更加注重開發(fā)人員體驗(yàn)、維護(hù)、快速改進(jìn)和快速發(fā)布。因此，jsx-email 比 React-email 有許多改進(jìn)和優(yōu)勢。其中包括：

電子郵件客戶端兼容性檢查
Tailwind 支持
支持組件內(nèi)的 <Suspense> 和異步
Exclusive Components
增強(qiáng)的開發(fā)人員體驗(yàn) (DX)
更好的命令行工具
與 Monorepos 開箱即用, 無需詳盡的設(shè)置。
更簡單、更流暢的預(yù)覽服務(wù)器
更快的改進(jìn)、功能開發(fā)和發(fā)布
社區(qū)驅(qū)動(dòng)的維護(hù)而不是公司規(guī)劃優(yōu)先
工具沒有供應(yīng)商鎖定, jsx-email 僅使用通用組件和工具

使用 JSX-Email 構(gòu)建和渲染的電子郵件可以與任何提供用于以字符串形式發(fā)送電子郵件的 API 的電子郵件提供商一起使用，包括： AWS SES、Loops、Nodemailer、Postmark、Resend、Plunk 和 SendGrid 等等。

目前，JSX-Email 在 Github 通過 MIT 協(xié)議開源，是一個(gè)值得關(guān)注的前端開源項(xiàng)目。

如何使用 JSX-Email

首先需要安裝相應(yīng)依賴：

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

接著可以在項(xiàng)目中導(dǎo)入組件庫：

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 或一個(gè)對象，則將目標(biāo)電子郵件渲染為純文本
  // 如果需要修改目標(biāo)渲染為純文本的方式，則應(yīng)使用表示 html 到文本選項(xiàng)的對象
  plainText?: boolean | PlainTextOptions;
  pretty?: boolean;
  //  美化每封目標(biāo)電子郵件的 HTML 輸出
  strip?: boolean;
  // 從每個(gè)目標(biāo)電子郵件的輸出中去除 data-id 屬性
}

下面是一個(gè) JSX 電子郵件組件，設(shè)置錨元素的樣式以顯示為按鈕：

import {Button} from 'jsx-email';

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

下面是一個(gè) JSX 電子郵件組件，為配色方案支持提供元和樣式基礎(chǔ)：

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

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

此時(shí)將輸出如下的 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>

下面示例是一個(gè) JSX 電子郵件組件，可以使用 Tailwind 風(fēng)格 CSS 來設(shè)置電子郵件樣式：

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>
  );
};

當(dāng)然，更強(qiáng)的是用戶還可以使用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>
  );
};

本文總結(jié)

本文主要和大家介紹 JSX-Email ，其提供了一組 React 組件和工具函數(shù)，用于構(gòu)建令人愉快且響應(yīng)迅速的電子郵件模板，與現(xiàn)代電子郵件客戶端兼容。因?yàn)槠鶈栴}，關(guān)于 JSX-Email 只是做了一個(gè)簡短的介紹，但是文末的參考資料提供了大量優(yōu)秀文檔以供學(xué)習(xí)，如果有興趣可以自行閱讀。如果大家有什么疑問歡迎在評(píng)論區(qū)留言。

參考資料

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網(wǎng)頁下載為單文件，可離線訪問
下一篇：簡單小程序：登錄頁面（html）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。