首页 前端知识 网页制作大作业HTML CSS制作静态网页----原神

网页制作大作业HTML CSS制作静态网页----原神

2024-02-03 12:02:59 前端知识 前端哥 148 513 我要收藏

一个简单的HTML网页,图片为游戏截图,部分图片来自网络。

以下是部分图片(剩余的以此为模板)

01.html(应用CSS01.css)

02.html (应用CSS02.css)

03.html(应用CSS02.css)

04.html (应用CSS02.css)

05.html(应用CSS02.css)

话不多说,上代

01.html

​

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原神</title>
<link rel="stylesheet" href="CSS/CSS01.css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <td><img src="images/原神1.png" height="100"></td>
    <td width="100" align="center"><a href="提瓦特大陆.html">提瓦特</a></td>
    <td width="100" align="center"><a href="HTML/巴巴托斯.html">巴巴托斯</a></td>
    <td width="100" align="center"><a href="HTML/摩拉克斯.html">摩拉克斯</a></td>
    <td width="100" align="center"><a href="HTML/雷电将军.html">雷电将军</a></td>
    <td width="100" align="center"><a href="HTML/红毹婵娟.html">红毹婵娟</a></td>
    <td width="100" align="center"><a href="HTML/枫原万叶.html">枫原万叶</a></td> 
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="760" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td><p>蒙德,自由之都、牧歌之城、北境之王冠。</p>
          <p>提瓦特大陆东北部的自由城邦,以蒲公英为城市象征。正如象征之花一般,蒙德受风神庇佑,以风神为信仰。传说风神「巴巴托斯」抛洒象征自由的飞鸟之羽,在鸟羽落下的地方,建立起这座城市。</p>
          <p>让我们一起来深入了解这片风神眷顾之地吧!</p></td>
        <td><img class="img2" src="images/蒙德.jpg" width="450" height="300"></td>
      </tr>
      <tr>
        <td><img src="images/璃月.jpg" width="450" height="300"></td>
        <td>
          <p>璃月,千年古都、富饶之地、东方之巨龙。</p>
          <p>璃月位于提瓦特大陆东方的富饶港湾。傲然矗立的山麓与石林、广袤的平原与生机勃勃的河滩共同构成了璃月的丰富地貌,在四季分明的气候下焕发出多彩的风华。山石奇景间,埋藏着无尽的岩之魔神的古老馈赠等待着人们发掘。</p>
          <p>带着希望,去游历这座繁华之城吧!</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>稻妻,海上群岛、雷电城邦、永恒的国度。</p>
          <p>位于提瓦特大陆远东的封闭群岛。稻妻外海被雷霆骤雨所包围,越过无尽的雷暴,踏上红枫与绯樱眷顾的诸岛,在环绕的砂堤、高耸的断崖与幽秘的山林之中,见证御建鸣神主尊大御所大人所追寻的永恒。稻妻的风土人情与其他国度差异甚远,与蒙德和璃月不同,稻妻远在海上,由许多岛屿组成,大型岛屿周边又零散分布着一些小岛,岛屿之间互相往来也多依靠船只。</p>
        </td>
        <td><img class="img2" src="images/稻妻.jpg" width="450" height="300"></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

​

