HTML CSS JavaScript简单案例实现

已于 2022-08-20 10:14:46 修改
阅读量626 收藏 15
点赞数 1
分类专栏： Javaweb学习笔记 文章标签： javascript css html
于 2022-08-20 10:06:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48578877/article/details/126436423
版权

文章目录

简易计算器

calculator.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Calculator</title>
</head>
<style>
    *{ font-size:36px;}
    table{
        background-color: white;
    }

    #t{
        width:480px;
        height:80px;
        text-align: right;
        font-size: 48px;
        background-color: white;
    }
    .number{
        width:120px;
        height:80px;
        background-color:lightskyblue;
        border-radius: 10%;
        margin: 0;
        display: block;
    }
    .signs{
        width:120px;
        height:80px;
        border-radius: 10%;
        background-color:  greenyellow;
        margin: 0;
        display: block;

    }
    .shaw{
        width:120px;
        height:80px;
        border-radius: 10%;
        background-color:  aliceblue;
        margin: 0;
        display: block;

    }
    .equal{
        width:120px;
        height:80px;
        border-radius: 10%;
        background-color:  rgb(235, 199, 235);
        margin: 0;
        display: block;
    }
    .kuohao{
        width: 60px;
        height: 80px;
        float: left;
        align-self: 0;
        border-radius: 10%;
        background-color:  aqua;
    }
    table td,table th{

        border: none ;
    }

</style>

<script>
    //设置标志，用于没有输入时显示0，以及有显示时清空
    var flag=true;
    function func(str){
        var t=document.getElementById("t");
        if(flag){
            //清除没有输入时的0
            t.value="";
        }
        //改变状态，不再清空内容
        flag=false;
        //将之前的内容和输入的内容相加，重新显示
        t.value=t.value+str;

    }
    //回退一个数，相当于撤销
    function backspace(){
        var t=document.getElementById("t");
        t.value=t.value.substr(0,t.value.length-1);
    }

    //清空显示内容
    function AC(){
        var t=document.getElementById("t");
        //显示0
        t.value="0";
        //让下次输入可以清空0
        flag=true;
    }
    //计算结果
    function equals(){
        var t=document.getElementById("t");
        //将字符串转换为逻辑运算
        t.value=eval(t.value);
    }
</script>
<body>
<!--    内边距          外边距        边框        居中-->
<table cellpadding="0" cellspacing="0" border="2px"   align="center" >
    <tr>
        <td colspan="4">
            <input type="text" value="0" id="t" />
        </td>
    </tr>
    <tr>
        <td><input type="button" class="number" value="7"  onClick="func('7')"/></td>
        <td><input type="button" class="number" value="8" onClick="func('8')"/></td>
        <td><input type="button" class="number" value="9" onClick="func('9')"/></td>
        <td><input type="button" class="signs" value="/" onClick="func('/')"/></td>
    </tr>
    <tr>
        <td><input type="button" class="number" value="4" onClick="func('4')"/></td>
        <td><input type="button" class="number" value="5" onClick="func('5')"/></td>
        <td><input type="button" class="number" value="6" onClick="func('6')"/></td>
        <td><input type="button" class="signs" value="*" onClick="func('*')"/></td>

    </tr>
    <tr>
        <td><input type="button" class="number" value="1" onClick="func('1')"/></td>
        <td><input type="button" class="number" value="2" onClick="func('2')"/></td>
        <td><input type="button" class="number" value="3" onClick="func('3')"/></td>
        <td><input type="button" class="signs" value="-" onClick="func('-')"/></td>
    </tr>
    <tr>
        <td><input type="button" class="number" value="0" onClick="func('0')"/></td>
        <td><input type="button" class="shaw" value="." onClick="func('.')"/></td>
        <td><input type="button" class="number" value="00" onClick="func('00')"/></td>
        <td><input type="button" class="signs" value="+" onClick="func('+')"/></td>
    </tr>
    <tr>
        <td>
            <input type="button" class="kuohao" value="(" onClick="func('(')"/>

            <input type="button" class="kuohao" value=")" onClick="func(')')"/>
        </td>
        <td><input type="button"  class="shaw" value="后退" style="float:top" onClick="backspace()"/></td>
        <td>
            <input type="button" class="shaw" value="清除" onClick="AC()"/>
        </td>
        <td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td>

    </tr>
</table>

</body>
</html>

实现效果

在这里插入图片描述

个人简历

