html/css/js/jq

最新推荐文章于 2025-07-10 15:23:16 发布
xuejye
最新推荐文章于 2025-07-10 15:23:16 发布
阅读量354
点赞数 3
CC 4.0 BY-SA版权
分类专栏：前端
本文链接：https://blog.youkuaiyun.com/xuejye/article/details/94206240
前端专栏收录该内容
0 篇文章
订阅专栏
本文详细介绍了使用HTML和CSS进行网页布局的方法，包括快递单的设计、当当网页面的复刻以及动态表格的实现。通过实例展示了如何利用CSS样式进行元素定位、背景设置和响应式设计。同时，深入探讨了动态表格的创建与交互，如添加、删除行及全选功能，为读者提供了丰富的代码示例。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
//快递单
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				
			}
			.total{
				width:1000px;
				height:800px;
				background-color:gray;
				margin:auto;
				/*color:white;*/
				/*float:left;*/
				/*font-size:50px;*/
				
				
				/*text-align:center;
				position:absolute;*/
			}
			.title{
				width:80%;
				height: 10%;
				font-size:50px;
				color: white;
				padding:5% 45% 0%;
				/*position:relative;*/
			}
			.information{
				margin:0% 10%;
				/*padding:0% 10%;*/
				width:800px;
				height:300px;
				
			}
			.but{
				margin:0% 50%;
				width:100px;
				height: 100px;
			}
			input{
				width:800px;
			}
		</style>

	</head>
	<body>
		<div class = "total"> 
			
			<div class = "title">
					快递单
			</div>
			<div class="information">
				<table border ="1" width="100%" height="100%">
					<tr>
						<td>
							<div> 
							<fieldset>
								<legend>基本信息</legend>
								姓名：<input type ="test" /></br>
								电话：<input type ="test"/></br>
								地址：<input type ="test"/></br>
							</fieldset>
							</div>
						</td>
						
					</tr>
				</table>
			</div>
			<div class="but">
				<button color ="white" >
				提交
				</button>
			</div>
			
		</div>
	</body>
</html>

