在线Python编辑器：编写、运行和分享你的Python代码

以下是一个简单的示例，展示了一个在线Python网站的HTML和CSS代码。请注意，这只是一个基本示例，您可以根据自己的需求进行修改和扩展。

HTML文件（index.html）：

<!DOCTYPE html>
<html>

<head>
  <title>在线Python编辑器</title>
  <link rel='stylesheet' type='text/css' href='style.css'>
</head>

<body>
  <header>
    <h1>在线Python编辑器</h1>
  </header>

  <main>
    <div class='container'>
      <h2>编写Python作品</h2>
      <p>在下面的编辑器中编写和运行您的Python代码：</p>
      <textarea id='code-editor'></textarea>
      <button id='run-button'>运行</button>
      <div id='output'></div>
    </div>
  </main>

  <footer>
    <p>&copy; 2021 在线Python网站</p>
  </footer>

  <script src='script.js'></script>
</body>

</html>

CSS文件（style.css）：

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header h1 {
  margin: 0;
}

main {
  padding: 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-top: 0;
}

textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #555;
}

#output {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  white-space: pre-wrap;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

图片文件（python_logo.png）：（请将您自己的Python logo图片命名为python_logo.png，并将其放置在与index.html和style.css相同的目录中。）

请注意，此示例中的JavaScript代码（script.js）被省略了，因为它取决于您具体的需求和功能。您可以根据您的需要添加和编写JavaScript代码。

希望这个示例对您有所帮助！