resume.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" align="center">
			<tbody>
				<caption><h1>我的简历</h1></caption>
				<tr>
					<td>姓名</td>
					<td><input type="text"></td>
					<td>性别</td>
					<td><input type="text"></td>
				    <td rowspan="4" align="center">
					<img src="https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1660150800&t=c1b0417668bde440f89a235b4b610f05" width="120px" height="150px" alt="头像" title="头像"></td>
				</tr>
				<tr>
					<td>民族</td>
					<td><input type="text"></td>
					<td>籍贯</td>
					<td><input type="text"></td>
				</tr>	
				<tr>
				<td>出生日期</td>
				<td>
					<input type="date">
				</td>
				<td>婚姻状况</td>
				<td>
					<input type="text">
				</td>
			</tr>
			<tr>
				<td>学历</td>
				<td>
					<input type="text">
				</td>
				<td>体重身高</td>
				<td>
					<input type="text">
				</td>
			</tr>
<tr>
				<td>专业</td>
				<td>
					<input type="text">
				</td>
				<td>健康状况</td>
				<td colspan="2">
					<input type="text">
				</td>
			</tr>
			<tr>
				<td>毕业院校</td>
				<td colspan="2">
					<input type="text">
				</td>
				<td>毕业日期</td>
				<td>
					<input type="date">
				</td>
			</tr>
			<tr>
				<td>联系电话</td>
				<td>
					<input type="text">
				</td>
				<td>电子邮箱</td>
				<td colspan="2">
					<input type="text">
				</td>
			</tr>
<tr>
				<td>主修课程</td>
				<td colspan="4">
					<textarea rows="3" cols="60">
						
					</textarea>
				</td>
			</tr>
			<tr>
				<td>个人技能</td>
				<td colspan="4">
					<textarea rows="5" cols="60">
						
					</textarea>
				</td>
			</tr>
			<tr>
				<td>工作经历</td>
				<td colspan="4">
					<textarea rows="5" cols="60">
						
					</textarea>
				</td>
			</tr>
			<tr>
				<td>兴趣爱好</td>
				<td colspan="4">
					<textarea rows="5" cols="60">
						
					</textarea>
				</td>
			</tr>
			<tr>
				<td>自我评价</td>
				<td colspan="4">
					<textarea rows="5" cols="60">
						
					</textarea>
				</td>
			</tr>
			</tbody>
		</table>

	</body>
</html>

实现效果

在这里插入图片描述

登录页面

login.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/login.css" type="text/css">
</head>
<body>
<div class="container">
    <div class="welcome">
        <h1 class="person">用户登录</h1>
    <div class="index">
        <div class="login">
     <input type="text" class="text" placeholder="请输入用户名"><br>
     <input type="password" class="password" placeholder="输入密码"><br>
     <input type="button" class="button1" value="登录"><br>
     <a href="regist2.html" ><input type="button" class="button2" value="注册"></a><br>
            <span class="forge"><a href="forge.html" target="_blank">忘记密码</a></span>
        </div>
    </div>
    </div>
</div>
</body>
</html>

login.css

.body{
     margin:0;
     padding:0;
   
 }
a{
    text-decoration: none;
}
a:hover{
    color:#6effef;
}
input{
    border:none;
    box-shadow: none;
    font-size:15px;
    color:#333333;
    outline: none;  /*鼠标点击是输入框颜色不发生改变*/
}

.text{
    height:40px;
    width:330px;
    border-radius: 10px;
}
.password{
    height:40px;
    width:330px;
    margin-top: 20px;
    border-radius: 10px;
}
.button1{
    height:40px;
    width:330px;
    background-color: #319aec;
    font-size:16px;
    margin-top:15px;
    border-radius: 10px;
    color:white;
}
.button1:hover{
    color:white;
   background-color: #286090;
}
.button2:hover{
    color:white;
    background-color: #286090;
}
.button2{
    height:40px;
    width:330px;
    background-color: #319aec;
    font-size:16px;
    margin-top:15px;
    /*margin-bottom: 100px;*/
    border-radius: 10px;
    color:white;
    display:block;
}
.container{
    background-image: url(../img/1.jpg);
    background-size: 1500px 750px;
    width:1500px;
    height:750px;
    border:1px black solid;
    /*background-repeat: no-repeat;*/
}
.index{
    /*margin-left:800px;*/
    /*margin-top: 200px;*/
    height:320px;
    width:400px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #888;
    background-color: #edeffb;
}
.login{
    margin-left:40px;
    padding-top:40px;
}
.forge{
    display:block;
    text-align: right;
    padding-right:25px;
}
.welcome{
    margin-top:200px;
    margin-left:800px;
}
.person{
    font-size: 30px;
    color:#ffffff;
    line-height: 1em;
    text-align: center;
    font-weight:500;
    margin-right:300px;
}

