前端三大组件之CSS,三大选择器,游戏网页仿写

回顾

full stack全栈

Web前端三大组件

结构(html) + 样式(css) + 动作/交互(js) --- 》 框架vue,安哥拉

div

常用的标签

扩展标签

列表

ul/ol

  • order------有序号

  • unordered------没序号的黑点

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表标签</title>
    </head>
    <body>
        
        <h1>大学最有用的考试?</h1>
        <ul>
            <!-- 小黑点。 -->
            <li>四级</li>
            <li>六级</li>
        </ul>
        
    </body>
</html>

序号

加勾选框

布局

  1. span:行内插入数据

  2. div:块布局,页面矩形区域--《后续》

H5标签

CSS入门

建包结构

引包的结构(标准规范写法)

当前文件夹 ----- ./

层叠样式表 (Cascading Style Sheets,缩写为 CSS

表(table)

类似Java的全局变量

style

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css入门</title>
        <style>
            img{
                width: 40px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <!-- ./当前 -->
        <img src="./img/lol.jpg" alt="bujianle" />
        <img src="./img/dong.png" alt="???" />
    </body>
</html>

三大选择器

选择标签使用指定的css效果。

标签选择器(派生)

派生类比Java的继承。

根据标签名称选择css操作。

font-size:字体大小

复制代码
标签名称{
    属性:值;
}

span控制部分字体变大。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css-标签选择器</title>
        <style>
            span{
                /* 字体大小 */
                font-size: 28px;
            }
        </style>
    </head>
    <body>
        <p>今天还没写作业,<span>软件工程</span>xxt作业</p>
        <p>四级定个<span>计划</span>吧</p>
    </body>
</html>

id选择器

尚书

标签内加入一个唯一id属性

tips: id不能使用数字开头

id一般第一个不能输数字 第一个输字母后面可以跟数字

eg:a1---ok 111---false

先写下面的id 其次再在上面#选择样式style。

复制代码
#id值{
    属性:值;
}
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style>
            /* #--选择 */
            #cengId{
                font-size: 28px;
                font-family: 华文行楷 ;
            }
            #guifan{
                font-size: 32px;
                font-family: 华文彩云 ;
            }
        </style>
    </head>
    <body>
        <p>
            层叠样式表<span id="cengId">(Cascading Style Sheets,缩写为 CSS)</span>是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
        </p>
        <p>
            CSS 是开放 Web 的核心语言之一,并<span id="guifan">根据 W3C 规范</span>在 Web 浏览器中进行了标准化。以前,CSS 规范的各个部分的开发是同步进行的,这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4;相反,现在的一切都是没有版本号的 CSS。
        </p>
    </body>
</html>

字体font------font-famliy

还可以把span再单独 分/提 出来

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style>
            span{
                font-size: 14px;
            }
            /* #--选择 */
            #cengId{
                
                font-family: 华文行楷 ;
            }
            #guifan{
                
                font-family: 华文彩云 ;
            }
        </style>
    </head>
    <body>
        <p>
            层叠样式表<span id="cengId">(Cascading Style Sheets,缩写为 CSS)</span>是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
        </p>
        <p>
            CSS 是开放 Web 的核心语言之一,并<span id="guifan">根据 W3C 规范</span>在 Web 浏览器中进行了标准化。以前,CSS 规范的各个部分的开发是同步进行的,这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4;相反,现在的一切都是没有版本号的 CSS。
        </p>
    </body>
</html>

[*重点]class(类)选择

