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