实现效果

在这里插入图片描述

注册页面

注册（一）

resign.css

.body{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
}
a:hover{
    color:#6effef;
}
input{
    border:none;
    box-shadow: none;
    font-size:15px;
    color:#333333;
    outline: none;  /*鼠标点击是输入框颜色不发生改变*/
}

.text{
    height:40px;
    width:330px;
    border-radius: 10px;
}
.password{
    height:40px;
    width:330px;
    margin-top: 20px;
    border-radius: 10px;
}
.button1{
    height:40px;
    width:330px;
    margin-top: 20px;
    border-radius: 10px;
}
.button2:hover{
    color:white;
    background-color: #286090;
}
.button2{
    height:40px;
    width:330px;
    background-color: #319aec;
    font-size:16px;
    margin-top:15px;
    /*margin-bottom: 100px;*/
    border-radius: 10px;
    color:white;
    display:block;
}
.container{
    background-image: url(../img/bg_header.jpg);
    background-size: 1500px 750px;
    width:1500px;
    height:750px;
    border:1px black solid;
    /*background-repeat: no-repeat;*/
}
.index{
    /*margin-left:800px;*/
    /*margin-top: 200px;*/
    height:320px;
    width:400px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #888;
    background-color: #edeffb;
}
.login{
    margin-left:40px;
    padding-top:40px;
}
.forge{
    display:block;
    text-align: right;
    padding-right:25px;
}
.welcome{
	position: absolute;
    top: 10%;
    right: 35%;
}
.person{
    font-size: 30px;
    color:#ffffff;
    line-height: 1em;
    text-align: center;
    font-weight:500;
    margin-right:300px;
}

resign.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/resign.css" type="text/css">
</head>
<body>
<div class="container">
    <div class="welcome">
        <h1 class="person">用户注册</h1>
        <div class="index">
            <div class="login">
                <input type="text" class="text" placeholder="手机号/QQ号/微信号"><br>
                <input type="password" class="password" placeholder="输入密码"><br>
                <input type="password" class="button1" placeholder="请确保两次输入密码一致"><br>
                <a href="" target="_blank"><input type="button" class="button2" value="注册"></a><br>
                <span class="forge"><a href="login.html" >已有账号，直接登录</a></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

实现效果

在这里插入图片描述

注册（二）

