首页 团队成员,上杉九月的文章

文章简介

作者:上杉九月

排版与发布:上杉九月

前言

前排提醒,本文章需要一定的Html基础,所以不推荐小白查看。

暂不归入零基础分类。

正文

范例1

题目要求

  • 建立一个资料页面
  • 建立一个css样式文件
  • 此网页中有五种以上的[动物讯息]和[植物讯息]
  • 所有动物数据与植物数据在同一个网页,各自以一个表格方式呈现

CSS样式

  • 字型为40px
  • 字型颜色为咖啡色
  • 背景颜色为粉红色

Html5代码

<!DOCTYPE html>
<html>
    <head>
        <title>范例1</title>
        <meta charset="UTF-8">
        <link href="myData.css" rel="stylesheet">
    </head>
    <body>
       <table border="1">
           <!--标题栏-->
           <tr>
               <th colspan="6">动物讯息</th>
           </tr>
           <!--动物名称-->
           <tr>
               <th>大熊猫</th>
               <th>西伯利亚平原狼</th>
               <th>树袋熊</th>
               <th>袋鼠</th>
               <th>美洲豹</th>
           </tr>
           <!--动物介绍-->
           <tr>
               <td>大熊猫(学名:Ailuropoda melanoleuca):属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物,头躯长1.2-1.8米,尾长10-12厘米。</td>
               <td>西伯利亚平原狼(学名:Canis lupus campestris):是灰狼的一个亚种,属于食物链中上层的掠食者,是西伯利亚雪橇犬“哈士奇”(hasky)的祖先。</td>
               <td>树袋熊,又称考拉,是澳大利亚的国宝,也是澳大利亚奇特的珍贵原始树栖动物。英文名Koala bear来源于古代土著文字,意思是“no drink”。因为树袋熊从他们取食的桉树叶中获得所需的90%的水分,只在生病和干旱的时候喝水,当地人称它“克瓦勒”,意思也是“不喝水”。</td>
               <td>袋鼠是任一种属于袋鼠目的有袋动物 ,主要分布于澳大利亚大陆和巴布亚新几内亚的部分地区。其中,有些种类为澳大利亚独有。不同种类的袋鼠在澳大利亚各种不同的自然环境中生活,从凉性气候的雨林和沙漠平原到热带地区。袋鼠是跳得最高最远的哺乳动物。</td>
               <td>美洲豹,学名:Panthera onca (Linnaeus, 1758),又叫美洲虎,是现存第三大的猫科动物。体重70—180千克,咬力可达1250磅。是生活在中南美洲的一种大型猫科动物。</td>
           </tr>
       </table>
       <br>
       <table border="1">
        <!--标题栏-->
        <tr>
            <th colspan="6">植物讯息</th>
        </tr>
        <!--植物名称-->
        <tr>
            <th>玉兰花</th>
            <th>迎春花</th>
            <th>山竹子</th>
            <th>山丹花</th>
            <th>蓝盆花</th>
        </tr>
        <!--植物介绍-->
        <tr>
            <td>形态特征:落叶乔木,一般高4-6M,高者可达25M。单叶互生,叶片倒卵形,全缘。花先叶开放,直立,钟状,芳香,花大,碧白色,有时基部带红晕。聚合果圆柱形,红色。种子心脏形,黑色。花期3-4月份,9月份果熟。</td>
            <td>形态特征:落叶灌木,株高0.3-5m,枝细长,拱曲弯垂,幼枝绿色,四棱形,叶对生,三小叶复叶,小叶卵形至椭圆形,长1-3cm,端急尖,边缘具短睫毛。花单生,先叶开放,有叶状狭窄的绿色苞片,有清香,花冠黄色,裂片6片,倒卵形或椭圆形,约为花冠筒长度的1/2。高脚碟状,径2-2.5cm。花期2-4月。</td>
            <td>形态特征: 山竹子高10-20m。树皮黑褐色,有黄色苦味的树脂液。枝条对生,小枝粗壮、方形。单叶对生,椭圆形或长椭圆形,长11-21cm,宽4.5-10cm,革质,叶柄短,叶基钝,叶尖急尖,全缘,叶脉明显,单花顶生,盛开时直径5-6.2cm;栽培种只有雌花稀有雄花,具单性结实能力。</td>
            <td>形态特征:地下具卵球形鳞茎,有少数白色肉质鳞片。茎直立,高30─60厘米,无毛。叶线状至线状披针形,边缘和背面脉上有乳突。无珠芽。花一至数朵,生于茎端和叶腋内,直立,夏初开花;花被片六枚,两轮,披针形或长椭圆形;朱红色或橘红色,内面有紫褐色斑点,开放后开展,但不向外反卷或稍反卷。</td>
            <td>形态特征:高30 ~50厘米,叶片披针形,边缘齿状。花序头状,花玫红色。花期4~5月。 产地分布:北京、河北、山西、陕西、内蒙古、东北、甘肃、宁夏等省区。生长习性:喜光线良好、通风的环境。</td>
        </tr>
    </table>
    </body>