定义好css内容,由内容自行选择。----框架 font-weight: 字体粗细。 eg: font-weight: bold; //加粗

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>《重点》class选择器</title>
        <style>
            .my-font{
                font-size: 30px;
            }
            .my-font-family{
                font-family: 华文彩云;
                /* 加粗 */
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>CSS 是一种<span class="my-font my-font-family">描述 HTML 文档</span>样式的语言。
        <span class="my-font my-font-family">CSS</span> 描述应该如何显示 HTML 元素。</p>
    </body>
</html>

应用:height,width, font-

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>poem</title>
        <style>
            #small{
                font-size: 15px;
            }
            #big{
                font-family: 华文行楷;
            }
        </style>
    </head>
    <body>
        <h1><span id="big">将进酒</span></h1>
        <div><img src="./img/libai.jpg" alt="图片不见了" width="50px" height="50px"/><a href="https://www.gushiwen.cn/authorv.aspx?name=%e6%9d%8e%e7%99%bd">(唐)<span id="small">李白</span></a></div>
        <p>
        <span id="big">君不见</span>黄河之水天上来,奔流到海不复回。
        <br /><span id="big">君不见</span>高堂明镜悲白发,朝如青丝暮成雪。
        <br />人生得意须尽欢,莫使金樽空对月。
        <br />天生我材必有用,千金散尽还复来。
        <br />烹羊宰牛且为乐,会须一饮三百杯。
        <br />岑夫子,丹丘生,将进酒,杯莫停。
        <br />与君歌一曲,请君为我倾耳听。(倾耳听 一作:侧耳听)
        <br />钟鼓馔玉不足贵,但愿长醉不愿醒。(不足贵 一作:何足贵;不愿醒 一作:不复醒)
        <br />古来圣贤皆寂寞,惟有饮者留其名。(古来 一作:自古;惟 通:唯)
        <br />陈王昔时宴平乐,斗酒十千恣欢谑。
        <br />主人何为言少钱,径须沽取对君酌。
        <br />五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。
        </p>
    </body>
</html>

CSS常用属性

div为核心,对象/标签/组件/容器。

width宽度

100%铺满

height高度

没有100%

color字体颜色

定义字体颜色

一个好用的调色板 | 颜色选择器 - Codeeeee 在线小工具

background-color:

背景颜色
颜色写法
背景图片

background-image:url('./img/tp.jpg');

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div</title>
        <style>
            #div1 {
                width: 400px;
                height: 300px;
                background-color: lawngreen;
            }
            #div2 {
                width: 100%;
                height: 300px;
                background-color: darkred;
            }
            #bkdiv{
                width: 100%;
                height: 400px;
                /* background-color: beige; */
                background-image: url('./img/bk.jpg');
            }
            img{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="bkdiv">
            <img src="./img/heiwukun.jpg" alt="" />
            <h1>将敬酒</h1>
            <p>李白</p>
        </div>
    </body>
</html>

背景图扩展 repeat

background-repeated:左右扩展

background-size:背景大小

y方向:reated-y

就出现一次,不会重复填充空白区: no-repeat

填满

边框:border

border

边框 顺时针 上右下左 ---四个方向

线条 : 实线/虚线

默认 写法:2px 颜色 soild实线/dashed虚线

border: 宽度 颜色 solid;

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>border边框</title>
        <style>
            #bkDiv{
                width: 50%;
                height: 500px;
                /* 实线 */
                border-top: 2px red solid;
                /* 虚线 */
                border-right: 4px dashed;
                border-left: 2px solid;
                border-bottom :2px solid;
            }
        </style>
    </head>
    <body>
        <div id="bkDiv">
            <div id="bgdiv"></div>
        </div>
    </body>
</html>

应用:创建一个表格

一般写法

去掉黑边框

内部分割线

tfoot

照片

简写写法

格式:

border: 宽度(num.px) 颜色(color) solid(实线); ---四个方向

调整文本的位置text-
text-algin
text-decoration

去掉下划线

居中

