HTML与CSS结合的网页 *** 实例
让我们欣赏一段简单的HTML代码,它描绘了一个网页的基本框架。
<!DOCTYPE html>
<html>
<head>
<title>我的网页示例</title>
<style>
body {
字体: 雅黑, 宋体, sans-serif;
}
h1 {
颜色: 深蓝色;
字体大小: 24px;
}
p {
颜色: 草绿色;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页!</h1>
<p>这是一个简洁而实用的HTML与CSS示例,用于构建包含标题和段落的网页。</p>
<p>在此示例中,我们利用了<code><title></code>标签为页面命名,并借助<code><style></code>标签定义了基础的样式。</p>
<p>在<code><body></code>标签中,我们添加了两个段落,并为其设置了颜色,这仅仅是一个基础的示例,真实的网页开发会涉及更复杂的设计和功能。</p>
</body>
</html>让我们来看一个更加具体的HTML表格代码示例,用于展示个人信息。
<table>
<tr>
<th style="background-color: #f2f2f2;">姓名</th>
<td>XXX的姓名</td>
</tr>
<tr>
<th>性别</th>
<td>男性</td>
</tr>
<tr>
<th>出生日期</th>
<td>某年X月X日</td>
</tr>
<tr>
<th>出生地</th>
<td>XX省XX市</td>
</tr>
<tr>
<th>外貌描述</th>
<td>他/她拥有一副非常英俊/美丽的外貌</td>
</tr>
<tr>
<th>引语</th>
<td>"成功的秘诀在于持之以恒。"——某位成功人士</td>
</tr>
</table>温馨提示:
请将以上代码保存为index.html文件并在浏览器中打开它,这将展示一个简单的个人信息表格,包含了姓名、性别、出生日期、出生地、外貌描述以及一句引语。
如果您希望表格看起来更加专业和吸引人,您可以考虑添加更多的样式,比如表格边框、背景色、单元格间距等,您也可以根据需要调整引语的内容,使其更符合您的需求。
希望这个简单的网页 *** 实例能够帮助您更好地理解HTML与CSS的应用,并激发您对网页开发的更多兴趣!
0
