以下是一个简单的小故事网页示例,您可以根据需要进行调整和扩展:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>小故事时光</title>
<style>
body {
font-family: '微软雅黑', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #333;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
padding: 0;
list-style: none;
}
header li {
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ffffff;
font-weight: bold;
}
.story {
margin-top: 20px;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.story h2 {
color: #333;
}
.story p {
text-align: justify;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
</style>
小故事时光
故事标题
从前,在一个遥远的小村庄里,住着一个叫做小明的小男孩。小明非常喜欢冒险,每天都会跑到村外的森林里探险。一天,他发现了一只受伤的小鸟,小明决定带它回家照顾。
小明小心翼翼地将小鸟带回家,给它包扎伤口,并给它准备了食物和水。随着时间的推移,小鸟的伤口渐渐愈合,它们成为了好朋友。每天,小明都会和小鸟一起玩耍,讲述着他们的冒险故事。
**,有一天,小明发现小鸟突然变得异常兴奋,好像在等待着什么。小明好奇地问小鸟:“你今天怎么这么开心?”小鸟兴奋地回答:“我要去森林里找到我的家人了!”
小明决定帮助小鸟找到它的家人。他们一起穿过森林,跨过小溪,终于找到了小鸟的家族。小鸟的家人非常感激小明,它们决定将小明当作自己的朋友。
从那以后,小明和小鸟的家族成为了好朋友。他们一起分享快乐,一起面对困难,一起成长。小明明白了,友谊是无价的,而关爱他人也能收获无尽的快乐。
这个网页包含了一个简单的导航栏、一个故事区域和一个页脚。您可以根据需要添加更多的故事、图片、样式和功能。