好看的html示例代码

最新推荐文章于 2024-04-18 10:29:50 发布

焦虑肇事者

最新推荐文章于 2024-04-18 10:29:50 发布

阅读量505

点赞数

文章标签： html css 前端 css3 javascript

本文链接：https://blog.csdn.net/weixin_35756624/article/details/129083766

版权

<p>好的，以下是一个美观的 HTML 示例代码：</p>
<p>```html
<!DOCTYPE html></p>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的网站</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      .header {
        background-color: lightblue;
        padding: 20px;
        text-align: center;
      }
      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: lightgrey;
        padding: 20px;
      }
      .nav a {
        text-decoration: none;
        color: black;
        font-size: 18px;
      }
      .nav a:hover {
        color: white;
      }
      .main {
        display: flex;
        flex-wrap: wrap;
        margin: 20px;
      }
      .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        margin: 10px;
        text-align: center;
      }
      .card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }
      .card h3 {
        margin: 10px 0;
      }
      .card p {
        margin: 0;
        padding: 10px;
        font-size: 14px;
        color: grey;
      }
      .footer {
        background-color: lightgrey;
        padding: 20px;
        text-align: center;
        font-size: 12px;
        color: grey;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>我的网站</h1>
    </div>
    <div class="nav">
      <a href="#">首页</a>
      <a href="#">关于</a>
      <a href="#">联系</a>
    </div>
    <div class="main">
      <div class="card">
        <img src="https://picsum.photos/300/200" alt="图像">
        <h3>标题 1</h3>
        <p>内容 1</p>
      </div>
      <div class="card">
        <img src="https://picsum.photos/300/200" alt="图像">
        <h3>标题 2</h3>
        <p>内容 2</p>
      </div>
      <div class="card">
        <img src="https://picsum.photos/300/200" alt="图像">
        <h3>标题 3

焦虑肇事者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
好看的html示例代码

<p>好的，以下是一个美观的 HTML 示例代码：</p><p>```html<!DOCTYPE html></p><html> <head> <meta charset="utf-8"> <title>我的网站</title> <styl...
复制链接

扫一扫