菜单 搜索
首页 前端知识 网页制作大作业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
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

借用jQuery发送Http请求的实现（内附源码）

2024-02-15 14:02:07

jQuery ---- 插件

2024-02-15 14:02:06

Python入门自学进阶-Web框架——16、Django登录/注册

2024-02-15 14:02:03

html5 简单实用好看的滑动开关Jquery css带效果图（无bug）

2024-02-15 14:02:00

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

Jquery锚点导航定位、css设置头部左侧固定，右侧内容滚动

2024-02-15 14:02:58

web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变

2024-02-15 14:02:58

原生JavaScript技术，jQuery实现下拉菜单

2024-02-15 14:02:52

在vue3项目中如何使用echarts

2024-02-15 14:02:45

BI可视化报表工具-SpringReport

2024-02-15 14:02:34

大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！