完整版:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格-css</title>
        
        <style>
            .tab{
                width: 100%;
                /* border-top: 4px green solid;
                border-right: 4px green solid;
                border-bottom: 4px green solid;
                border-left: 4px green solid; */
                border: 4px green solid;
                border-collapse: collapse;
            }
                
            th{
            /*  border-top: 1px green solid;
                border-right: 1px green solid;
                border-bottom: 1px green solid;
                border-left: 1px green solid; */
                border: 1px green solid;
            }
            td{
        /*      border-top: 1px green solid;
                border-right: 1px green solid;
                border-bottom: 1px green solid;
                border-left: 1px green solid; */
                border: 1px green solid;
                text-align: center;
            }
                
            img{
                width: 100%;
                height: 30px;
            }
            body{
                /* background-image: url('img/bk.jpg'); */
            }
            .myfoot{
                text-align: right;
            }
            a{
                text-decoration: none;
            }
        </style>
        
        
    </head>
    <body>
        <table border="0" class="tab">
            <caption>学生信息表</caption>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>学历</th>
                    <th>成绩</th>
                    <th>照片</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/libai.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            
                
            </tbody>
            <tfoot>
                <tr>
                 <td colspan="8" class="myfoot">
                     <a href="#">上一页</a>
                    <a href="#">1</a> &nbsp;&nbsp;
                    <a href="#">2</a> &nbsp;&nbsp;
                    <a href="#">3</a>&nbsp;&nbsp;
                    <a href="#">...</a>
                     <a href="#">下一页</a>
                 </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

实操:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格-css</title>
        
        <style>
            .title{
                background-color: ;#00ac9a
            }
            .tab{
                width: 100%;
                /* border-top: 4px green solid;
                border-right: 4px green solid;
                border-bottom: 4px green solid;
                border-left: 4px green solid; */
                border: 4px green solid;
                border-collapse: collapse;
                
            }
                
            th{
            /*  border-top: 1px green solid;
                border-right: 1px green solid;
                border-bottom: 1px green solid;
                border-left: 1px green solid; */
                background-color: #00ac9a;
                color: aliceblue;
                border: 1px green solid;
            }
            td{
        /*      border-top: 1px green solid;
                border-right: 1px green solid;
                border-bottom: 1px green solid;
                border-left: 1px green solid; */
                border: 1px #00ac9a solid;
                text-align: center;
            }
                
            img{
                width: 100%;
                height: 30px;;
            }
            body{
                /* background-image: url('img/bk.jpg'); */
            }
            .myfoot{
                text-align: right;
            }
            a{
                text-decoration: none;
            }
        </style>
        
        
    </head>
    <body>
        <table border="0" class="tab">
            <caption class="title">近期开服</caption>
            <thead>
                <tr>
                    <th>游戏名称</th>
                    <th>开服时间</th>
                    <th>服务器名</th>
                    <th>运营商</th>
                    <th>福利</th>
                    <th>官网</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>白蛇传奇</td>
                    <td>2024-11-10 10:00</td>
                    <td>双线1服</td>
                    <td>9377游戏</td>
                    <td>9377平台全满攻速礼包</td>
                    <td>
                        <img src="./img/entry.png" alt="无法进入!" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            <tr>
                    <td>snuts001</td>
                    <td>徐泽伟</td>
                    <td>男</td>
                    <td>18</td>
                    <td>幼师</td>
                    <td>中专</td>
                    <td>60</td>
                    <td>
                        <img src="./img/heiwukun.jpg" alt="个人照片" />
                    </td>
                </tr>
            
                
            </tbody>
            <tfoot>
                <tr>
                 <td colspan="8" class="myfoot">
                     <a href="#">上一页</a>
                    <a href="#">1</a> &nbsp;&nbsp;
                    <a href="#">2</a> &nbsp;&nbsp;
                    <a href="#">3</a>&nbsp;&nbsp;
                    <a href="#">...</a>
                     <a href="#">下一页</a>
                 </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

margin 边距

上 / 左 常用

margin-top

margin-left

居中 -- auto 永远在屏幕中间。

再处理td的宽度

跳转

去下划线

变颜色

按钮

伪类

选择器: hover

选中标签滑动鼠标效果

复制代码
tr:hover{
    background-color:#ededed;
    font-weight:bold;
}