regist2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<link rel="stylesheet" href="css/regs.css" type="text/css">
	</head>
	
	<style type="text/css">
		*{   
            margin: 0;   
            padding: 0;
            
           
        }   
        div{   
            width: 550px;
            height: 550px;
            background-color: #F0F8FF;        }   
        .center-in-center{   
            position: absolute;   
            top: 50%;   
            left: 50%;   
            -webkit-transform: translate(-50%, -50%);   
            -moz-transform: translate(-50%, -50%);   
            -ms-transform: translate(-50%, -50%);   
            -o-transform: translate(-50%, -50%);   
            transform: translate(-50%, -50%);   
        } 
       
	</style>
	<body style="background-image: url(../weekExam/img/bg_header.jpg);">
	
		<div class="center-in-center">
			
		<table >
		
			<tr>
				<td colspan="2" class="head">新用户注册</td>
			</tr>
			
			<tr>
				<td class="td1">
					<font>name:</font>
				</td>
				<td class="td2"><input type="text" />
				</td>
			</tr>
			<tr>
				<td class="td1"><font>pass:</font></td>
				<td class="td2"><input type="password" /></td>
				
			</tr>
			
			<tr>
				<td class="td1"><font>repass:</font></td>
				<td class="td2"><input type="password" /></td>
				
			</tr>
			
			<tr>
				<td class="td1">
				<font>gender:</font>
				</td>
				<td class="td2">
					<input type="radio" name="sex" />男
				<input type="radio" name="sex" />女
				</td>
			</tr>
			
			<tr>
				<td class="td1"><font>爱好:</font></td>
				<td class="td2">
					<input type="checkbox" name="hobby"/>学习
					<input type="checkbox" name="hobby"/>编程
					<input type="checkbox" name="hobby"/>工作
				</td>
				
			</tr>
			<tr>
				<td class="td1">
					<font>birth: </font>
				</td>
				<td class="td2">
					<input type="date" />
				</td>
			</tr>
			<tr>
				<td class="td1">
					<font>salary:</font>
				</td>
				<td class="td2">
					<input type="text" />
				</td>
			</tr>
			<tr>
				<td class="td1"><font>学历：</font></td>
				<td class="td2"><select>
					<option>大专</option>
					<option>本科</option>
					<option>硕士</option>
					<option>博士</option>
				</select></td>
				
			</tr>
			<tr>
			<td class="td1"><font>info:</font></td>
				<td class="td2">
					
					<textarea cols="20" rows="3"></textarea>
				</td>
			</tr>
			<tr>
				<td class="td1" ><input type="reset"></td>
				<td colspan="1" ><input type="submit" name="提交"></td>
			</tr>
		</table>
		</div>
		
	</body>
</html>

rgs.css

table{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	padding: 50px;
	border-color: #FFFFFF;
	
}
.head{
    font-size: 2em;
    position: relative;
    left: auto;
 
}
tr,td{
	
	text-align: center;
	padding: 0px 0;
}
button{
	 padding: 5px;
   margin: 5px;
   font-size: 20px;
   background-color:#008c8c ;
   border-radius: 10px;
   color: #fff;

}
font{
	padding-right: 0;
	
}
input{

	border-collapse: collapse;
	background-color: #fff;
	margin: 10px;
	
}
.td1{
	text-align: right;
	font-family: "楷体";
	font-size: 20px;
}
.td2{
	text-align: left;
	width: 300px;
}

实现效果

在这里插入图片描述

html、css 实现一个漂亮的表格

表格实现

table.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
		<link rel="stylesheet" type="text/css"  href="css/table.css"/>
	</head>
	<body>
		<table >
			<caption>表格标题</caption>
			<thead>
			<tr>
				<th>全选
				<input type="checkbox" name ="count" />
				</th>
				<th>开馆日期</th>
				<th>容纳人数</th>
				<th>开馆时间</th>
				<th>闭馆时间</th>
				<th>预约状态</th>
				<th>操作</th>
			</thead>
			
			<tbody>
			<tr>
				<td><input type="checkbox" name ="count" /></td>
				<td>2202-09-13</td>
				<td>1000</td>
				<td>11:33:14</td>
				<td>11:33:16</td>
				<td>已审核</td>
				<td>
					<a href="table2.html"><img src="img/add1.png"></a>
					<img src="img/up1.png">
					<img src="img/del1.png">
					</td>
			</tr>
			
				<tr>
				<td><input type="checkbox" name ="count" /></td>
				<td>2202-09-13</td>
				<td>1000</td>
				<td>11:33:14</td>
				<td>11:33:16</td>
				<td>已审核</td>
				<td>
					<a href="table2.html"><img src="img/add1.png"></a>
					<img src="img/up1.png">
					<img src="img/del1.png">
					</td></tr>
			
				<tr>
				<td><input type="checkbox" name ="count" /></td>
				<td>2202-09-13</td>
				<td>1000</td>
				<td>11:33:14</td>
				<td>11:33:16</td>
				<td>已审核</td>
				<td>
					<a href="table2.html"><img src="img/add1.png"></a>
					<img src="img/up1.png">
					<img src="img/del1.png">
					</td></tr>
				<tr>
				<td><input type="checkbox" name ="count" /></td>
				<td>2202-09-13</td>
				<td>1000</td>
				<td>11:33:14</td>
				<td>11:33:16</td>
				<td>已审核</td>
				<td>
					<a href="table2.html"><img src="img/add1.png"></a>
					<img src="img/up1.png">
					<img src="img/del1.png">
					</td></tr>
	
			</tbody>
			
	
			
			<tfoot>
				<tr>
					<td colspan="7">
						<button>批量审核</button>
					</td>
				</tr>
			</tfoot>
			
		</table>
	</body>
</html>

table.css

table{
	width: 100%;
	border-collapse: collapse;
}
table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
}
th,td{
	border: 1px solid #999;
	text-align: center;
	padding: 20px 0;
}
table thead tr{
    background-color: #008c8c;
    color: #fff;
}
table tbody tr:nth-child(odd){
    background-color: #eee;
}
table tbody tr:hover{
    background-color: #ccc;
}
table tbody tr td:first-child{
    color: #f40;
}
table tfoot tr td button{
   padding: 5px;
   margin: 5px;
   font-size: 20px;
   background-color:#008c8c ;
   border-radius: 10px;
   color: #fff;

}
img{
	width: 40px;
	height: 45px;
}