</html>

CSS代码

body{
    background-color: pink;
    font-size: 40px;
    color: #603811;
}

界面展示

范例2

题目要求

  • 网页最上方增加切换页面的导航列
  • 导航列一共可切换三个不同的页面
  • 各个网页需要建立一个css样式文件
  • 各个网页需要建立一个JavaScript文件

Html5代码

Main.html

<!DOCTYPE html>
<html>
    <head>
        <title>范例2</title>
        <meta charset="UTF-8">
        <link href="myNavigation.css" rel="stylesheet">
        <script type="text/javascript" src="navigation.js"></script>
    </head>
    <body>
        <div>
            <ul id="Menu">
                <li><a class="active" href="mainNav.html">mainNav</a></li>
                <li><a href="student.html">student</a></li>
                <li><a href="aboutUs.html">aboutUs</a></li>
            </ul>
        
            <ul id="Button">
                <div id="button" onclick="myFunction()">Click</div>
            </ul>
        </div>
    </body>
</html>

About.html

<!DOCTYPE html>
<html>
    <head>
        <title>aboutUs</title>
        <meta charset="UTF-8">
        <link href="myAboutUs.css" rel="stylesheet">
        <script type="text/javascript" src="aboutus.js"></script>
    </head>
    <body>
        <div>
            <ul id="Menu">
                <li><a class="active" href="mainNav.html">mainNav</a></li>
                <li><a href="student.html">student</a></li>
                <li><a href="aboutUs.html">aboutUs</a></li>
            </ul>
        
            <ul id="Button">
                <div id="button" onclick="myFunction()">Click</div>
            </ul>
        </div>
    </body>
</html>

Student.html

<!DOCTYPE html>
<html>
    <head>
        <title>Student</title>
        <meta charset="UTF-8">
        <link href="myStudent.css" rel="stylesheet">
        <script type="text/javascript" src="student.js"></script>
    </head>
    <body>
        <div>
            <ul id="Menu">
                <li><a class="active" href="mainNav.html">mainNav</a></li>
                <li><a href="student.html">student</a></li>
                <li><a href="aboutUs.html">aboutUs</a></li>
            </ul>
        
            <ul id="Button">
                <div id="button" onclick="myFunction()">Click</div>
            </ul>
        </div>
    </body>
</html>

CSS代码(三份html使用同一份css样式)

#Menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#Button {
  text-align: center;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

JavaScript代码(三份html使用同一份js代码,显示信息稍作修改)

function myFunction()
{
    document.getElementById("button").innerHTML = "首页"
}

界面展示

范例3

题目要求

  • 切换页面导航列 + json资料页
  • 导航列共可切换三个不同的页面
  • 各个网页需要建立一个css样式文件
  • 建立一个JavaScript程序文件
  • 各个网页需要建立一个json资料文件

