设计页面样式
为了让我们的模拟在视觉上更具吸引力,让我们添加一些样式。打开 styles.css
文件并粘贴以下内容:
/* styles.css 内容
基本网页布局的样式表:
- 为页面主体设置默认的浅灰色背景、文本居中对齐以及 Arial 字体。
- h2 和 h3 标题的样式为特定的蓝色。
- 按钮样式包括:
- 蓝色背景搭配白色文本。
- 圆角。
- 悬停效果,使背景颜色变深并使按钮略微放大。
- #result 是一个带有内边距、边框和阴影的样式化容器。
- 段落的上下边距为 10 像素。
*/
body {
font-family: "Arial", sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
text-align: center;
padding-top: 50px;
}
h2,
h3 {
color: #007bff;
}
button {
background-color: #007bff;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
transition:
background-color 0.3s,
transform 0.3s;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
#result {
margin-top: 20px;
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
p {
margin: 10px 0;
}
styles.css
文件是我们定义模拟视觉方面的地方。
-
主体样式:
font-family: "Arial", sans-serif;
:将网页主体的默认字体设置为 Arial。如果没有 Arial 字体,则回退到任何无衬线字体。
margin: 0; padding: 0;
:去除默认边距和内边距。
background-color: #f8f9fa;
:为整个页面设置浅灰色背景颜色。
color: #333;
:为文本设置深灰色。
text-align: center;
:将文本对齐到页面中心。
padding-top: 50px;
:在主体顶部添加 50 像素的内边距。
-
标题样式:
h2, h3 { color: #007bff; }
:h2
和 h3
标题用特定的蓝色调着色。
-
按钮样式:
- 按钮有蓝色背景、白色文本且无边框。
- 通过
border-radius
设置圆角。
- 鼠标悬停在按钮上时,其背景颜色变为更深的蓝色调,并且按钮会略微放大(
transform: scale(1.05);
)。
-
结果容器:
#result
:表示 id 为 “result” 的元素。
- 它有白色背景、灰色边框和微妙的阴影。
- 该容器的样式看起来像一个带有圆角的卡片或盒子。
-
段落样式:
- 段落(
p
)的上下边距为 10 像素。这确保了连续段落和其他元素之间的间距。
这一步确保用户界面美观且易于阅读。