实现效果

在这里插入图片描述

table2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详细信息</title>
		<link rel="stylesheet" type="text/css"  href="css/table2.css"/>
	</head>
	
	<style type="text/css">
		*{   
            margin: 0;   
            padding: 0;   
            background-color: #EDEFFB;   
        }   
        div{   
            width: 550px;
            height: 500px;
            background-color: #EDEFFB;
        }   
        .center-in-center{   
            position: absolute;   
            top: 50%;   
            left: 50%;   
            -webkit-transform: translate(-50%, -50%);   
            -moz-transform: translate(-50%, -50%);   
            -ms-transform: translate(-50%, -50%);   
            -o-transform: translate(-50%, -50%);   
            transform: translate(-50%, -50%);   
        } 
       
	</style>
	
	
	
	<body>
		<div class="center-in-center">
			
			<table>
				<tr>
					<td class="td1">
						<font color="red" id="font">*</font>
						开馆日期：</td>
					<td><input type="datetime"   onchange="noNull()"/></td>
				</tr>
				<tr>
					
					<td class="td1">
						<font color="red" id="font">*</font>
						可容纳人数：</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td class="td1">
						<font color="red" id="font">*</font>
						网上预约人数：</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					
					<td class="td1">
						<font color="red" id="font">*</font>
						开馆时间：</td>
					<td><input type="datetime" /></td>
				</tr>
				<tr>
					
					<td class="td1">
						<font color="red" id="font">*</font>
						闭馆时间：</td>
					<td><input type="datetime" /></td>
				</tr>
				
				<tr>
					<td class="td1">
						<font color="red" id="font">*</font> 审核状态：</td>
					<td><input type="text" /></td>
				</tr>
				
					<tr>
					<td class="td1" colspan="2" > <a href="table.html">
					<button  class="btn">返回</button></a>
					</td>
				
				</tr>
				
				
				
			</table>
	
		
			<script language="JavaScript">
			function noNull(){
				
				
			
				var font1 = document.getElementById("font");
				
			
						font1.style.color = "blue";
						font1.innerHTML="";
				 
			}
		</script>
	</div>

	</body>
</html>

table2.css

table{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	background-color: beige;
}
th,td{
	
	
	
}
.td1{
	text-align: right;
	font-family: "宋体";
	font-size: 25px;
}
input{
	width:300px;
	height: 30px;
	border-collapse: collapse;
	background-color: #fff;
}
.btn{
	height:30px;
	width: 80px;
	font-family: "宋体";
	font-size: 20px;
	border-radius: 10px;
	background-color: aliceblue;
}

实现效果

在这里插入图片描述

书城列表页面

main01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/net.css" />
	</head>
	<body>
		<div class="h2">
				<span class="s5">PRODUCT&nbsp;List</span>
			</div>
			
			<div class="div4">
				<table  class="table">
					<tr>
					<th>
						<td><img src="img/9.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
						
					</th>
					
					<th>
						<td><img src="img/10.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/3.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/4.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/5.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					</tr>
					
					
					<tr>
					<th>
						<td><img src="img/6.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/7.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/8.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/9.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					
					<th>
						<td><img src="img/10.png">
						<p>书名:XXX</p>
						<p>售价:XXX</p>
						</td>
					</th>
					</tr>
					
				</table>
			</div>
			</body>
</html>

net.css

.h2{
	height:100%;
	width:100%
}
.top{
	background-color: aliceblue;
}
.s1{
	font: "微软雅黑";
	font-size: 20px;
}
.s2{
	font-size: 18px;
	position: absolute;
	right: 15px;
	top: 8px;
}

.logodiv{

}
.logo{
 width: 100%
 height: 100%
}
.s3{
	color: orange;
	float: right;
	position:relative;
	right: 10px;
	top:25px;
	font-family: "楷体";
	font-size:30px;
	
}
hr {
border:0px;
border-bottom:1px solid black;
} 	
.div2{
	font-family: "微软雅黑";
	font-size: 20px;
	align-content: center;
}
.div3{

}
.s4{
	float: right;
	position: relative;
	right: 10px;
	top: 0px;
}
.h2{
	color: beige;
	height: 50px;
	width: auto;
	background-color: orange;
	border-radius: 10px;
}
.s5{
	position: relative;
	left: 20px;
	top: 13px;
}
.div4{
	height: 100%;
	width: 100%;
}
.bottomdiv{
	background-color: gainsboro;
}

