html css源码

admin 2024年04月29日 04:36 270 0

一个段落和一个按钮。

HTML代码（保存为`.html`文件）：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是一个简单的HTML和CSS示例。</p>
    <button class="my-button">点击我</button>
</body>
</html>

CSS代码（保存为`styles.css`文件）：

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

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    font-size: 16px;
}

.my-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #337ab7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.my-button:hover {
    background-color: #23527c;
}

在这个示例中，HTML文件定义了网页的结构，包括标题、段落和按钮，CSS文件定义了这些元素的样式，如字体、颜色、背景色、边距等，通过链接CSS文件到HTML文件，我们可以将样式应用到HTML元素上。

要查看此示例的效果，请将HTML代码保存为`.html`文件，将CSS代码保存为`styles.css`文件，并确保它们位于同一目录中，在浏览器中打开HTML文件，您应该能看到一个带有标题、段落和按钮的网页，这些元素都应用了定义的样式。