HTML-Demo

一土~

已于 2024-01-11 04:17:06 修改

阅读量380

点赞数 7

文章标签： html 前端 javascript

于 2023-12-15 20:19:25 首次发布

本文链接：https://blog.csdn.net/Leo_J_A_Smith/article/details/135024280

版权

工商银行电子汇款单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>工商银行电子汇款单</title>
		<style>
			table{
				width: 800px;
				border-collapse: collapse;
			}
			td{
				padding:2px;
				border: 2px solid;
			}
		</style>
	</head>
	<body>
		<h1>工商银行电子汇款单</h1>
		<table>
			<tr>
				<td colspan="2"><strong>回单类型</strong></td>
				<td style="width: 300px;">网上转账汇款</td>
				<td colspan="2" style="font-weight: bold;">指令序号</td>
				<td style="width: 300px;">HQH0000000123456</td>
			</tr>
			<tr>
				<td rowspan="4" style="width: 20px;text-align: center"><b>收款人</b></td>
				<td>户名</td>
				<td>老牟</td>
				<td rowspan="4" style="width: 20px;text-align: center"><b>付款人</b></td>
				<td>户名</td>
				<td>老刘</td>
			</tr>
			<tr>
				<td><b>卡号</b></td>
				<td>000000000001</td>
				<td><b>卡号</b></td>
				<td>000000000002</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>南京</td>
				<td>地区</td>
				<td>杭州</td>
			</tr>
			<tr>
				<td style="font-weight: bold;">网点</td>
				<td>工商江苏南京业务处理中心</td>
				<td style="font-weight: bold;">网点</td>
				<td>江苏徐州业务中心</td>
			</tr>
			<tr>
				<td colspan="2"><b>币种</b></td>
				<td>人民币</td>
				<td colspan="2"><b>钞汇标志</b></td>
				<td><u>钞票</u></td>
			</tr>
			<tr>
				<td colspan="2"><b>金额</b></td>
				<td>1.00元</td>
				<td colspan="2"><b>手续费</b></td>
				<td>0.57元</td>
			</tr>
			<tr>
				<td colspan="2"><b>合计</b></td>
				<td colspan="4">人民币（大写）：壹元整</td>
			</tr>
			<tr>
				<td colspan="2"><b>交易时间</b></td>
				<td><i>2017年6月1日</i></td>
				<td colspan="2"><b>时间戳</b></td>
				<td><i>2017-06-01-13.00.00，00000</i></td>
			</tr>
		</table>
		<p>票据打印时间：2017-06-01 15:00:12</p>
		<p><del>票据打印单位：江苏徐州业务中心</del></p>
		<p>操作员：大曾</p>
</html>

在这里插入图片描述

注册登录页面

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/work2.css" />
		<title></title>
	</head>
	<body>
		<form action="#">
			<table >
				<tr>
					<td colspan="2" class="gr_td" >用户注册</td>
				</tr>
				<tr>
					<td id="right">用户名</td>
					<td>
						<input type="text" name="UserName" maxlength="20" size="15"/>
					</td>
				</tr>
				<tr>
					<td id="right">密码</td>
					<td>
						<input type="password" name="UserPass" maxlength="20" size="15"/>
					</td>
				</tr>
				<tr>
					<td id="right">性别</td>
					<td>
						<input type="radio" value="男" name="sex" checked/>男
						<input type="radio" value="女" name="sex" />女
					</td>
				</tr>
				<tr>
					<td id="right">爱好</td>
					<td>
						<input type="checkbox" value="写作" name="like"/>写作
						<input type="checkbox" value="听音乐" name="like"/>听音乐
						<input type="checkbox" value="体育" name="like"/>体育
					</td>
				</tr>
				<tr>
					<td id="right">省份</td>
					<td>
						<select name="province">
							<option value="shaanxi" selected>陕西省</option>
							<option value="shanxi">山西省</option>
						</select>
					</td>
				</tr>
				<tr>
					<td id="right">自我介绍</td>
					<td>
						<textarea name="intro" cols="25px" rows="5px" placeholder="这家伙什么也没留下"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="gr_td">
						<input type="submit" name="send" value="提交">
						<input type="reset" name="reset" value="重置">
					</td>
			
				</tr>
			</table>
		</form>
	</body>
