欢迎来到泰骏兴电子，大家有问题可以直接联系管理员QQ：233619809单片机 QQ群:59194556 各位游客也可以注册玩玩，享受更多权益。温馨提示：本网站仅提供平台学习以及渠道，一切后果自行承担，还望广大用户提高自我意识，请不要轻易相信他人，请不要轻易相信他人，请不要轻易相信他人。为了更好的管理论坛工作，所以现在使用邮箱注册，如果以前的邮箱不能修改的，请联系管理员代为修改
收藏本站

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
泰骏兴电子»论坛 › 编程语言 › HTML网页 › 一个好看的页面
返回列表 发新帖
查看: 116|回复: 0

一个好看的页面

[复制链接]
发表于 2023-5-12 13:59:09 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
效果如图：



根据自己的需求修改



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>我的页面</title>
  5.         <style>
  6.                 body {
  7.                         font-family: Arial, sans-serif;
  8.                         background-color: #f2f2f2;
  9.                         margin: 0;
  10.                         padding: 0;
  11.                 }

  13.                 .header {
  14.                         background-color: #003366;
  15.                         color: #ffffff;
  16.                         text-align: center;
  17.                         padding: 20px;
  18.                         font-size: 24px;
  19.                 }

  21.                 .container {
  22.                         width: 80%;
  23.                         margin: 0 auto;
  24.                         padding: 40px 20px;
  25.                         background-color: #ffffff;
  26.                         box-shadow: 0 0 10px rgba(0,0,0,0.3);
  27.                 }

  29.                 .main {
  30.                         display: flex;
  31.                         flex-wrap: wrap;
  32.                         justify-content: space-between;
  33.                         margin-top: 40px;
  34.                 }

  36.                 .card {
  37.                         flex-basis: 30%;
  38.                         margin-bottom: 20px;
  39.                         border-radius: 5px;
  40.                         background-color: #f2f2f2;
  41.                         box-shadow: 0 0 5px rgba(0,0,0,0.1);
  42.                         transition: all 0.3s ease-in-out;
  43.                 }

  45.                 .card:hover {
  46.                         box-shadow: 0 0 10px rgba(0,0,0,0.3);
  47.                         transform: translateY(-5px);
  48.                 }

  50.                 .card img {
  51.                         width: 100%;
  52.                         border-radius: 5px 5px 0 0;
  53.                 }

  55.                 .card h3 {
  56.                         font-size: 20px;
  57.                         margin: 0;
  58.                         padding: 10px;
  59.                 }

  61.                 .card p {
  62.                         font-size: 16px;
  63.                         margin-bottom: 10px;
  64.                         padding: 0 10px;
  65.                 }

  67.                 .button {
  68.                         display: block;
  69.                         padding: 10px 20px;
  70.                         background-color: #003366;
  71.                         color: #ffffff;
  72.                         border-radius: 5px;
  73.                         text-align: center;
  74.                         text-decoration: none;
  75.                         transition: all 0.3s ease-in-out;
  76.                 }

  78.                 .button:hover {
  79.                         background-color: #0059b3;
  80.                         transform: translateX(5px);
  81.                 }

  83.                 .footer {
  84.                         background-color: #003366;
  85.                         color: #ffffff;
  86.                         text-align: center;
  87.                         padding: 20px;
  88.                         font-size: 14px;
  89.                 }
  90.         </style>
  91. </head>
  92. <body>
  93.         <header class="header">
  94.                 <h1>我的页面</h1>
  95.         </header>
  96.         <div class="container">
  97.                 <div class="main">
  98.                         <div class="card">
  99.                                 <img src="https://via.placeholder.com/300x200" alt="图片">
  100.                                 <h3>卡片标题</h3>
  101.                                 <p>这是一段描述性文本，用于描述卡片内容</p>
  102.                                 <a href="#" class="button">查看详情</a>
  103.                         </div>
  104.                         <div class="card">
  105.                                 <img src="https://via.placeholder.com/300x200" alt="图片">
  106.                                 <h3>卡片标题</h3>
  107.                                 <p>这是一段描述性文本，用于描述卡片内容</p>
  108.                                 <a href="#" class="button">查看详情</a>
  109.                         </div>
  110.                         <div class="card">
  111.                                 <img src="https://via.placeholder.com/300x200" alt="图片">
  112.                                 <h3>卡片标题</h3>
  113.                                 <p>这是一段描述性文本，用于描述卡片内容</p>
  114.                                 <a href="#" class="button">查看详情</a>
  115.                         </div>
  116.                 </div>
  117.         </div>
  118.         <footer class="footer">
  119.                 <p>&copy; 2021 我的页面</p>
  120.         </footer>
  121. </body>
  122. </html>
复制代码




回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|泰骏兴电子科技有限公司 ( 粤ICP备2023060260号-1 ) 单片机爱好者

GMT+8, 2026-4-11 05:21

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表