02.html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原神</title>
<link rel="stylesheet" href="../CSS/CSS02.css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <td><img src="../images/原神1.png" height="100"></td>
    <td width="100" align="center"><a href="../提瓦特大陆.html">提瓦特</a></td>
    <td width="100" align="center"><a href="巴巴托斯.html">人物简介</a></td>
    <td width="100" align="center"><a href="巴巴托斯图片.html">人物留影</a></td>
    <td width="100" align="center"><a href="巴巴托斯视频.html">人物视频</a></td>
    <td width="100" align="center"><a href="巴巴托斯眷属.html">眷属</a></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="800" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td colspan="2"><div class="title">风神--巴巴托斯</div></td>
        </tr>
      <tr>
        <td><p>巴巴托斯原本是北境大地上咆哮的千风中的一缕。在魔神战争时期,巴巴托斯与无名的少年、无名的骑士、弓手阿莫斯一同推翻了用烈风统治旧蒙德的高塔孤王迭卡拉庇安,成为魔神战争的七位胜者之一。他继承了战死的少年向往的自由,放弃统御蒙德,让新的蒙德成为成为无人称王的国度</p>
          <p>温迪,来路不明的吟游诗人。有时唱诵一些老掉牙的旧诗,有时又会哼出谁也没听过的新歌。喜欢苹果和热闹的气氛,讨厌奶酪和一切黏糊糊的玩意儿。引导“风”之元素力时,元素塑形往往外显为羽毛,因为他很中意看上去轻飘飘的东西。</p>
          <p>“浪子的真情。”塞西莉亚花的花语。“我现在会为你歌颂美好的万物万象,四季轮转,四风从不止息。当然啦,功劳也不是它们的,主要是我的。要是没有吟游诗人,谁去把这些传唱?”当温迪彻底沉醉于美酒时,他会如此放声歌唱。</p>
        </td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center"><img src="../images/温迪1.jpg" width="180" border="0" title="温迪"></td>
            </tr>
          <tr>
            <td align="center"><img src="../images/温迪2.jpg" width="180" border="0" title="温迪"></td>
            </tr>
        </table></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="center"><img src="../images/温迪3.jpg" width="180" border="0" title="温迪与他的眷属"></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

03.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原神</title>
<link rel="stylesheet" href="../CSS/CSS02.css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <td><img src="../images/原神1.png" height="100"></td>
    <td width="100" align="center"><a href="../提瓦特大陆.html">提瓦特</a></td>
    <td width="100" align="center"><a href="巴巴托斯.html">人物简介</a></td>
    <td width="100" align="center"><a href="巴巴托斯图片.html">人物留影</a></td>
    <td width="100" align="center"><a href="巴巴托斯视频.html">人物视频</a></td>
    <td width="100" align="center"><a href="巴巴托斯眷属.html">眷属</a></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="800" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td colspan="2"><div class="title">风神--巴巴托斯</div></td>
        </tr>
      <tr>
        <td valign="top"><table width="800" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="../images/温迪8.png" width="250" height="300" border="0"></td>
            <td><img src="../images/温迪5.jpg" width="230" height="300" border="0"></td>
            <td><img src="../images/温迪6.png" width="260" border="0"></td>
          </tr>
          <tr>
            <td><img src="../images/温迪7.jpg" width="250"></td>
            <td><img src="../images/温迪4.jpg" width="230"></td>
            <td><img src="../images/温迪9.jpg" width="260">
             </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>       
          </td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

04.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原神</title>
<link rel="stylesheet" href="../CSS/CSS02.css">
</head>
 
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <td><img src="../images/原神1.png" height="100"></td>
    <td width="100" align="center"><a href="../提瓦特大陆.html">提瓦特</a></td>
    <td width="100" align="center"><a href="巴巴托斯.html">人物简介</a></td>
    <td width="100" align="center"><a href="巴巴托斯图片.html">人物留影</a></td>
    <td width="100" align="center"><a href="巴巴托斯视频.html">人物视频</a></td>
    <td width="100" align="center"><a href="巴巴托斯眷属.html">眷属</a></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="800" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td><div class="title">风神--巴巴托斯</div></td>
        </tr>
      <tr>
        <td valign="top"><p>接下来,请欣赏风神巴巴托斯的PV</p><br>
            <br>
            <video width="800" src="../images/温迪PV.mp4" controls ><br>
            <br>
           
           
          <p><br>
        </p></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

 05.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原神</title>
<link rel="stylesheet" href="../CSS/CSS02.css">
<style type="text/css">