</html>

css

*{
	font-weight: 0.625rem;
}
textarea{
	overflow-y: scroll;
	resize: none;
}
table{
	border-collapse: collapse;
	background-color: rgb(230,230, 230);
	border: 2px solid white ;
}
tr{
	border: 2px solid white ;
}

.gr_td{
	background-color: rgb(204, 204, 204);
	text-align: center;
}

#right{
	text-align: right;
	width: 70px;
	border: 2px solid white;
}

展示
在这里插入图片描述

仿小米商城页面

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/work3.css" />
		<title></title>
	</head>
	<body>
		<div class="sidebar">
			<ul class="ul_1">
				<li class="org">
					<a href="#">手机<img class="img_1" src="img/右箭头.png"/></a>
					<div class="columm">
						<ul>
							<li>
								<img
									src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c57d3a5e8a2fde79bcffce9d5344c80.png?thumb=1&w=50&h=50&f=webp&q=90">
								<a href="#">Xiaomi MIX系列</a>
							</li>
							<li>
								<img
									src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d989ce63c679d0e9e8cf64397cef588a.png?thumb=1&w=50&h=50&f=webp&q=90">
								<a href="#">Xiaomi 数字系列</a>
							</li>
							<li>
								<img
									src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4ed8c4ca59357db902916b5b9dfb8016.png?thumb=1&w=50&h=50&f=webp&q=90">
								<a href="#">Xiaomi Civi系列</a>
							</li>
							<li>
								<img
									src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/faec0354fdd95311ed8ae9a5e4e4df0e.png?thumb=1&w=50&h=50&f=webp&q=90">
								<a href="#">Redmi K系列</a>
							</li>
							<li>
								<img
									src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a6dfdc51ff25583042e86d9ae2697b3.png?thumb=1&w=50&h=50&f=webp&q=90">
								<a href="#">Redmi Note系列</a>
							</li>
							<li>
								<img
									src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c15a3d1b4e8bf2af17e6b5ad5559cfcb.png?thumb=1&w=50&h=50&f=webp&q=90">
								<a href="#">Redmi 数字系列</a>
							</li>
						</ul>
	</body>
</html>

CSS

ul li {
	list-style: none;
}

.img_1 {
	width: 20px;
	height: 20px;
	float: right;
	padding-top: 11px;
	padding-left: 115px;

}

.sidebar {
	position: absolute;
	height: 460px;
	width: 234px;
	background: rgba(157, 152, 149, 0.6);
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: 45;
}

.sidebar li {
	width: 234px;
	height: 42px;
	line-height: 42px;
}

.sidebar li a {
	float: left;
	font-size: 17px;
	color: #FFFFFF;
	text-decoration: none;
}

.sidebar li:after {
	float: right;
	font-size: 22px;
	color: #FFFFFF;
	margin-right: 20px;
}

.sidebar .ul_1:hover {
	background-color: rgb(255, 103, 0);
}

.sidebar .ul_1 .org:hover .columm {
	display: block;
}

.columm {
	position: absolute;
	top: 0;
	left: 234px;
	background-color: #FFFFFF;
	box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.1);
	display: none;
}

.columm ul {
	float: left;
	width: 260px;
	height: 500px;
}

.columm li {
	width: 265px;
	height: 70px;
	margin-top: 5px;
	margin-bottom: 10px;
	line-height: 70px;
	text-align: center;
}

.columm li img {
	margin: 10px 0 0 10px;
	float: left;
	width: 50px;
	height: 50px;
}

.sidebar .columm li a {
	float: left;
	margin-left: 5px;
	color: #333333;
}

.sidebar .columm li:hover a {
	color: #FF4500;
}

展示
在这里插入图片描述

立体相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>立体相册</title>
		<link rel="stylesheet" href="css/work4.css" />
	</head>
	<body>
		<div class="container">
			<img src="img/1.jpg" alt="" />
			<img src="img/2.jpg" alt="" />
			<img src="img/3.jpg" alt="" />
			<img src="img/4.jpg" alt="" />
			<img src="img/5.jpg" alt="" />
			<img src="img/6.jpg" alt="" />
		</div>
	</body>
