本文共 8739 字，大约阅读时间需要 29 分钟。
今天是综合实训的开始，小组里做了几个项目。
一、艺术字体的展示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>艺术字</title>
<style>
.colorful {
font-size: 50px;
font-weight: bolder;
/* 偶数个 */
/*background-image: linear-gradient(to right, red, yellow, purple, purple, yellow, red, yellow, purple, purple, yellow, red); */
/* 奇数个 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, green, yellow, orange, red, orange, yellow, green, blue, green, yellow, orange, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
animation: bgp 5s infinite linear;
}
@-webkit-keyframes bgp {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
.colorful p {
margin-right: 5px;
text-decoration: none;
padding: 3px 0;
}
</style>
</head>
<body>
<div class="colorful ovh">
<p class="btn" target="_blank">yishuziti艺术字</p>
</div>
</body>
</html>
效果图：
是动态效果
二、表格的全选与反选
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>表格全选与反选</title>
<script>
function checkAll() {
//全选，找到所有的checkbox，全部选中
var checkboxEles = document.getElementsByClassName("c1");
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=true;
}
}
function reverse() {
//反选--找标签，判断
//1.找标签（和上面一样）
var checkboxEles = document.getElementsByClassName('c1');
//2.判断每个选框checkboxEles[i].checked 属性是true还是false
//如果是true改为false；如果是false改为true
// for循环+if判断 实现反选
// for (var i=0;i<checkboxEles.length;i++){
// if (checkboxEles[i].checked=true){
// checkboxEles[i].checked=false;
// }else {
// checkboxEles[i].checked=true;
// }
// }
// 取反，实现反选
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=!checkboxEles[i].checked;
}
}
function cancleAll() {
//取消选中
var checkboxEles = document.getElementsByClassName("c1");
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=false;
}
}
</script>
</head>
<body>
<table border="1">
<thead>
<input type="button" value="全选" οnclick="checkAll()">
<input type="button" value="反选" οnclick="reverse()">
<input type="button" value="取消" οnclick="cancleAll()">
</thead>
<tbody>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>333</td>
<td>333</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
效果图：
三、各种花里胡哨的按钮
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮</title>
<style>
* {
margin: 0;
}
body {
height: 100vh;
justify-content: center;
display: flex;
align-items: center;
background-color: rgba(42, 182, 218, 0.877);
}
#box {
width: 330px;
margin-top: 25px;
}
button {
cursor: pointer;
font-size: 20px;
}
.a1 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
/* overflow: hidden; */
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a2 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a3 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a4 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a5 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a6 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a7 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a8 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a9 {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
line-height: 100px;
text-align: center;
border: 2px solid white;
margin: 10px 0px 0px 5px;
transition: all 0.5s;
}
.a1:hover {
background-color: #fff;
color: #3498db;
}
.a2:hover {
opacity: 0.5;
color: #009999;
}
.a3:hover {
opacity: 0.5;
color: #009999;
border-color: #009999;
transform: scale(2, 2)
}
.a4:hover {
color: #009999;
border-width: 20px;
}
.a5:hover {
transform: rotate(90deg)
}
.a6:hover {
height: 10px;
}
.a7:hover {
transform: scale( 0.5)
}
.a8:hover {
transform: scale(1.5, 0.5)
}
.a9:hover {
transform: skew(40deg, 40deg);
}
</style>
</head>
<body>
<div id="box">
<button href="#" class="a1" target="blank">高亮</button>
<button href="#" class="a2" target="blank">淡出</button>
<button href="#" class="a3" target="blank">放大</button>
<button href="#" class="a4" target="blank">聚焦</button>
<button href="#" class="a5" target="blank">旋转</button>
<button href="#" class="a6" target="blank">展开</button>
<button href="#" class="a7" target="blank">收缩</button>
<button href="#" class="a8" target="blank">挤压</button>
<button href="#" class="a9" target="blank">变形</button>
</div>
</body>
</html>
效果图：
四、下拉菜单
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#span {
text-align: center;
line-height: 50px;
height: 50px;
width: 130px;
}
#test {
display: none;
position: absolute;
left: 8px;
top: 57px;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
background: #fff;
background: rgb(118, 118, 218);
cursor: pointer;
}
.bj {
background: rgb(165, 163, 163);
cursor: pointer;
position: absolute;
left: 150px;
top: 7px;
cursor: pointer;
}
.bj:hover {
background: rgb(118, 118, 218);
}
.wj {
background: rgb(165, 163, 163);
cursor: pointer;
}
.wj:hover {
background: rgb(118, 118, 218);
}
.qt {
background: rgb(165, 163, 163);
}
</style>
<script>
var i = 0;
function display() {
var traget = document.getElementById('test');
if (i == 0) {
traget.style.display = "block";
i = 1;
} else {
traget.style.display = "none";
i = 0;
}
}
</script>
</head>
<body>
<div class="all">
<div id="span" class="wj" οnclick="display()">文件</div>
<div id="test" class="qt">
<div id="span" class="qt">新建</div>
<div id="span" class="qt">打开</div>
<div id="span" class="qt">保存</div>
<div id="span" class="qt">关闭</div>
</div>
<div id="span" class="bj"> 编辑</div>
</div>
</body>
</html>
效果图：
五、图片轮播
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>表格全选与反选</title>
<script>
function checkAll() {
//全选，找到所有的checkbox，全部选中
var checkboxEles = document.getElementsByClassName("c1");
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=true;
}
}
function reverse() {
//反选--找标签，判断
//1.找标签（和上面一样）
var checkboxEles = document.getElementsByClassName('c1');
//2.判断每个选框checkboxEles[i].checked 属性是true还是false
//如果是true改为false；如果是false改为true
// for循环+if判断 实现反选
// for (var i=0;i<checkboxEles.length;i++){
// if (checkboxEles[i].checked=true){
// checkboxEles[i].checked=false;
// }else {
// checkboxEles[i].checked=true;
// }
// }
// 取反，实现反选
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=!checkboxEles[i].checked;
}
}
function cancleAll() {
//取消选中
var checkboxEles = document.getElementsByClassName("c1");
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=false;
}
}
</script>
</head>
<body>
<table border="1">
<thead>
<input type="button" value="全选" οnclick="checkAll()">
<input type="button" value="反选" οnclick="reverse()">
<input type="button" value="取消" οnclick="cancleAll()">
</thead>
<tbody>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>333</td>
<td>333</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
效果图：
详细数据，亲自运行了试试吧。
转载地址：https://blog.csdn.net/yyyyyang525/article/details/117780196 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