//当当
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title></title>
		<style type="text/css">
			.special{
				background-color: azure;
				width:200px;
				height:50px;
				float: right;
				margin-right:5%;
				margin-top=20px;
				
			}	
			.title{
				background-color: orangered;
				margin:0% 5%;
				width:90%;
				height:50px;
			}	
			.header{
				width=10%;
				margin:left;
				margin-left:5% ;
			}
			.total{
				background-color : gray;
				background-image: url(img/banner.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width:90%;
				height:170px;
				margin:0% 5%;
			}
			.extend{
				margin:50px 5%;
				background-color: white;
				width:90%;
				height:250px;
				
			}	
			.extend1{
				background-image: url(img/book-01.jpg);
				background-repeat: no-repeat;
				width:25%;
				height:250px;
				float:left;
				margin-left: 5%;
			}
			.extend2{
				background-color: white;
				width:25%;
				height:250px;
				float:left;
				margin-left: 0%;
			}
			.extend3{
				background-color: white;
				width:35%;
				height:250px;
				float:left;
				margin-left:5%;
			}
			.extend31{
				background-image: url(img/book-02.jpg);
				width:100%;
				height:50%;
				/*float: left;
				margin-left: 0%;
				margin:0%;*/
				background-repeat: no-repeat;
			}
			.extend1img{
				background-image: url(img/bookNo1.gif);
				width:13%;
				height:20%;
				float:left;
				margin-left:7%;
				background-repeat: no-repeat;
				
			}
			.extend32{
				background-image: url(img/book-03.jpg);
				width:100%;
				height:50%;
				/*float: left;
				margin-left: 0%;*/
				/*margin-top:60%;*/
				background-repeat: no-repeat;
			}
			.extend31text{
				background-color: white;
				width:50%;
				height:100%;
				float: right;
				margin-right:15%;
				margin-top: -10%;
			}
			.extend32text{
				background-color: white;
				width:50%;
				height:100%; 	
				float:right;
				margin-right: 15%;
				margin-top: -10%;
				/*margin-top: ;*/
			}
			.extend31img{
				background-image: url(img/bookNo2.gif);
				width:10%;
				height:30%;
				background-repeat: no-repeat;
			}
			.extend32img{
				background-image: url(img/bookNo3.gif);
				width:10%;
				height:30%;
				background-repeat: no-repeat;
			}
			.link{
				width:10%;
				height:50px;
				color: white;
				float:left;
				margin-left: 0px;
				text-align: center;
				margin-top:12px;
			}
			
		</style>
		<div class = "header">
			<img src="img/logo.jpg" alr="logo"/>
			<div class="special" >
			</div>
		</div>
		
	</head>
	
	<body>
		<div class= "title">
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			<div class = "link">
				童装
			</div>
			
			
		</div>
		<div class = "total">
			<!--<img src="img/banner.png" width="100%" height="100%">--> 
		</div>
		<div class=extend>
			<div class ="extend1">
			<div class="extend1img">
			</div>
			</div>
			<div class ="extend2">
			<p style="color: blue">如何用css背景图片拉伸 以及100% 满屏显示呢？这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 
比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。  
			</p>
			</div>
			<div class ="extend3">
				<div class="extend31">
					<div class="extend31img">
						
					</div>
					<div class="extend31text">
					<p style="color: blue">
						如何用css背景图片拉伸 以及100% 满屏显示呢？这个问题听起来似乎 
					</p>
					</div>
				</div>
				
				<div class="extend32">
					<div class="extend32img">
						
					</div>
					<div class="extend32text">
					<p style="color: blue">
						如何用css背景图片拉伸 以及100% 满屏显示呢？  </p>
					</div>
				</div>
				
			</div>
		</div>
		
	</body>
</html>
//动态表格
<!DOCTYPE html>
<html>
	<head>
		<meta htt-equiv="content-type"	content="text/html" charset="UTF-8"/>
	</head>
		<title></title>
	<body>
		<center> 
			ID:<input type="text" id="id"/>
			NAME:<input type="text" id="name"/>
			PRICE:<input type="text" id="price" />
		</center>
		<hr size="3px">
		<table align="center" border ="1px" cellspacing ="0px" cellpadding = "5px" width = "800px ">
			<thead> 
				<tr>
					<td>
						<input type = "checkbox" onclick = "sel(this)" />全选
					</td>
					<td>ID</td>
					<td>NAME</td>
					<td>PRICE</td>
					<td>OPRATION</td>
				</tr>
			</thead>
			<tbody id = "tb">
				<tr>
					<td>
						<input type ="checkbox" name="tbBox" />
					</td>
					<td>1</td>
					<td>apple</td>
					<td>5</td>
					<td>
						<a href="javascript:void(0)" onclick = "delRow(this)"/>delete</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type ="checkbox" name="tbBox" />
					</td>
					<td>1</td>
					<td>apple</td>
					<td>5</td>
					<td>
						<a href="javascript:void(0)" onclick = "delRow(this)"/>delete</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type ="checkbox" name="tbBox" />
					</td>
					<td>1</td>
					<td>apple</td>
					<td>5</td>
					<td>
						<a href="javascript:void(0)" onclick = "delRow(this)"/>delete</a>
					</td>
				</tr>
			</tbody>
		</table>
		<center> 
			<input type = "button" value="add" onclick="addRow()" />
			<input type = "button" value="delete checked" onclick="delSelect()" />
			<input type = "button" value="~" onclick="reverseSelect()" />
			
		</center>
		<script type = "text/javascript">
		function addRow(){
			var idV=document.getElementById("id").value;
			var nameV=document.getElementById("name").value;
			var priceV=document.getElementById("price").value;
			
			var td1=document.createElement("td");
			td1.innerHTML='<input type="checkbox" name = "tbBox"/>'
			var td2=document.createElement("td");
			td2.innerText=idV;
			var td3=document.createElement("td");
			td3.innerText=nameV;
			var td4=document.createElement("td");
			td4.innerText=priceV;
			var td5=document.createElement("td");
			td5.innerHTML='<a href="javascript:void(0)" onclick = "delRow(this)">delete</a>'
			
			var tr=document.createElement("tr");
			
			
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tr.appendChild(td5);
			
			var tbody = document.getElementById("tb")
			tbody.appendChild(tr)
			
			
			
		}
		
		function sel(checkedAll){
			var boxs = document.getElementsByName("tbBox")
			if(checkedAll.checked){
				for(var i =  0;i<boxs.length;i++){
					boxs[i].checked=true;
				}
			}else{
					for(var i = 0;i<boxs.length;i++){
						boxs[i].checked=!boxs[i].checked
					}
			}
		}
		
		function delSelect(){
			var boxs = document.getElementsByName("tbBox");
			var tbody=document.getElementById("tb");
			for(var i = 0;i<boxs.length;i++){
				if(boxs[i].checked){
					var row=boxs[i].parentNode.parentNode;
					tbody.removeChild(row)
					i--;
				}
				
			}
		}
		
		function reverseSelect(){
			var boxs = document.getElementsByName("tbBox");
			for(var i = 0 ;i < boxs.length; i++){
				boxs[i].checked = !boxs[i].checked
			}
		}
		
		function delRow(row_td_a){
			var tbody=document.getElementById("tb");
			var row =row_td_a.parentNode.parentNode;
			tbody.removeChild(row);
		}
	</script>
	</body>
	
</html>

表单：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title></title>
	</head>
	<body>
		<form action = "http://taobao.com" method="post">
			用户名<input type="text"  placeholder="手机邮箱qq"/> <br />
			密码 <input type = "password" placeholder="密码" /> <br />
			确认密码<input type = "password" placeholder="与密码输入一致" /> <br /> 
			<input type= "submit" />
		</form>
	</body>
	<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	<script type="text/javascript">
		$(function(){
			
			var userflag = false ;
			
			
			$(":text").focus(function(){
				$(this).attr("placeholder","")
			})
			
			$(":text").blur(function(){
				if($(this).val()==""){
					$(this).attr("placeholder","手机邮箱qq")
				}else{
					var value = $(this).val()
					if(value.indexOf('@')!=-1&&value.indexOf('@')<value.indexOf('.')){
						$(":text").next().remove()
						$(":text").after("<span style= 'color:green;'>√<br/></span>")
						userflag=true;
					}else{
						$(":text").next().remove()
						$(":text").after("<span style= 'color:red;'>×<br/></span>")
						userflag=false;
					}
				}
			})
			
			
			$("form").submit(function(){
				if(!userflag){
					return false;
				}else{
					if($(":password:eq(0)").val()==$(":password:eq(1)").val()){
						
						return true;
				}else{
						return false;
				}
					
				}
				
			})
		})
	</script>
</html>

动态表格：
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-size: 150%
			}
			
			td {
				text-align: center
			}
		</style>
	</head>
 
	<body>
		Name:
		<input type="text" id="name" style="margin-right:20px" /> Price:
		<input type="text" id="price" />
		<input type="button" value="add" style="margin-left:20px" />
 
		<hr size="2" />
 
		<p> &nbsp; </p>
		<table border="1" bordercolor="blue" cellspacing="0" width="70%" align="center">
 
			<tr bgcolor="lightblue" align="center">
				<td><b> &nbsp; </b></td>
				<td><b> Id </b></td>
				<td><b> Name </b></td>
				<td><b> Price </b></td>
				<td><b> Count </b></td>
				<td><b> Total_Price </b></td>
				<td><b> Delete </b> </td>
			</tr>
			<tbody id="tbody" align="center">
				<tr>
					<td> <input type="checkbox" /> </td>
					<td>1</td>
					<td>Iphone6</td>
					<td>5000</td>
					<td><input type="button" value="-" /><input type="text" size="2" value="1" /><input type="button" value="+" /></td>
					<td>5000</td>
					<td> <input type="button" value="delete" /> </td>
				</tr>
				<tr>
					<td> <input type="checkbox" /> </td>
					<td>2</td>
					<td>IPad</td>
					<td>2000</td>
					<td><input type="button" value="-" /><input type="text" size="2" value="1" /><input type="button" value="+" /></td>
					<td>2000</td>
					<td> <input type="button" value="delete" /> </td>
				</tr>
				<tr>
					<td> <input type="checkbox" /> </td>
					<td>3</td>
					<td>Apple</td>
					<td>7</td>
					<td><input type="button" value="-" /><input type="text" size="2" value="1" /><input type="button" value="+" /></td>
					<td>7</td>
					<td> <input type="button" value="delete" /> </td>
				</tr>
			</tbody>
		</table>
		<div style="text-align:center">
			<input type="button" value="select all" style="margin-right:20px" />
			<input type="button" value="delete all select" style="margin-right:20px" />
			<input type="button" value="反选" style="margin-right:20px" />
		</div>
	</body>
 
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		
		$(function(){
			//只有JQ对象才能调用JQ方法  
			
			/*添加*/
			$(":button[value=add]").click(function(){
				//alert(parseInt($("#tbody tr:last td:eq(1)").text()));
//				alert(parseInt($("#tbody tr:last td:eq(1)").text()));
				if(isNaN(parseInt($("#tbody tr:last td:eq(1)").text()))){
					var idV = 1;
				}
				else {
//					alert(parseInt($("#tbody tr:last td:eq(1)").text()));
					var idV = parseInt($("#tbody tr:last td:eq(1)").text())+1;
					
				}
					
				var nameV = $("#name").val(); 
				var priceV = $("#price").val();
				
				var td1 = "<td><input type='checkbox'/></td>"
				var td2 = "<td>"+idV+"</td>" 
				var td3 = "<td>"+nameV + "</td>"
				var td4 = "<td>"+priceV + "</td>"
				var td5 = "<td><input type='button' value='-' /><input type='text' size='2' value='1' /><input type='button' value='+' /></td>"
				var td6 = "<td>"+priceV + "</td>"
				var td7 = "<td> <input type='button' value='delete' /> </td>"
				$("#tbody").append("<tr></tr>")
				
				//$("tbody tr:last").append(td1).append(td2)
				$("tbody tr:last").append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7)
			})
			
			$("div :button :last").click(function(){
				$(":checkbox").each(function(index){//打印9*9
					if($(this).prop("checked")){
						$(this).prop("checked",false)
					}else{
						$(this).prop("checked",true)
					}
					
				})
			})
			$(":button[value='+'] ").live('click',function(){
				var num=$(this).prev().val();
				$(this).prev().val(parseInt(num)+1);
				num=$(this).prev().val();
				var parent=$(this).parent();
				var nummid=parent.prev().text();
				parent.next().text(parseInt(nummid)*parseInt(num));
			})
			$(":button[value='-'] ").live('click',function(){
				var num=$(this).next().val();
				$(this).next().val(parseInt(num)-1);
				num=$(this).next().val();
				if(parseInt(num)==0){ 
					var parent=$(this).parent().parent(); 
					parent.remove();
					$(":checkbox").each(function(index){
						var now = $(this).parent().next();
						now.text(parseInt(index)+parseInt("1"));
						});
					
				}
				var parent=$(this).parent();
				var nummid=parent.prev().text();
				parent.next().text(parseInt(nummid)*parseInt(num));
			})
			$(":button[value=delete] ").live('click',function(){  
				var parent=$(this).parent().parent();
				parent.remove();
				$(":checkbox").each(function(index){
					var now = $(this).parent().next();
					now.text(parseInt(index)+parseInt("1"));
				});
				
			})
			$(":button[value='select all'] ").click(function(){ 
				$(":checkbox").each(function(){
					$(this).prop("checked",true);
				})  
			}) 
			$(":button[value='delete all select']").click(function(){
				$(":checkbox").each(function(){
					if($(this).prop("checked")){
						var parent=$(this).parent().parent();
						parent.remove();
					}
				}) 
			})
			$(":text:gt(1)").focus(function(){
				
			})
			$(":text:gt(1)").blur(function(){
				var num=$(this).val();
				if(parseInt(num)>0){
					var parent=$(this).parent();
					var nummid=parent.prev().text();
					parent.next().text(parseInt(nummid)*parseInt(num));
//				alert(parseInt(nummid)*parseInt(num));
				}else{
					var parent=$(this).parent().parent();
						parent.remove();
				}
				
			})
		}) 
		
	</script>
 
</html>