Html5代码

Main.html

<!DOCTYPE html>
<html>
    <head>
        <title>范例3</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="json.js"></script>
        <link href="myNavigation.css" rel="stylesheet">
        <link href="navigation.json">
    </head>
    <body>
        <div>
            <ul id="Menu">
                <li><a class="active" href="mainJson.html">main</a></li>
                <li><a href="studentJson.html">student</a></li>
                <li><a href="aboutJson.html">about</a></li>
            </ul>
            <ul id="Button">
                <div id="button" onclick="myFunction()">About Us</div>
            </ul>
        </div>
        <div>
            <h1>首页</h1>
            <div id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=447303772&auto=0&height=66"></iframe></div>
            <div id="title_pictures"><img src="https://gitee.com/sakurasep/pictures/raw/master/Snipaste_2021-03-26_09-10-52.jpg" width="1440" height="720"></div>
            <h1>Ven_殃雾的视频</h1>
            <div id="video"><iframe src="https://player.bilibili.com/player.html?aid=247080603&bvid=BV1Fv411a72p&cid=310127366&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="1440" height="720"> </iframe></div>
        </div>
        <table>
            <tr>
                <td>
                    <p><span id="Name0"></span></p> 
                </td>
                <td>
                    <p><span id="title0"></span></p>
                </td>
                <td>
                    <p><span id="Url0"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name1"></span></p> 
                </td>
                <td>
                    <p><span id="title1"></span></p>
                </td>
                <td>
                    <p><span id="Url1"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name2"></span></p> 
                </td>
                <td>
                    <p><span id="title2"></span></p>
                </td>
                <td>
                    <p><span id="Url2"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name3"></span></p> 
                </td>
                <td>
                    <p><span id="title3"></span></p>
                </td>
                <td>
                    <p><span id="Url3"></span></p>
                </td>
            </tr>
        </table>
        <script type="text/javascript" src="navigation.json"></script>
    </body>
</html>

About.html

<!DOCTYPE html>
<html>
    <head>
        <title>关于我们</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="json.js"></script>
        <link href="myAboutUs.css" rel="stylesheet">
        <link href="aboutus.json">
    </head>
    <body>
        <div>
            <ul id="Menu">
                <li><a class="active" href="mainJson.html">main</a></li>
                <li><a href="studentJson.html">student</a></li>
                <li><a href="aboutJson.html">about</a></li>
            </ul>
            <ul id="Button">
                <div id="button" onclick="myFunction()">About Us</div>
            </ul>
        </div>
        <div>
            <h1>关于 Sakura Team(ST)</h1>
            <div id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=447303772&auto=0&height=66"></iframe></div>
            <div id="title_pictures"><img src="https://gitee.com/sakurasep/pictures/raw/master/Snipaste_2021-03-26_09-09-24.jpg" width="1440" height="720"></div>
        </div>
        <table>
            <tr>
                <td>
                    <p><span id="Name0"></span></p> 
                </td>
                <td>
                    <p><span id="Subject0"></span></p>
                </td>
                <td>
                    <p><span id="Url0"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name1"></span></p> 
                </td>
                <td>
                    <p><span id="Subject1"></span></p>
                </td>
                <td>
                    <p><span id="Url1"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name2"></span></p> 
                </td>
                <td>
                    <p><span id="Subject2"></span></p>
                </td>
                <td>
                    <p><span id="Url2"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name3"></span></p> 
                </td>
                <td>
                    <p><span id="Subject3"></span></p>
                </td>
                <td>
                    <p><span id="Url3"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name4"></span></p> 
                </td>
                <td>
                    <p><span id="Subject4"></span></p>
                </td>
                <td>
                    <p><span id="Url4"></span></p>
                </td>
            </tr>
        </table>
        <script type="text/javascript" src="aboutus.json"></script>
    </body>
