闲来无事,写几个好看的产品宣传界面,希望您喜欢

闲来无事,再写几个产品宣传页

宣传页面一:

源码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品推广海报</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
      color: #333;
    }

    header {
      background-color: #007BFF;
      color: #fff;
      text-align: center;
      padding: 20px;
    }

    section {
      max-width: 800px;
      margin: 20px auto;
      padding: 30px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #007BFF;
    }

    p {
      line-height: 1.6;
    }

    .product-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .cta-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007BFF;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    .cta-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>


  <section>
    <img class="product-image" src="https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=6070&resolution=800w380h" alt="产品图片">

    <h2>产品特点</h2>
    <ul>
      <li>高品质材料</li>
      <li>创新设计</li>
      <li>性能卓越</li>
    </ul>

    <h2>优惠详情</h2>
    <p>现在购买,可享受额外5%折扣!</p>

    <a class="cta-button" href="https://example.com/buy-now" target="_blank">立即购买</a>
  </section>

</body>
</html>

效果

宣传界面二:

源码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品推广海报</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #004080;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    section {
      text-align: center;
      background-color: #fff;
      border-radius: 8px;
      padding: 40px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    h1 {
      color: #004080;
    }

    p {
      line-height: 1.6;
      color: #333;
    }

    .product-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 20px 0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    ul {
      list-style-type: none;
      padding: 0;
      color: #004080; /* 修改列表颜色 */
    }

    li {
      margin-bottom: 8px;
    }

    .cta-button {
      display: inline-block;
      padding: 15px 30px;
      background-color: #004080;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s ease;
      display: inline-block;
      border: 2px solid #004080;
    }

    .cta-button:hover {
      background-color: #00264d;
      border-color: #00264d;
    }
  </style>
</head>
<body>

  <section>
    <h1>热销产品推广</h1>
    <img class="product-image" src="https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=6070&resolution=800w380h" alt="产品图片">

    <h2>产品特点</h2>
    <ul>
      <li>高品质材料</li>
      <li>创新设计</li>
      <li>性能卓越</li>
    </ul>

    <h2>优惠详情</h2>
    <p>现在购买,可享受额外5%折扣!</p>

    <a class="cta-button" href="https://example.com/buy-now" target="_blank">立即购买</a>
  </section>

</body>
</html>

效果

宣传界面三:

源码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品推广海报</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
      color: #333;
      display: flex;
      min-height: 100vh;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .left-section,
    .right-section {
      flex: 1;
      text-align: center;
      padding: 40px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .left-section {
      background-color: #FF7F50;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .left-section h1 {
      margin-bottom: 20px;
    }

    .left-section p {
      line-height: 1.6;
      color: #eee;
    }

    .cta-button {
      margin-top: 20px;
      padding: 15px 30px;
      background-color: #FF6347;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s ease;
      border: 2px solid #FF6347;
    }

    .cta-button:hover {
      background-color: #FF4500;
      border-color: #FF4500;
    }

    .right-section {
      background-color: #fff;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    h1,
    p {
      color: #333;
    }

    .product-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 20px 0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    ul {
      list-style-type: none;
      padding: 0;
      color: #333;
    }

    li {
      margin-bottom: 8px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="left-section">
      <h1>热销产品推广</h1>
      <p>限时优惠,快来抢购!</p>
      <a class="cta-button" href="https://example.com/buy-now" target="_blank">立即购买</a>
    </div>

    <div class="right-section">
      <img class="product-image" src="https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=6070&resolution=800w380h" alt="产品图片">
      <h2>产品特点</h2>
      <ul>
        <li>高品质材料</li>
        <li>创新设计</li>
        <li>性能卓越</li>
      </ul>
      <h2>优惠详情</h2>
      <p>现在购买,可享受额外5%折扣!</p>
    </div>
  </div>

</body>
</html>

效果

"Remember, Red, hope is a good thing, maybe the best of things, and no good thing ever dies." - "记住,瑞德,希望是一种美好的东西,或许是最好的东西,而且没有任何好事会消逝。"------《肖申克的救赎》

相关推荐
李鸿耀6 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈26 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan3 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php