HTML的个人网页制作：像魔法师一样让故事生动起来
<!DOCTYPE html>
<html>
<head>
<title>魔法师的故事</title>
<style>
body {
background-color: #F7F7F7;
color: #333;
font-family: Arial, sans-serif;
font-size: 18px;
padding: 20px;
text-align: justify;
}
h1 {
color: #222;
font-size: 32px;
text-align: center;
margin-bottom: 20px;
}
img {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
</style>
</head>
<body>
<h1>《魔法师的故事》</h1>
<p>在一个遥远的世界，有一个名叫艾伦的年轻男子，他从小就展现出了对魔法的强烈兴趣。一天，他在森林里无意间发现了一个神秘的魔法石，这个魔法石立即唤醒了他内心的魔法师潜能。</p>
<img src="magician-story.jpg" alt="Magician telling a story" class="center">
<p>他开始通过学习、实践和探索来掌握魔法，并在一次偶然的机会中认识了一位传说中的魔法师导师。导师教给艾伦精密而复杂的魔法技巧，同时也教给他对生活的理解和责任。</p>
<p>尽管生活中有困难和挑战，艾伦依然坚持魔法学习，并在一次重要的魔法竞赛中成功展示了他的魔法才能，从此在魔法世界中著名。他的故事传遍了魔法党的世界，被誉为“魔法师的奇迹”。</p>
<p>现在，艾伦已经不仅仅是一个魔法师，他是一个传奇故事的讲述者，他是一个改变世界的魔法师。</p>
</body>
</html>这个代码示例展示了如何使用HTML和CSS来创建一个包含图片、标题、段落和样式定义的简单网页。图片被设置为居中并且最大宽度不超过100%屏幕宽度，确保图片不会超出容器范围。文本被设置为居中对齐，并通过字体大小、颜色和字体族来进一步美化页面。
评论已关闭