</html>

Student.html

<!DOCTYPE html>
<html>
    <head>
        <title>成员资料</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="json.js"></script>
        <link href="myStudent.css" rel="stylesheet">
        <link href="student.json">
    </head>
    <body>
        <div>
            <ul id="Menu">
                <li><a class="active" href="mainJson.html">main</a></li>
                <li><a href="studentJson.html">student</a></li>
                <li><a href="aboutJson.html">about</a></li>
            </ul>
            <ul id="Button">
                <div id="button" onclick="myFunction()">About Us</div>
            </ul>
        </div>
        <div>
            <h1>关于 Sakura Team(ST)的成员</h1>
            <div id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=445546970&auto=0&height=66"></iframe></div>
            <div id="title_pictures"><img src="https://gitee.com/sakurasep/pictures/raw/master/Snipaste_2021-03-26_09-14-34.jpg" width="1440" height="720"></div>
        </div>
        <table>
            <tr>
                <td>
                    <p><span id="Name0"></span></p> 
                </td>
                <td>
                    <p><span id="Age0"></span></p>
                </td>
                <td>
                    <p><span id="Major0"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name1"></span></p> 
                </td>
                <td>
                    <p><span id="Age1"></span></p>
                </td>
                <td>
                    <p><span id="Major1"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name2"></span></p> 
                </td>
                <td>
                    <p><span id="Age2"></span></p>
                </td>
                <td>
                    <p><span id="Major2"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name3"></span></p> 
                </td>
                <td>
                    <p><span id="Age3"></span></p>
                </td>
                <td>
                    <p><span id="Major3"></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p><span id="Name4"></span></p> 
                </td>
                <td>
                    <p><span id="Age4"></span></p>
                </td>
                <td>
                    <p><span id="Major4"></span></p>
                </td>
            </tr>
        </table>
        <script type="text/javascript" src="student.json"></script>
    </body>
</html>

CSS代码

Main.css

#Menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(34, 139, 180);
}

table,th,tr,td {
  text-align: center;
  font-size: 20px;
  border: 3px solid black;
  border-collapse: collapse;
  padding: 15px;
  background-color: white;
  color: black;
  margin: auto;
}
body {
  background-color: white;
  font-size: 20px;
  color: black;
  padding: 15px;
}

h1,#title_pictures,#Button,#music,#video {
  text-align: center;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(34, 139, 180);
}

About.css

#Menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(34, 139, 180);
}

table,th,tr,td {
  text-align: center;
  font-size: 20px;
  border: 3px solid black;
  border-collapse: collapse;
  padding: 15px;
  background-color: white;
  color: black;
  margin: auto;
}
body {
  background-color: white;
  font-size: 20px;
  color: black;
  padding: 15px;
}

h1,#title_pictures,#Button,#music {
  text-align: center;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(34, 139, 180);
}

Student.css

#Menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(34, 139, 180);
}

table,th,tr,td {
  text-align: center;
  font-size: 20px;
  border: 3px solid black;
  border-collapse: collapse;
  padding: 15px;
  background-color: white;
  color: black;
  margin: auto;
}
body {
  background-color: white;
  font-size: 20px;
  color: black;
  padding: 15px;
}

h1,#title_pictures,#Button,#music {
  text-align: center;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(34, 139, 180);
}

JavaScript代码(三份html使用同一份js代码)

function myFunction()
{
    document.getElementById("button").innerHTML = "This is Our Team.Please go to https://sakurasep.club/ to check the details."
}

Json代码

Main.json

var main = [
    {"Name":"作者","title":"项目名称","Url":"网址,支持https协议"},
    {"Name":"Ven_殃雾","title":"编程风格总结","Url":"sakurasep.fun/posts/14819/"},
    {"Name":"风邪","title":"用一场尽头之旅,告别过往","Url":"sakurasep.fun/posts/11484/"},
    {"Name":"上杉九月","title":"Chevereto-年轻人的第一个私人图床","Url":"sakurasep.fun/posts/22362/"},
];

