以下是一个简单的示例,演示了如何使用HTML和CSS来创建一个包含按钮和页脚的页面。
HTML代码:
按钮和页脚示例
CSS代码(保存为style.css):
.button {
background-color: #4CAF50; /* 设置按钮背景颜色 */
color: white; /* 设置按钮文本颜色 */
padding: 10px 20px; /* 设置按钮内边距 */
border: none; /* 移除按钮边框 */
text-align: center; /* 设置文本居中 */
text-decoration: none; /* 移除文本下划线 */
display: inline-block; /* 将按钮显示为块级元素 */
font-size: 16px; /* 设置文本大小 */
margin: 10px; /* 设置按钮外边距 */
cursor: pointer; /* 设置鼠标样式为手型 */
}
.footer {
background-color: #f1f1f1; /* 设置页脚背景颜色 */
padding: 10px; /* 设置页脚内边距 */
text-align: center; /* 设置文本居中 */
}
在这个示例中,我们使用了一个标签来创建一个按钮,并为它添加了一个名为
button
的class。我们还使用一个标签来创建一个页脚,并为它添加了一个名为
footer
的class。
在CSS中,我们使用了.button
选择器来选择所有具有button
class的元素,并为它们设置了相应的样式。同样,我们使用了.footer
选择器来选择所有具有footer
class的元素,并为它们设置了样式。
通过将HTML文件和CSS文件分别保存为index.html
和style.css
,你可以在浏览器中打开index.html
文件,并看到按钮和页脚的效果。
下一篇:按钮hitArea不移动