前端三大组件之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>
<a href="#">2</a>
<a href="#">3</a>
<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>
<a href="#">2</a>
<a href="#">3</a>
<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>