html 好看的css

要使HTML页面看起来好看，需要使用CSS来设置页面的样式。以下是一些让HTML页面看起来好看的CSS样式：

1. 背景颜色和图片：
background-color: #f0f0f0; /*设置背景颜色*/
background-image: url("background.jpg"); /*设置背景图片*/

2. 字体和颜色：
font-family: Arial, sans-serif; /*设置字体*/
color: #333; /*设置字体颜色*/

3. 大小和边框：
width: 500px; /*设置元素宽度*/
height: 300px; /*设置元素高度*/
border: 1px solid #ccc; /*设置边框*/

4. 对齐和间距：
text-align: center; /*设置文本对齐方式*/
margin: 10px; /*设置元素外边距*/

这些样式只是一些基础的样式，还有很多其他的样式可以用来美化页面。

相关问题

html好看的表格css

以下是一个简单的 HTML 表格和 CSS 样式的例子，你可以根据自己的需求进行修改：

HTML 代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>男</td>
  </tr>
</table>

CSS 代码：

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}

th,
td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #eee;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

td:first-child,
th:first-child {
  border-left: none;
}

td:last-child,
th:last-child {
  border-right: none;
}

tr:last-child td {
  border-bottom: none;
}

这段 CSS 样式会让表格看起来更美观、易读，其中包括：

- `border-collapse: collapse;`：让表格边框合并，看起来更整洁。
- `width: 100%;`：让表格占据整个容器的宽度。
- `margin-bottom: 20px;`：让表格与下方的元素保持一定的距离。
- `text-align: left;`：让表格中的文本左对齐。
- `padding: 8px;`：给单元格设置内边距，让表格看起来更整洁。
- `background-color: #eee;`：给表头单元格设置背景颜色。
- `tr:nth-child(even)`：让偶数行的背景色变为灰色，增加对比度。
- `td:first-child, th:first-child`：去掉第一列单元格的左边框。
- `td:last-child, th:last-child`：去掉最后一列单元格的右边框。
- `tr:last-child td`：去掉表格最后一行单元格的下边框。

html css 好看的提交表单

以下是一个简单的HTML和CSS代码，用于创建一个漂亮的提交表单：

HTML代码：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="subject">Subject:</label>
  <input type="text" id="subject" name="subject" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <input type="submit" value="Submit">
</form>

CSS代码：

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 400px;
  margin: 0 auto;
}

label {
  font-size: 18px;
  margin: 10px 0;
  text-align: left;
  width: 100%;
}

input,
textarea {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 20px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
}

input[type="submit"]:hover {
  background-color: #3e8e41;
}

你可以将这些代码保存为HTML文件，然后在浏览器中打开以查看效果。