王者荣耀对局环境 - 使用 Vue.js 代码优化网页 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>对局环境</title>
	<link rel="stylesheet" type="text/css" href="css/ys6.css">
	<link rel="stylesheet" type="text/css" href="css/wztb.css">
</head>
<body>
<nav id="nav">
	<div>
	<h1>
		<a href="###" class="logo">王者荣耀</a>
	</h1>
	<ul>
		<li><a href="gwsy.html">官网首页</a><em>HOME</em></li>
		<li><a href="yxjs.html">游戏介绍</a><em>DATA</em></li>
		<li><a href="yxgl.html">游戏攻略</a><em>STRATEGY</em></li>
		<li><a href="wzyyt.html">王者音乐听</a><em>MUSIC</em></li>
		<li><a href="yxbz.html">游戏壁纸</a><em>WALLPAPER</em></li>
		<li><a href="djhj.html">对局环境</a><em>CONFRONTATION</em></li>
	</ul>
	</div>
</nav>
<header id="header">
	<div class="zynr">
		<div class="djhj1">
			<div class="xyxt1">
				<div class="xyxt1_bt1">
					<span class="sj1">2019.10.17</span>
				</div>
				<div class="xyxt_nr1">
				  <div class="xyxt_wz1">
					<p class="wz1">信誉系统界面升级</p>
					<p class="wz2">信誉系统新改版</p>
					<p class="wz2">等级奖励一目了然</p>
				  </div>
				  <a href="" class="wz3">查看更多</a>
				</div>
			</div>
			<div class="xyxt2">
				<div class="xyxt1_bt2">
					<span class="sj2">2019.8.8</span>
				</div>
				<div class="xyxt_nr2">
					<span class="wz4">信誉积分规则优化</span>
				</div>
			</div>
			<div class="xyxt2">
				<div class="xyxt1_bt2">
					<span class="sj2">2019.1.9</span>
				</div>
				<div class="xyxt_nr2">
					<span class="wz4">信誉系统专属皮肤</span>
				</div>
			</div>			
			<div class="xyxt2">
				<div class="xyxt1_bt2">
					<span class="sj2">2018.12.26</span>
				</div>
				<div class="xyxt_nr2">
					<span class="wz4">信誉积分上线分段奖励</span>
				</div>
			</div>
			<div class="xyxt2">
				<div class="xyxt1_bt2">
					<span class="sj2">2018.10.31</span>
				</div>
				<div class="xyxt_nr2">
					<span class="wz4">信誉系统全新改版解读</span>
				</div>
			</div>			
		</div>
		<div class="djhj2">
			<ul>
				<li>
					<div class="tp1">					
					</div>
					<a href="" class="alzs1">案例展示</a>
					<p class="alzs2">在队友打野过程中，推红蓝buff</p>
				</li>
				<li>
					<div class="tp2">					
					</div>
					<a href="" class="alzs1">案例展示</a>
					<p class="alzs2">冲到敌方防御塔下后完全不动的张飞</p>
				</li>
				<li>
					<div class="tp3">					
					</div>
					<a href="" class="alzs1">案例展示</a>
					<p class="alzs2">为什么我举报别人挂机，他只扣了一分？</p>
				</li>					
			</ul>
		</div>
		<a href="" class="alzs3">更多经典案列</a>
	</div>
