web/css_sduty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(CSS): 新增CSS列表、背景、 表格相关属性

Browse Source
This commit is contained in:
zhuyijun 2024-08-27 17:28:42 +08:00
parent c49085fdf6
commit 91620c701b
8 changed files with 217 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
10_CS_常用字体属性/01_字体大小.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_字体大小</title>
<style>
body {
font-size: 20px;
}
.zyjblogs1 {
font-size: 40px;
}
.zyjblogs2 {
font-size: 30px;
}
.zyjblogs3 {
font-size: 20px;
}
.zyjblogs4 {
font-size: 16px;
}
.zyjblogs5 {
font-size: 12px;
}
.zyjblogs6 {
font-size: 6px;
}
</style>
</head>
<body>
<div class="zyjblogs1">zyjblogs1</div>
<div class="zyjblogs2">zyjblogs2</div>
<div class="zyjblogs3">zyjblogs3</div>
<div class="zyjblogs4">zyjblogs4</div>
<div class="zyjblogs5">zyjblogs5</div>
<div class="zyjblogs6">zyjblogs6</div>
<div>zyjblogs7</div>
</body>
</html>

37
10_CS_常用字体属性/02_字体族.html
View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_字体族</title>
<style>
.zyjblogs1 {
font-size: 22px;
font-family: "微软雅黑";
}
.zyjblogs2 {
font-size: 22px;
font-family: "楷体";
}
.zyjblogs3 {
font-size: 22px;
font-family: "宋体";
}
.zyjblogs4 {
font-size: 22px;
font-family: "华文彩云";
}
.zyjblogs5 {
font-size: 22px;
font-family: "YaHei Monaco Hybird","微软雅黑",sans-serif;
}
</style>
</head>
<body>
<div class="zyjblogs1">逝水无痕1 nicemoe</div>
<div class="zyjblogs2">逝水无痕2</div>
<div class="zyjblogs3">逝水无痕3</div>
<div class="zyjblogs4">逝水无痕4</div>
<div class="zyjblogs5">逝水无痕5 nicemoe</div>
</body>
</html>

34
10_CS_常用字体属性/03_字体风格.html
View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_字体风格</title>
<style>
.zyjblogs1 {
font-size: 22px;
font-style: normal;
}
.zyjblogs2 {
font-size: 22px;
}
.zyjblogs3 {
font-size: 22px;
}
.zyjblogs4 {
font-size: 22px;
}
.zyjblogs5 {
font-size: 22px;
font-family: "YaHei Monaco Hybird","微软雅黑",sans-serif;
}
</style>
</head>
<body>
<div class="zyjblogs1">逝水无痕1 nicemoe</div>
<div class="zyjblogs2">逝水无痕2</div>
<div class="zyjblogs3">逝水无痕3</div>
<div class="zyjblogs4">逝水无痕4</div>
<div class="zyjblogs5">逝水无痕5 nicemoe</div>
</body>
</html>

31
12_CSS列表相关属性/01_列表相关属性.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_列表相关属性</title>
<style>
ul {
/* 列表符号 */
/* list-style-type: decimal; */
/* 列表符号的位置 */
/* list-style-position: inside; */
/* 自定义列表符号 */
/* list-style-image: url("../images/arrow-right.png"); */
/* 复合属性 无顺序要求 */
list-style: decimal inside;
}
li {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>《震惊！ 两男子竟然在教室做出这种事！》</li>
<li>《一夜暴富指南》</li>
<li>《给成功男人的五条建议》</li>
</ul>
</body>
</html>

71
13_CSS表格相关属性/01_边框相关的属性.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_边框相关的属性</title>
<style>
table {
/*
border-width: 2px;
border-color: green;
border-style: solid;
*/
/* 建议使用border */
border: 2px green solid;
}
td,th {
border: 2px orange solid;
}
h2,span {
border: 3px red solid;
}
</style>
</head>
<body>
<h2>边框相关的属性，不仅仅时表格能有，其他元素也能用</h2>
<span>你加油吧</span>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>党员</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td>男</td>
<td>团员</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>20</td>
<td>女</td>
<td>团员</td>
</tr>
</tbody>
</table>
</body>
</html>

80
13_CSS表格相关属性/02_表格所独有属性.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_表格所独有属性</title>
<style>
table {
/* 建议使用border */
border: 2px green solid;
/* 宽度 */
width: 500px;
/* 以下表格独有 */
/* 控制表格列块 fixed: 固定的*/
table-layout: fixed;
/* 控制单元格间距 border-spacing生效的前提不使用border-collapse去合并边框*/
border-spacing: 0px;
/* 合并相邻的单元格的边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格 empty-cells生效的前提不使用border-collapse去合并边框*/
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
.number {
width: 50px;
height: 50px;
}
td,th {
border: 2px orange solid;
}
</style>
</head>
<body>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th class="number">序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>党员</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td></td>
<td>团员</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>20</td>
<td>女</td>
<td>团员</td>
</tr>
</tbody>
</table>
</body>
</html>

35
14_CSS背景相关的属性/01_背景相关的属性.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_背景相关的属性</title>
<style>
body {
background-color: gray;
}
div {
width: 400px;
height: 400px;
border: 2px rgb(0, 0, 0) solid;
font-size: 40px;
/* 背景颜色 默认值时透明 transparent */
background-color: skyblue;
/* 背景图片 */
background-image: url(http://cdn.zyjblogs.cn/logo.jpg);
/* 设置背景图片的重复方式 no-repeat 不重复*/
background-repeat: no-repeat;
/* 控制背景图片的位置第一种：关键词 background-position: 水平 垂直 */
/* background-position: center; */
/* 控制背景图片的位置第二种：用具体的像素值 */
/* background-position: 10px 20px; */
/* 复合属性 */
background: skyblue url(http://cdn.zyjblogs.cn/logo.jpg) no-repeat center;
}
</style>
</head>
<body>
<div>你好啊！</div>
</body>
</html>

BIN
images/arrow-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB