html css源码

admin 168 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文件,您应该能看到一个带有标题、段落和按钮的网页,这些元素都应用了定义的样式。

上一篇电脑上如何打(电脑上如何打印)

下一篇当前文章已是最新一篇了