.s6{
	float: right;
	position:relative;
	right: 10px;
	top:25px;
	font-family: "楷体";
	font-size:20px;
	
}
.table{
	width: 100%
	height: 100%;
}
td{
	padding-bottom: 2px;
	padding-left: 50px;
}

实现效果

在这里插入图片描述

简单框架

实现效果

在这里插入图片描述
framSet.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>

<frameset rows="100, *">
  <frame src="top.html" noresize="noresize">
  
  
    <frameset cols="200, *">
        <frame src="left.html" noresize="noresize">
        <frame src="main01.html" name="mainFrame">
    </frameset>
  
</frameset>
</html>

top.html

<!DOCTYPE html>
<html>
	<head>
		<title>top</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			/* css样式 */
			body{
				background-color: #1172B5;
				font-family:"微软雅黑";
				/*margin:0px;
				padding:0px;*/
			}
			h1{
				color:#FFFFFF;
				letter-spacing: 5px;
				text-shadow: 5px 5px 5px #000;
				margin:21px;
			}
		</style>
	</head>
	<body margin="0">
		<h1>商城后台管理系统</h1>		
	</body>
</html>

left.html

<!DOCTYPE html>
<!DOCTYPE HTML>
<html>
	<head>
		<title>left</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			/* css样式 */
			body{
				background-color: #32323A;
				margin: 0px;
				padding:0px;
				font-family:"微软雅黑";
			}
			div#menu_bar{
				font-size: 20px;
				color:#FFFFFF;
			}
			div#menu_bar div{
				border-top: 1px solid #cccccc;
				padding: 5px 0;
				text-indent: 15px;
				letter-spacing: 3px;
			}
			div#menu_bar div:last-child{
				border-bottom: 1px solid #cccccc;
			}
			div#menu_bar div:hover{
				background-color: #797981;
			}
			div#menu_bar div a{
				font-size: 20px;
				color:#FFFFFF;
				text-decoration: none;
			}
		</style>
	</head>
	<body margin="0">
		<div id="menu_bar">
			<div><a href="main01.html" target="mainFrame">> 书城列表</a></div>
			
			
			<div><a href="resume.html" target="mainFrame">> 个人简历</a></div>
			
			<div><a href="calculator.html" target="mainFrame">> 计算器</a></div>
			
			
		</div>		
	</body>
</html>

全选反选功能

selectAll.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例--表格全选</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        .out {
            background-color: white;
        }

        .over {
            background-color: pink;
        }
        div{
            margin-top: 10px;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            //全选
            document.getElementById("checkAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = true;
                }
            }
            //全不选
            document.getElementById("unCheckAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
            }
            //反选
            document.getElementById("reCheck").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            //鼠标经过，颜色变化
            var trs = document.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }

            //选中顶部复选框，全选
            document.getElementById("firstCb").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = this.checked;
                }
            }

        }

    </script>
</head>
<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <td><input type="checkbox" name="cb" id="firstCb"></td>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>
</table>
<div>
    <input type="button" value="全选" id="checkAll">
    <input type="button" value="全不选" id="unCheckAll">
    <input type="button" value="反选" id="reCheck">
</div>


</body>
</html>

案例效果

在这里插入图片描述

selectAll2.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>
 
  <body>
    <input type="checkbox" id="ipt" />全选
    <table>
      <tr id="dx">
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
      </tr>
    </table>
  </body>
  <script>
    var ipt = $("#ipt"); // 全选按钮
    console.log(ipt);
    var dx = $("#dx").querySelectorAll("input"); // 下面所有的复选框
    console.log(dx);
    // 全选按钮
    ipt.onclick = function () {
      // this.checked 它可以得到当前复选框的选中状态 如果是true 就是选中 ，如果是false 就是未选中
      console.log(this.checked);
      for (var i = 0; i < dx.length; i++) {
        // 全选按钮赋值给所有单选按钮
        dx[i].checked = this.checked;
      }
    };
    // 2.下面复选框需要全部选中，上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击都要循环查看下面所有的复选框是否没有选中 如果有一个没被选中的，上面全选就不选中
    for (var i = 0; i < dx.length; i++) {
      dx[i].onclick = function () {
        // flag 控制全选按钮是否选中
        var flag = true;
        // 每次点击下面的复选框都要循环检查这4个小按钮是否被选中
        for (var i = 0; i < dx.length; i++) {
          // 这个取反意思是，如果有一个没被选中就进去把flag变成false，然后flag给全选框，全选框不变
          if (!dx[i].checked) {
            flag = false;
          }
        }
        // 全选框
        ipt.checked = flag;
      };
    }
    function $(e) {
      return document.querySelector(e);
    }
  </script>