</html>

CSS

body {
	perspective: 1000px;
}

@keyframes myAnimation {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(360deg) rotateY(-360deg) rotateZ(180deg);
	}
}

.container {
	margin-top: 300px;
	margin-left: 300px;
	position: relative;
	transform-style: preserve-3d;
	animation-name: myAnimation;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

.container:hover>img:first-child {
	left: 100px;
}

.container:hover>img:nth-child(2) {
	top: 100px;
}

.container:hover>img:nth-child(3) {
	left: -100px;
}

.container:hover>img:nth-child(4) {
	top: -100px;
}

.container:hover>img:nth-child(5) {
	transform: translateZ(300px);
}

.container:hover>img:nth-child(6) {
	transform: translateZ(-100px);
}



.container>img {
	width: 200px;
	height: 200px;
	position: absolute;
	border: 1px solid red;
	transition: 3s;
}

.container>img:first-child {
	left: -200px;
	transform-origin: right;
	transform: rotateY(90deg);
}

.container>img:nth-child(2) {
	top: -200px;
	transform-origin: bottom;
	transform: rotateX(-90deg);
}

.container>img:nth-child(3) {
	left: 200px;
	transform-origin: left;
	transform: rotateY(-90deg)
}

.container>img:nth-child(4) {
	top: 200px;
	transform-origin: top;
	transform: rotateX(90deg);
}


.container>img:nth-child(6) {
	transform: translateZ(200px);
}

炫酷按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/work5.css" />
		<title></title>
	</head>
	<body>
		<button class="button-3d-1">3D Button 1</button>
	</body>
</html>

.button-3d-1{
  position: relative;
  background: orangered;
  border: none;
  color: white;
  padding: 15px 24px;
  font-size: 1.4rem;
  outline: none;
  box-shadow: -6px 6px 0 hsl(16, 100%, 30%);
}

.button-3d-1::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: -6px;
  border: 6px solid transparent;
  border-right: 6px solid hsl(16, 100%, 30%);
  border-left-width: 0px;
}

.button-3d-1::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -6px;
  right: 0;
  border: 6px solid transparent;
  border-top: 6px solid hsl(16, 100%, 30%);
  border-bottom-width: 0px;
}

.button-3d-1:active {
  background: hsl(16, 100%, 40%);
  top: 3px;
  left: -3px;
  box-shadow: -3px 3px 0 hsl(16, 100%, 30%);
}

.button-3d-1:active::before {
  border: 3px solid transparent;
  border-right: 3px solid hsl(16, 100%, 30%);
  border-left-width: 0px;
  left: -3px;
}

.button-3d-1:active::after {
  border: 3px solid transparent;
  border-top: 3px solid hsl(16, 100%, 30%);
  border-bottom-width: 0px;
  bottom: -3px;
}

在这里插入图片描述

js案例

星星点灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			const img_w = 254
			const img_h = 218
			document.body.style.backgroundColor = "#000"
			window.onload = function() {
				document.onclick = function(event) {
					let img = document.createElement("img")
					img.src = "img/0.gif"
					img.style.position = "absolute"
					w = getRandom(20,200)
					img.style.width = w + "px"
					h = w * img_h / img_w
					img.style.height = h + "px"
					img.style.left = (event.pageX - w / 2) + "px"
					img.style.top = (event.pageY - h / 2) + "px"
					document.body.appendChild(img)
				}
			}

			function getRandom(min,max) {
				return min + Math.ceil((max - min) * Math.random())
			}
		</script>
	</body>
</html>

展示：
请添加图片描述

全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="all">全选
		<ul>
			<input type="checkbox" class="all_check">游泳
			<input type="checkbox" class="all_check">篮球
			<input type="checkbox" class="all_check">足球
			<input type="checkbox" class="all_check">排球
		</ul>
		<script>
			let all = document.getElementById("all")
			let input_arr = document.querySelectorAll("ul>input")
			all.onclick = function() {
					if (all.checked == true) {
						for (input of input_arr) {
							input.checked = true
						}
					} else {
						for (input of input_arr) {
							input.checked = false
						}
					}
				}
		</script>
	</body>
</html>