前端三大组件之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>

序号

加勾选框

布局

span：行内插入数据
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>