</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <td><img src="../images/原神1.png" height="100"></td>
    <td width="100" align="center"><a href="../提瓦特大陆.html">提瓦特</a></td>
    <td width="100" align="center"><a href="巴巴托斯.html">人物简介</a></td>
    <td width="100" align="center"><a href="巴巴托斯图片.html">人物留影</a></td>
    <td width="100" align="center"><a href="巴巴托斯视频.html">人物视频</a></td>
    <td width="100" align="center"><a href="巴巴托斯眷属.html">眷属</a></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="800" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td colspan="2"><div class="title">风神--巴巴托斯&nbsp;&nbsp;&nbsp;&nbsp;眷属</div></td>
        </tr>
      <tr>
        <td valign="top">
          <p>蒙德的「四风守护」之一,东风之龙特瓦林。</p>
           <p> 在漫长的岁月与无边的黑暗中,清澈的宝石也会蒙尘而变得黯淡,高傲的龙也会被侵蚀而充满了忿恨。
           <p> 不过,要记住,尘埃能被轻易拭去,疑惧与毒也能被粉碎。</p>
            <p>
            「自由地在深空中翱翔吧。
            「就如当年你我相遇时,我行走在大地上,唱着风的歌曲;
            「你则在大气稀薄的高天上,俯瞰世界。
            「如今的天空中没有风雪,大地上充满了绿草,会很美丽吧。
            「如果你也在地面上行走过,听过牧歌和风铃在远方错落的歌,尝过蜜一样甜的酒就会明白吧。
            「如果你曾是我,看见过你在蓝蓝的天上滑翔的孤高模样,见识过你的美丽身姿就好了。
            「如此,你就会明白,这样的天空与大地,是值得为之奋战的。」
          </p>
        </td>
        <td valign="top"><table width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></embed>
             </td>
          </tr>
          <tr>
            <td><img src="../images/风魔龙1.jpg" width="300" border="0"></td>
          </tr>
          <tr>
            <td><img src="../images/风魔龙2.jpg" width="300" border="0"></td>
          </tr>
          <tr>
            <td><img src="../images/风魔龙3.jpg" width="300" border="0"></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
        </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

CSS通过外链式引入

CSS01.css

​
body {
    background-image: url(../images/背景.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "楷体";
    font-size: 25px; 
    line-height: 25px;
    font: white;
   }
   td>a {
     color: red;
   }
   .nav {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #738CAA;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
   }
   .main {
    color: #000;
   }
   a {
    font-size: 22px;
    font-family:"微软雅黑";
   }
   a:link {
    color:#8ff40c;
    text-decoration: none;
    font-family:"楷体";
    font-size: 22px;
   }
   a:visited {
    text-decoration: none;
    color: #8ff40c;
    font-family:"楷体";
    font-size: 22px;
   }
   a:hover {
    color:red;
    text-decoration: none;
    font-family:"楷体";
    font-size: 22px;
   }
   a:active {
    text-decoration: none;
    color: #000;
    font-family:"楷体";
   }
   .title {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #200F15;
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: #200F15;
    padding-left: 10px;
    color: #AD5A5A;
   }
   .img1{
     float: left;
   }
   .img2{
     float: right;
   }
   p{
     color: white;
     }

​

CSS02.css

​
body {
    background-image: url(../images/背景.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "楷体";
    font-size: 25px; 
    line-height: 25px;
    font: white;
   }
   td>a {
     color: red;
   }
   .nav {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #738CAA;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
   }
   .main {
    color: #000;
   }
   a {
    font-size: 23px;
    font-family:"微软雅黑";
   }
   a:link {
    color:#0cf4d5;
    text-decoration: none;
    font-family:"楷体";
    font-size: 23px;
   }
   a:visited {
    text-decoration: none;
    color: #0cf4d5;
    font-family:"楷体";
    font-size: 23px;
   }
   a:hover {
    color:red;
    text-decoration: none;
    font-family:"楷体";
    font-size: 23px;
   }
   a:active {
    text-decoration: none;
    color: #000;
    font-family:"楷体";
    font-size: 23px;
   }
   .title {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #200F15;
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: #200F15;
    padding-left: 10px;
    color: #0cf4d5;
   }
   .img1{
     float: left;
   }
   .img2{
     float: right;
   }
   p{
     color: white;
     }

​

 想要图片的私聊我。

我也同样是个小白,制作不易,喜欢的话,留下个赞吧。

还有部分内容模板是一样的,想要的私聊我,看到就会回复。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1164.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!