document.getElementById("Name0").innerHTML=main[0].Name;
document.getElementById("Name1").innerHTML=main[1].Name;
document.getElementById("Name2").innerHTML=main[2].Name;
document.getElementById("Name3").innerHTML=main[3].Name;

document.getElementById("title0").innerHTML=main[0].title;
document.getElementById("title1").innerHTML=main[1].title;
document.getElementById("title2").innerHTML=main[2].title;
document.getElementById("title3").innerHTML=main[3].title;

document.getElementById("Url0").innerHTML=main[0].Url;
document.getElementById("Url1").innerHTML=main[1].Url;
document.getElementById("Url2").innerHTML=main[2].Url;
document.getElementById("Url3").innerHTML=main[3].Url;

About.json

var subject = [
    {"Name":"作者","Subject":"项目名称","Url":"网址,支持https协议"},
    {"Name":"上杉九月","Subject":"个人博客","Url":"sakurasep.site"},
    {"Name":"上杉九月","Subject":"团队博客","Url":"sakurasep.fun"},
    {"Name":"上杉九月","Subject":"宣传网站","Url":"sakurasep.club"},
    {"Name":"上杉九月","Subject":"图片站","Url":"sakurasep.top"}
];

document.getElementById("Name0").innerHTML=subject[0].Name;
document.getElementById("Name1").innerHTML=subject[1].Name;
document.getElementById("Name2").innerHTML=subject[2].Name;
document.getElementById("Name3").innerHTML=subject[3].Name;
document.getElementById("Name4").innerHTML=subject[4].Name;

document.getElementById("Subject0").innerHTML=subject[0].Subject;
document.getElementById("Subject1").innerHTML=subject[1].Subject;
document.getElementById("Subject2").innerHTML=subject[2].Subject;
document.getElementById("Subject3").innerHTML=subject[3].Subject;
document.getElementById("Subject4").innerHTML=subject[4].Subject;

document.getElementById("Url0").innerHTML=subject[0].Url;
document.getElementById("Url1").innerHTML=subject[1].Url;
document.getElementById("Url2").innerHTML=subject[2].Url;
document.getElementById("Url3").innerHTML=subject[3].Url;
document.getElementById("Url4").innerHTML=subject[4].Url;

Student.json

var members = [
    {"Name":"姓名","Age":"年龄","Major":"专业"},
    {"Name":"上杉九月","Age":"18","Major":"软件工程"},
    {"Name":"Ven_殃雾","Age":"19","Major":"计算机科学与技术"},
    {"Name":"风邪","Age":"18","Major":"地理科学"},
    {"Name":"Anti-sacerdos","Age":"18","Major":"计算机科学与技术"}
];

document.getElementById("Name0").innerHTML=members[0].Name;
document.getElementById("Name1").innerHTML=members[1].Name;
document.getElementById("Name2").innerHTML=members[2].Name;
document.getElementById("Name3").innerHTML=members[3].Name;
document.getElementById("Name4").innerHTML=members[4].Name;

document.getElementById("Age0").innerHTML=members[0].Age;
document.getElementById("Age1").innerHTML=members[1].Age;
document.getElementById("Age2").innerHTML=members[2].Age;
document.getElementById("Age3").innerHTML=members[3].Age;
document.getElementById("Age4").innerHTML=members[4].Age;

document.getElementById("Major0").innerHTML=members[0].Major;
document.getElementById("Major1").innerHTML=members[1].Major;
document.getElementById("Major2").innerHTML=members[2].Major;
document.getElementById("Major3").innerHTML=members[3].Major;
document.getElementById("Major4").innerHTML=members[4].Major;

界面展示

写在最后

本次源码分享_密码:4e0a

about_me




文章评论

目录