</html>
囨誌
关注
专栏目录
HTML+CSS+JS 简单应用小案例
Emperor10的博客
02-22 3020
猜数字 <!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&gt
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
Javascript实现全选反选
风寻凡
06-28 332
Javascript实现全选反选
快速入门 HTML + CSS + JS （附带简单案例）
最新发布
SoyMilk的博客
08-10 1369
HTML是网页内容的标准标记语言，用于定义网页的结构和内容。它由一系列的元素（elements）组成，这些元素可以包含文本、图片、链接以及其他媒体内容。 CSS用于设置HTML元素的样式和布局，它不是编程语言，而是一种样式表语言，用于描述HTML文档的呈现方式。 JavaScript是一种脚本语言，通常用于网页上实现交互功能，也可以用于服务器端（如Node.js）。
html css js 完整案例,html+css+js实例
weixin_31602525的博客
06-04 2658
【实例简介】用html+css+js做的一个简单小网页，可以作为初学者的参考资料。【实例截图】【核心代码】travel└── travel├── css.css├── images│ ├── 0.PNG│ ├── 100.jpg│ ├── 101.jpg│ ├── 102.jpg│ ├── 103.jpg│ ├── 104.png│ ├── 105.jpg│ ├──...
HTML,CSS，JS小实例
韬光养晦
09-19 2066
eg： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #ICtable{ font-family: "微软雅黑"; width: 80%...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
HTML+CSS+JavaScript原生购物网站首页案例
04-14
在构建一个基于HTML+CSS+JavaScript的原生购物网站首页案例时，我们需要理解这三个技术的核心概念以及它们如何协同工作来创建动态、交互式的网页。以下是一些相关知识点的详细说明： 1. **HTML（HyperText Markup ...
基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档
04-09
总的来说，这个基于HTML+CSS+JavaScript实现的QQ音乐界面项目是一个很好的学习资源，它涵盖了前端开发的核心技术，并通过实际案例帮助学习者提升技能。无论是对前端新手还是有一定经验的开发者来说，都可以从中获益...
HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip
07-06
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
157个HTML+CSS+JavaScript前端开发24实例
10-10
157个HTML+CSS+JavaScript前端开发24实例
前端样例（js+css+html）
04-12
现在前后台都不可或缺，该主要是前端页面的样式，js+css+html的组合
HTML、css、js基础实践案例.zip
08-31
网页界面基础案例
css，js，html网页制作实例教程
05-12
网页制作教程网www.zzarea.com提供，更多CSS教程，ps教程，网页设计与网页制作教程请查看www.zzarea.com
HTML + CSS + Javascript 简易示例
cds7777的博客
06-25 1677
HTML简易示例
html，css，js小实例,CSS和JavaScript脚本实例
weixin_39996035的博客
06-18 121
CSS和JavaScript脚本实例导语：CSS样式和JavaScript脚本是应该放在外部文件中呢？还是把它们放在页面本身之内呢?以下的是百分网小编为大家搜集的CSS样式和JavaScript脚本，希望对你有所帮助。如何处理是关于一些性能规则的思维，52CSS.com就这些问题，作一些探讨。在实际应用中使用外部文件可以提高页面速度，因为CSS样式和JavaScript脚本文件都能在客户端产生缓存...
web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-27 2475
web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：简洁大气的新能源情报分析
HTML——css与js案例练习
人若有志,就不会在半坡停止。
09-14 1731
简易ATM机 简易计算器
登录注册页面设计教程：HTML+CSS+JavaScript案例解析
资源摘要信息: "该案例是一个使用HTML、CSS和JavaScript技术栈来实现的一个网页设计项目，主要包含登录和注册两个功能模块。在这个项目中，用户可以通过HTML构建网页的基本结构，利用CSS进行样式的美化和布局调整，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值