</header>
</body>
</html>
你可以创建一个名为"app.vue" 的 Vue.js 代码文件，将你的 HTML 代码粘贴到该文件中。然后，在你的 Vue.js 代码文件中引用该文件，以使你的网页更美观。下面是一个示例的 Vue.js 代码文件：
<pre><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;nav id=&quot;nav&quot;&gt;
      &lt;div&gt;
        &lt;h1&gt;
          &lt;a href=&quot;###&quot; class=&quot;logo&quot;&gt;王者荣耀&lt;/a&gt;
        &lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;gwsy.html&quot;&gt;官网首页&lt;/a&gt;&lt;em&gt;HOME&lt;/em&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;yxjs.html&quot;&gt;游戏介绍&lt;/a&gt;&lt;em&gt;DATA&lt;/em&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;yxgl.html&quot;&gt;游戏攻略&lt;/a&gt;&lt;em&gt;STRATEGY&lt;/em&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;wzyyt.html&quot;&gt;王者音乐听&lt;/a&gt;&lt;em&gt;MUSIC&lt;/em&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;yxbz.html&quot;&gt;游戏壁纸&lt;/a&gt;&lt;em&gt;WALLPAPER&lt;/em&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;djhj.html&quot;&gt;对局环境&lt;/a&gt;&lt;em&gt;CONFRONTATION&lt;/em&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;header id=&quot;header&quot;&gt;
      &lt;div class=&quot;zynr&quot;&gt;
        &lt;div class=&quot;djhj1&quot;&gt;
          &lt;div class=&quot;xyxt1&quot;&gt;
            &lt;div class=&quot;xyxt1_bt1&quot;&gt;
              &lt;span class=&quot;sj1&quot;&gt;2019.10.17&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;xyxt_nr1&quot;&gt;
              &lt;div class=&quot;xyxt_wz1&quot;&gt;
                &lt;p class=&quot;wz1&quot;&gt;信誉系统界面升级&lt;/p&gt;
                &lt;p class=&quot;wz2&quot;&gt;信誉系统新改版&lt;/p&gt;
                &lt;p class=&quot;wz2&quot;&gt;等级奖励一目了然&lt;/p&gt;
              &lt;/div&gt;
              &lt;a href=&quot;&quot; class=&quot;wz3&quot;&gt;查看更多&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;xyxt2&quot;&gt;
            &lt;div class=&quot;xyxt1_bt2&quot;&gt;
              &lt;span class=&quot;sj2&quot;&gt;2019.8.8&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;xyxt_nr2&quot;&gt;
              &lt;span class=&quot;wz4&quot;&gt;信誉积分规则优化&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;xyxt2&quot;&gt;
            &lt;div class=&quot;xyxt1_bt2&quot;&gt;
              &lt;span class=&quot;sj2&quot;&gt;2019.1.9&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;xyxt_nr2&quot;&gt;
              &lt;span class=&quot;wz4&quot;&gt;信誉系统专属皮肤&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;xyxt2&quot;&gt;
            &lt;div class=&quot;xyxt1_bt2&quot;&gt;
              &lt;span class=&quot;sj2&quot;&gt;2018.12.26&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;xyxt_nr2&quot;&gt;
              &lt;span class=&quot;wz4&quot;&gt;信誉积分上线分段奖励&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;xyxt2&quot;&gt;
            &lt;div class=&quot;xyxt1_bt2&quot;&gt;
              &lt;span class=&quot;sj2&quot;&gt;2018.10.31&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;xyxt_nr2&quot;&gt;
              &lt;span class=&quot;wz4&quot;&gt;信誉系统全新改版解读&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;djhj2&quot;&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;div class=&quot;tp1&quot;&gt;
              &lt;/div&gt;
              &lt;a href=&quot;&quot; class=&quot;alzs1&quot;&gt;案例展示&lt;/a&gt;
              &lt;p class=&quot;alzs2&quot;&gt;在队友打野过程中，推红蓝buff&lt;/p&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div class=&quot;tp2&quot;&gt;
              &lt;/div&gt;
              &lt;a href=&quot;&quot; class=&quot;alzs1&quot;&gt;案例展示&lt;/a&gt;
              &lt;p class=&quot;alzs2&quot;&gt;冲到敌方防御塔下后完全不动的张飞&lt;/p&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div class=&quot;tp3&quot;&gt;
              &lt;/div&gt;
              &lt;a href=&quot;&quot; class=&quot;alzs1&quot;&gt;案例展示&lt;/a&gt;
              &lt;p class=&quot;alzs2&quot;&gt;为什么我举报别人挂机，他只扣了一分？&lt;/p&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;a href=&quot;&quot; class=&quot;alzs3&quot;&gt;更多经典案列&lt;/a&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
  name: 'App',
}
&lt;/script&gt;

&lt;style&gt;
@import url(&quot;css/ys6.css&quot;);
@import url(&quot;css/wztb.css&quot;);
&lt;/style&gt;
</code></pre>
<p>然后，在你的主 HTML 文件中引用该 Vue.js 代码文件：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;对局环境&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/ys6.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/wztb.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;

  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>确保将 Vue.js 库文件引用在你的主 HTML 文件中，并将 Vue.js 代码文件命名为 &quot;app.js&quot;。</p>