字体

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>仿17173</title>
        <style>
            .tab {
                margin-left: auto;
                margin-right: auto;
                margin-top: 10%;
                width: 80%;
                border-collapse: collapse;
            }
​
            thead {
                background-color: #00ac9a;
            }
​
            th {
                height: 50px;
            
                color: white;
            }
​
            td {
                height: 50px;
                text-align: center;
                border-bottom: 1px #ededed solid;
                color: #666;
            }
​
            a {
                text-decoration: none;
                color: #00ac9a;
            }
​
            .btn {
                width: 150px;
                padding: 5px 5px 5px 5px;
                border: 0px red solid;
                background-color: #ff7800;
                color: white;
            }
            
            tr:hover{
                background-color: #ededed;
                font-weight: bold;
            }
            
            .firstTr{
                background-color: #E9D435 ;
            }
            .hot{
                width: 23px;
                height: 12px;
            }
            
        </style>
    </head>
    <body>
​
        <table class="tab">
            <thead>
                <tr>
                    <th>游戏名称</th>
                    <th>开服时间 </th>
                    <th>服务器名 </th>
                    <th>运营商</th>
                    <th>福利</th>
                    <th>官网</th>
                </tr>
            </thead>
            <tbody>
                <tr class="firstTr">
                    <td>
                        <a href="#">星变<img src='https://ue.yeyoucdn.com/a/kf/index/2017/img/ico-hot.png' class="hot"/> </a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
                
                </tr>
                
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
            </tbody>
​
        </table>
​
    </body>
</html>

去掉中间留白

完整代码:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>仿17173</title>
        <style>
            body{
                background-image: url('./img/bk2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            
            .tab {
                margin-left: auto;
                margin-right: auto;
                
                width: 80%;
                border-collapse: collapse;
            }
​
            thead {
                background-color: #00ac9a;
            }
​
            th {
                height: 50px;
            
                color: white;
            }
​
            td {
                height: 50px;
                text-align: center;
                border-bottom: 1px #ededed solid;
                color: #666;
            }
​
            a {
                text-decoration: none;
                color: #00ac9a;
            }
​
            .btn {
                width: 150px;
                padding: 5px 5px 5px 5px;
                border: 0px red solid;
                background-color: #ff7800;
                color: white;
            }
            
            tr:hover{
                background-color: #ededed;
                font-weight: bold;
            }
            
            .firstTr{
                background-color: #E9D435 ;
            }
            .hot{
                width: 23px;
                height: 12px;
            }
            div{
                width: 100%;
                height: 200px;
                border: 0px red solid ;
                background-image: url('https://ue.yeyoucdn.com//images/game/index/2014/bg-full0.jpg');
                background-size: 100% 100%;
            }
            
        </style>
    </head>
    <body>
        <div>
            
        </div>
​
        <table class="tab">
            <thead>
                <tr>
                    <th>游戏名称</th>
                    <th>开服时间 </th>
                    <th>服务器名 </th>
                    <th>运营商</th>
                    <th>福利</th>
                    <th>官网</th>
                </tr>
            </thead>
            <tbody>
                <tr class="firstTr">
                    <td>
                        <a href="#">星变<img src='https://ue.yeyoucdn.com/a/kf/index/2017/img/ico-hot.png' class="hot"/> </a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
                
                </tr>
                
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
                <tr>
                    <td>
                        <a href="#">梦回江湖</a>
                    </td>
                    <td>
                        2024-11-10 08:00
                    </td>
                    <td>
                        双线115服
                    </td>
                    <td>
                        彩虹游戏
                    </td>
                    <td>
                        VIP专属霸服礼包
                    </td>
                    <td>
                        <a href="#" class="btn">进入游戏</a>
                    </td>
​
                </tr>
​
            </tbody>
​
        </table>
​
    </body>
</html>
相关推荐
狸克先生6 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap21 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish29 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i41 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_44 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali2 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144803 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库