使用html和css写一个房地产的详情页-Go服务器开发

以下是一个简单的房地产详情页示例，使用HTML和CSS实现：

<!DOCTYPE html>
<html>
<head>
    <title>房地产详情页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
        
        .container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            font-size: 24px;
            color: #333;
        }
        
        p {
            color: #666;
        }
        
        .property-image {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        
        .property-details {
           display:flex; 
           flex-wrap:wrap; 
           justify-content:center; 
           align-items:center; 
           gap:20px; 
           margin-top:-10px; /* for visual alignment with image */
       }

       .property-details div{
         flex-basis :50%; /* adjust as needed to manage layout on different devices */
       }

       @media(max-width :768px){
         .property-details div{
             flex-basis :100%;/* switch to single column layout on smaller screens */
          }
      }    
      
    </style>
</head>
<body>

<div class="container">
    <h1>房地产详情</h1>

    <img src="property-image.jpg" alt="Property Image" class="property-image">

    <div class="property-details">
      <div>
        <h2>房屋信息</h2>
        <p>地址：某某区某某街道123号</p>
        <p>面积：200平方米</p>
        <p>价格：100万元</p>
      </div>

      <div>
        <h2>房屋描述</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius dictum risus eu hendrerit.</p>
      </div>

      <div>
        <h2>联系信息</h2>
        <p>联系人：张三</p>
        <p>电话：123-456-7890</p>
      </div>

    </div>

</div>

</body>
</html>

你可以将上述代码保存为一个.html文件，然后使用浏览器打开该文件，即可看到一个简单的房地产详情页。请注意替换property-image.jpg为实际的图片路径，并根据需要自定义其他细节。

内容由零声教学AI助手提供，问题来源于学员提问