• 第1章 HTML&第2章 CSS-JS

    第1章 HTML

    *HTML：超文本标记语言，决定页面上显示什么内容（html是解释型语言，不是编译型，浏览器是容错的）

    *CSS：决定页面上内容的美观程度

    *JavaScript：页面特效

    1.HTML基础标签

    2. <html>
    3. 	<head>
    4. 		<title>我的网页title>
    5. 		<meta charset="UTF-8">
    6. 	head>
    7. 	<body>
    8. 		hello world!
    9. 		<br>
    10. 		my name is qiaqia!
    11. 		<p>
    12. 		这是第一个段落
    13. 		p>
    14. 		<p>
    15. 		这是第二个段落
    16. 		p>
    17. 		
    18. 		<img src="imgs/girl.jpg" width="104" height="146" alt="这是一张图片">
    19. 		<h1>这是一级标题h1>
    20. 		<h2>这是二级标题h2>
    21. 		<h6>这是6级标题h6>
    22. 		
    23. 		水果列表：
    24. 		<ol type="A" start="3">
    25. 		
    26. 		
    27. 			<li>苹果li>
    28. 			<li>香蕉li>
    29. 			<li>橘子li>
    30. 			<li>猕猴桃li>
    31. 			<li>火龙果li>
    32. 		ol>
    33. 		动物列表：
    34. 		<ul type="square">
    35. 		
    36. 			<li>狗li>
    37. 			<li>猫li>
    38. 			<li>熊li>
    39. 			<li>猪li>
    40. 			<li>兔子li>
    41. 		ul>
    42. 		
    43. 		<h3><u>你u><i>喜欢i>吃<b>苹果b>还是吃<b>香蕉b>？h3>
    44. 		
    45. 		3<sup>2sup>=9；氧气的化学式：O<sub>2sub>
    46. 		
    47. 		<br>5<10,10>5 <br>
    48. 		
    49. 		<span>
    50. 			猴子
    51. 		span>爱吃香蕉
    52. 		
    53. 		
    54. 		
    55. 		<a href="http://www.baidu.com" target="blank">百度一下a>
    56. 		
    57. 		<div>div>
    58. 	body>
    59. html>

     2.HTML中的table标签

    1. <html>
    2. 	<head>
    3. 		<title>表格标签的学习title>
    4. 		<meta charset="UTF-8">
    5. 	head>
    6. 	<body>
    7. 		<table border="1" width="400" height="200" cellspacing="0" cellpadding="10">
    8. 		
    9. 			<tr align="center">
    10. 			
    11. 				<th>姓名th>
    12. 				<th>门派th>
    13. 				<th>绝技th>
    14. 				<th>内功值th>
    15. 			tr>
    16. 			<tr align="center">
    17. 				<td>乔峰td>
    18. 				<td>丐帮td>
    19. 				<td>少林长拳td>
    20. 				<td>5000td>
    21. 			tr>
    22. 			<tr align="center">
    23. 				<td>虚竹td>
    24. 				<td>灵鹫宫td>
    25. 				<td>北冥神功td>
    26. 				<td>15000td>
    27. 			tr>
    28. 			<tr align="center">
    29. 				<td>扫地僧td>
    30. 				<td>少林寺td>
    31. 				<td>七十二绝技td>
    32. 				<td>未知td>
    33. 			tr>
    34. 		table>
    35. 		<hr>
    36. 		<table border="1" width="400" height="200" cellspacing="0" cellpadding="10">
    37. 			<tr align="center">
    38. 				<th>名称th>
    39. 				<th>单价th>
    40. 				<th>数量th>
    41. 				<th>小计th>
    42. 				<th>操作th>
    43. 			tr>
    44. 			<tr align="center">
    45. 				<td>苹果td>
    46. 				<td rowspan="2">5td>
    47. 				
    48. 				<td>20td>
    49. 				<td>100td>
    50. 				<td><img src="imgs/del.jpg" width="35" height="35">td>
    51. 			tr>
    52. 			<tr align="center">
    53. 				<td>菠萝td>
    54. 				<td>15td>
    55. 				<td>45td>
    56. 				<td><img src="imgs/del.jpg" width="35" height="35">td>
    57. 			tr>
    58. 			<tr align="center">
    59. 				<td>西瓜td>
    60. 				<td>6td>
    61. 				<td>6td>
    62. 				<td>36td>
    63. 				<td><img src="imgs/del.jpg" width="35" height="35">td>
    64. 			tr>
    65. 			<tr align="center">
    66. 				<td>总计td>
    67. 				<td colspan="4">181td>
    68. 			tr>
    69. 		table>
    70. 	body>
    71. html>

     3.HTML中的表单标签

    1. <html>
    2. 	<head>
    3. 		<title>表单学习title>
    4. 		<meta charset="UTF-8">
    5. 	head>
    6. 	<body>
    7. 		<form action="chapter1_demo01.html" method="post">
    8. 		
    9. 			昵称：
    10. 			<input type="text" name="nicheng"><br>
    11. 			
    12. 			密码：
    13. 			<input type="password" name="mima"><br>
    14. 			
    15. 			性别：
    16. 			<input type="radio" name="xingbie" value="nan" checked>男
    17. 			<input type="radio" name="xingbie" value="nv">女<br>
    18. 			
    19. 			爱好：
    20. 			<input type="checkbox" name="aihao" value="lanqiu" checked>篮球
    21. 			<input type="checkbox" name="aihao" value="changge">唱歌
    22. 			<input type="checkbox" name="aihao" value="paobu">跑步
    23. 			<input type="checkbox" name="aihao" value="dushu">读书<br>
    24. 			
    25. 			星座：
    26. 			<select name="xingzuo">
    27. 				<option value="baiyang">白羊座option>
    28. 				<option value="shuangzi">双子座option>
    29. 				<option value="tianxie">天蝎座option>
    30. 				<option value="shizi">狮子座option>
    31. 				<option value="jinniu" selected>金牛座option>
    32. 			select><br>
    33. 			
    34. 			备注：
    35. 			<textarea name="beizhu" rows="4" cols="50">textarea><br>
    36. 			
    37. 			<input type="submit" value="注册">
    38. 			
    39. 			<input type="reset" value="重置">
    40. 			<input type="button" value="普通按钮"
    41. 		form>
    42. 	body>
    43. html>

    第2章 CSS-JS

    1.CSS基本语法

    1. <html>
    2. 	<head>
    3. 		<title>CSS学习title>
    4. 		<meta charset="UTF-8">
    5. 		
    6. 		<style type="text/css">
    7. 			/*标签样式*/
    8. 			p{
    9. 				color:red;
    10. 			}
    11. 			/*类样式*/
    12. 			.row2{
    13. 				font-size:40px;
    14. 			}
    15. 			/*id样式*/
    16. 			#p4{
    17. 				background-color:pink;
    18. 				font-size:20px;
    19. 			}
    20. 			/*组合样式，表示div内部的p标签的样式*/
    21. 			div p{
    22. 				color:blue;
    23. 			}
    24. 		style>
    25. 		
    26. 		<link rel="stylesheet" href="css/demo01.css">
    27. 	head>
    28. 	<body>
    29. 		内部样式表：
    30. 		<p>这是第一个段落p>
    31. 		<p class="row2">这是第二个段落p>
    32. 		<p>这是第三个段落p>
    33. 		<p id="p4">这是第四个段落p>
    34. 		<div>
    35. 			<p><span>hellospan>p>
    36. 			<span>wordspan>
    37. 			<p>!!!p>
    38. 		div>
    39. 		<br>
    40. 		嵌入式样式表：
    41. 		<p><span style="font-size:60;color:green;background-color:pink;">taotao<span>p>
    42. 		外部样式表：
    43. 		<div class="out_css_test">测试使用外部样式div>
    44. 	body>
    45. html>

    2.CSS盒子模型

    1. <html>
    2. 	<head>
    3. 		<title>CSS盒子模型title>
    4. 		<meta charset="UTF-8">
    5. 		<style type="text/css">
    6. 			#div1{
    7. 				width: 400px;
    8. 				height: 400px;
    9. 				background-color:rgb(72, 105, 41);
    10. 				/*边框样式*/
    11. 				border-width: 1px;/*边框粗细*/
    12. 				border-color: aqua;/*边框颜色*/
    13. 				border-style: solid;/*边框样式*/
    14. 				border-top: 4px solid black/*上边框*/
    15. 			}
    16. 			#div2{
    17. 				width: 200px;
    18. 				height: 200px;
    19. 				background-color: rgb(163, 199, 231);
    20. 				/*把这个div放在外层div的中心*/
    21. 				margin: 100px;
    22. 				overflow: hidden;/*解决margin-top失效*/
    23. 			}
    24. 			#div3{
    25. 				width: 100px;
    26. 				height: 100px;
    27. 				background-color: rgb(5, 163, 110);
    28. 				/*当前默认位置是在它的父容器左上位置*/
    29. 				/*让div3也居中*/
    30. 				margin: 50px;
    31. 				/*填充*/
    32. 				padding-top: 40px;
    33. 				padding-left: 40px;
    34. 				box-sizing: border-box;/*解决盒子变形*/
    35. 			}
    36. 			#div4{
    37. 				width: 20px;
    38. 				height: 20px;
    39. 				background-color: brown;
    40. 				/*位置由div3填充*/
    41. 			}
    42. 		style>
    43.  
    44. 	head>
    45. 	<body>
    46. 		<div id="div1">
    47. 			<div id="div2">
    48. 				<div id="div3">
    49. 					<div id="div4">div>
    50. 				div>
    51. 			div>
    52. 		div>
    53. 	body>
    54. html>

    3.CSS布局

    1. <html>
    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<style type="text/css">
    5. 			body{/*消除左上方和页面的边距*/
    6. 				margin:0;
    7. 				padding:0;
    8. 			}
    9. 			#div1{
    10. 				width:200px;
    11. 				height:50px;
    12. 				background-color:greenyellow;
    13.  
    14. 				/* 绝对定位，以网页页面左上角为基准 */
    15. 				position:absolute;
    16. 				left:100px;
    17. 				top:100px;
    18. 			}
    19. 			#div2{
    20. 				width:200px;
    21. 				height:50px;
    22. 				background-color:pink;
    23. 				/*相对定位，以父容器为基准*/
    24. 				position:relative;
    25. 				float:left;/*左浮动，边距为20px*/
    26. 				margin-left:20px;
    27. 				margin-top: 450px;
    28. 			}
    29. 			#div3{
    30. 				height:50px;
    31. 				background-color:darkorange;
    32. 			}
    33. 			#div4{
    34. 				width:200px;
    35. 				height:50px;
    36. 				background-color:aqua;
    37. 				float:left;
    38. 			}
    39. 			#div5{
    40. 				width:200px;
    41. 				height:50px;
    42. 				background-color:olivedrab;
    43. 				float:left;
    44. 			}
    45. 			div{
    46. 				position:relative;
    47. 			}
    48. 		style>
    49. 	head>
    50. 	<body>
    51. 		<div id="div1"> div>
    52. 		<div id="div2"> div>
    53. 		<div id="div3">
    54. 			<div id="div4"> div>
    55. 			<div id="div5"> div>
    56. 		div>
    57. 	body>
    58. html>

    4.js基本语法

    *javascript：客户端的一个脚本语言

    *js是一门弱类型语言，变量的数据类型由后面所赋值的类型决定

    1. <html>
    2.     <head>
    3.         <meta charset="utf-8">
    4.         <script>
    5.             var str="hello world";//变量定义
    6.             alert(typeof str)
    7.             var person=new Object();//new对象
    8.             person.id="001";
    9.             person.name="张柏芝";
    10.             alert(person.id+":"+person.name)
    11.             function hello(name){//方法
    12.                 return "hello,"+name;
    13.             }
    14.             hello();//方法调用
    15.             hello("李雷");
    16.             hello("李雷","韩梅梅");
    17.         script>
    18.     head>
    19.     <body>
    20.     body>
    21. html>

    5.js事件

    1. <html>
    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<link rel="stylesheet" href="css/demo05.css">
    5. 		<script type="text/javascript" src="js/demo09.js">script>
    6. 	head>
    7. 	<body>
    8. 		<div id="div_container">
    9. 			<div id="div_fruit_list">
    10. 				<table id="tbl_fruit">
    11. 					<tr>
    12. 						<th class="w20">名称th>
    13. 						<th class="w20">单价th>
    14. 						<th class="w20">数量th>
    15. 						<th class="w20">小计th>
    16. 						<th>操作th>
    17. 					tr>
    18. 					<tr>
    19. 						<td>苹果td>
    20. 						<td>5td>
    21. 						<td>20td>
    22. 						<td>100td>
    23. 						<td><img src="imgs/del.jpg" class="delImg"/>td>
    24. 					tr>
    25. 					<tr>	
    26. 						<td>西瓜td>
    27. 						<td>3td>
    28. 						<td>20td>
    29. 						<td>60td>
    30. 						<td><img src="imgs/del.jpg" class="delImg"/>td>
    31. 					tr>
    32. 					<tr>
    33. 						<td>菠萝td>
    34. 						<td>4td>
    35. 						<td>25td>
    36. 						<td>100td>
    37. 						<td><img src="imgs/del.jpg" class="delImg"/>td>
    38. 					tr>
    39. 					<tr>
    40. 						<td>榴莲td>
    41. 						<td>3td>
    42. 						<td>30td>
    43. 						<td>90td>
    44. 						<td><img src="imgs/del.jpg" class="delImg"/>td>
    45. 					tr>
    46. 					<tr>
    47. 						<td>总计td>
    48. 						<td colspan="4">999td>
    49. 					tr>
    50. 				table>
    51. 				<hr/>
    52. 				<div id="add_fruit_div">
    53. 					<table id="add_fruit_tbl">
    54. 						<tr>
    55. 							<td class="w30">名称：td>
    56. 							<td><input class="input" type='text' id='fname' value="apple"/>td>
    57. 						tr>
    58. 						<tr>
    59. 							<td>单价：td>
    60. 							<td><input class="input" type='text' id='price' value="5"/>td>
    61. 						tr>
    62. 						<tr>
    63. 							<td>数量：td>
    64. 							<td><input class="input" type='text' id='fcount' value="100"/>td>
    65. 						tr>
    66. 						<tr>
    67. 							<th colspan="2">
    68. 								<input type='button' id="addBtn" class="btn" value="添加"/>
    69. 								<input type='button' class="btn" value="重填"/>
    70. 							th>
    71. 						tr>
    72. 					table>
    73. 				div>
    74. 			div>
    75. 		div>
    76. 	body>
    77. html>
    1. function $(id){
    2. 	return document.getElementById(id);
    3. }
    4.  
    5. window.onload=function(){
    6. 	updateZJ();
    7. 	//当页面加载完成，我们需要绑定各种事件
    8. 	//根据id获取到表格
    9. 	var fruitTbl =  $("tbl_fruit");
    10. 	//获取表格中的所有的行
    11. 	var rows = fruitTbl.rows ;
    12. 	for(var i = 1 ; ilength-1 ; i++){
    13. 		var tr = rows[i];
    14. 		trBindEvent(tr);
    15. 	}
    16.  
    17. 	$("addBtn").onclick=addFruit;
    18. }
    19.  
    20. function trBindEvent(tr){
    21. 	//1.绑定鼠标悬浮以及离开时设置背景颜色事件
    22. 		tr.onmouseover=showBGColor;
    23. 		tr.onmouseout=clearBGColor;
    24. 		//获取tr这一行的所有单元格
    25. 		var cells = tr.cells;
    26. 		var priceTD = cells[1];
    27. 		//2.绑定鼠标悬浮在单价单元格变手势的事件
    28. 		priceTD.onmouseover = showHand ;
    29. 		//3.绑定鼠标点击单价单元格的事件
    30. 		priceTD.onclick=editPrice;
    31.  
    32.  
    33. 		//7.绑定删除小图标的点击事件
    34. 		var img = cells[4].firstChild;
    35. 		if(img && img.tagName=="IMG"){
    36. 			//绑定单击事件
    37. 			img.onclick = delFruit ;
    38. 		}
    39. }
    40.  
    41. //添加水果信息
    42. function addFruit(){
    43. 	var fname = $("fname").value;
    44. 	var price = parseInt($("price").value);
    45. 	var fcount = parseInt($("fcount").value);
    46. 	var xj = price * fcount ;
    47.  
    48. 	var fruitTbl =  $("tbl_fruit");
    49. 	var tr = fruitTbl.insertRow(fruitTbl.rows.length-1);
    50. 	var fnameTD = tr.insertCell();
    51. 	fnameTD.innerText = fname ;
    52.  
    53. 	var priceTD = tr.insertCell();
    54. 	priceTD.innerText = price ;
    55.  
    56. 	var fcountTD = tr.insertCell();
    57. 	fcountTD.innerText = fcount ;
    58.  
    59. 	var xjTD = tr.insertCell();
    60. 	xjTD.innerText = xj ;
    61.  
    62. 	var imgTD = tr.insertCell();
    63. 	imgTD.innerHTML = "";
    64.  
    65. 	updateZJ();
    66.  
    67. 	trBindEvent(tr);
    68.  
    69. }
    70.  
    71. function delFruit(){
    72. 	if(event && event.srcElement && event.srcElement.tagName=="IMG"){
    73. 		//alert表示弹出一个对话框，只有确定按钮
    74. 		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
    75. 		if(window.confirm("是否确认删除当前库存记录")){
    76. 			var img = event.srcElement ;
    77. 			var tr = img.parentElement.parentElement ;
    78. 			var fruitTbl = $("tbl_fruit");
    79. 			fruitTbl.deleteRow(tr.rowIndex);
    80.  
    81. 			updateZJ();
    82. 		}
    83. 	}
    84.  
    85. }
    86.  
    87. //当鼠标点击单价单元格时进行价格编辑
    88. function editPrice(){
    89. 	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    90. 		var priceTD = event.srcElement ;
    91. 		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
    92. 		if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
    93. 			//innerText 表示设置或者获取当前节点的内部文本
    94. 			var oldPrice = priceTD.innerText ;
    95. 			//innerHTML 表示设置当前节点的内部HTML
    96. 			priceTD.innerHTML="";
    97. 			// 
    98. 			var input = priceTD.firstChild;
    99. 			if(input.tagName=="INPUT"){
    100. 				input.value = oldPrice ;
    101. 				//选中输入框内部的文本
    102. 				input.select();
    103. 				//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
    104. 				input.onblur=updatePrice ;
    105.  
    106. 				//8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
    107. 				input.onkeydown=ckInput;
    108. 			}
    109. 		}
    110. 		
    111. 	}
    112. }
    113.  
    114. //检验键盘摁下的值的方法
    115. function ckInput(){
    116. 	var kc = event.keyCode ;
    117. 	// 0 ~ 9 : 48~57
    118. 	//backspace : 8
    119. 	//enter : 13
    120. 	//console.log(kc);
    121.  
    122. 	if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){
    123. 		event.returnValue=false;
    124. 	}
    125.  
    126. 	if(kc==13){
    127. 		event.srcElement.blur();
    128. 	}
    129.  
    130. }
    131.  
    132. //更新单价的方法
    133. function updatePrice(){
    134. 	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
    135. 		var input = event.srcElement ;
    136. 		var newPrice = input.value ;
    137. 		//input节点的父节点是td
    138. 		var priceTD = input.parentElement ;
    139. 		priceTD.innerText = newPrice ;
    140.  
    141. 		//5. 更新当前行的小计这一个格子的值
    142. 		//priceTD.parentElement td的父元素是tr
    143. 		updateXJ(priceTD.parentElement);
    144.  
    145. 	}
    146. }
    147.  
    148. //更新指定行的小计
    149. function updateXJ(tr){
    150. 	if(tr && tr.tagName=="TR"){
    151. 		var tds = tr.cells;
    152. 		var price = tds[1].innerText ;
    153. 		var count = tds[2].innerText ;
    154. 		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
    155. 		var xj = parseInt(price) * parseInt(count);
    156. 		tds[3].innerText = xj ;
    157.  
    158. 		//6. 更新总计
    159. 		updateZJ();
    160. 	}
    161.  
    162. }
    163.  
    164. //更新总计
    165. function updateZJ(){
    166. 	var fruitTbl = $("tbl_fruit");
    167. 	var rows = fruitTbl.rows ;
    168. 	var sum = 0 ;
    169. 	for(var i = 1; ilength-1 ; i++){
    170. 		var tr = rows[i];
    171. 		var xj = parseInt(tr.cells[3].innerText);		//NaN    not a number 不是一个数字
    172. 		sum = sum + xj ;
    173. 	}
    174. 	rows[rows.length-1].cells[1].innerText = sum ;
    175. }
    176.  
    177.  
    178. //当鼠标悬浮时，显示背景颜色
    179. function showBGColor(){
    180. 	//event : 当前发生的事件
    181. 	//event.srcElement : 事件源
    182. 	//alert(event.srcElement);
    183. 	//alert(event.srcElement.tagName);	--> TD
    184. 	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    185. 		var td = event.srcElement ;
    186. 		//td.parentElement 表示获取td的父元素 -> TR
    187. 		var tr = td.parentElement ;
    188. 		//如果想要通过js代码设置某节点的样式，则需要加上 .style
    189. 		tr.style.backgroundColor = "navy" ;
    190.  
    191. 		//tr.cells表示获取这个tr中的所有的单元格
    192. 		var tds = tr.cells;
    193. 		for(var i = 0 ; ilength ; i++){
    194. 			tds[i].style.color="white";
    195. 		}
    196. 	}
    197. }
    198.  
    199. //当鼠标离开时，恢复原始样式
    200. function clearBGColor(){
    201. 	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    202. 		var td = event.srcElement ;
    203. 		var tr = td.parentElement ;
    204. 		tr.style.backgroundColor="transparent";
    205. 		var tds = tr.cells;
    206. 		for(var i = 0 ; ilength ; i++){
    207. 			tds[i].style.color="threeddarkshadow";
    208. 		}
    209. 	}
    210. }
    211.  
    212. //当鼠标悬浮在单价单元格时，显示手势
    213. function showHand(){
    214. 	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    215. 		var td = event.srcElement ;
    216. 		//cursor : 光标
    217. 		td.style.cursor="hand";
    218. 	}
    219.  
    220. }
    1. *{
    2. 	color: threeddarkshadow;
    3. }
    4. body{
    5. 	margin:0;
    6. 	padding:0;
    7. 	background-color:#808080;
    8. }
    9. div{
    10. 	position:relative;
    11. 	float:left;
    12. }
    13.  
    14. #div_container{
    15. 	width:80%;
    16. 	height:100%;
    17. 	border:0px solid blue;
    18. 	margin-left:10%;
    19. 	float:left;
    20. 	background-color: honeydew;
    21. 	border-radius:8px;
    22. }
    23. #div_fruit_list{
    24. 	width:100%;
    25. 	border:0px solid red;
    26. }
    27. #tbl_fruit{
    28. 	width:60%;
    29. 	line-height:28px;
    30. 	margin-top:120px;
    31. 	margin-left:20%;
    32. }
    33. #tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
    34. 	border:1px solid gray;
    35. 	border-collapse:collapse;
    36. 	text-align:center;
    37. 	font-size:16px;
    38. 	font-family:"黑体";
    39. 	font-weight:lighter;
    40. 	
    41. }
    42. .w20{
    43. 	width:20%;
    44. }
    45. .delImg{
    46. 	width:24px;
    47. 	height:24px;
    48. }
    49. .btn{
    50. 	border:1px solid lightgray;
    51. 	width:80px;
    52. 	height:24px;
    53. }
    54. #add_fruit_div{
    55. 	border:0px solid red;
    56. 	width:40%;
    57. 	margin-left:30%;
    58. }
    59. #add_fruit_tbl {
    60. 	margin-top:32px;
    61. 	width:80%;
    62. 	margin-left:10%;
    63. 	border-collapse:collapse;
    64. }
    65. #add_fruit_tbl , #add_fruit_tbl tr , #add_fruit_tbl td{
    66. 	border:1px solid lightgray;
    67. 	text-align:center;
    68. 	line-height:28px;
    69. }
    70. .w30{
    71. 	width:30%;
    72. }
    73.  
    74. .input{
    75. 	padding-left:4px;
    76. 	border:1px solid lightgray;
    77. 	width:90%;
    78. }

  • 相关阅读:
    Effective C++ 系列和 C++ Core Guidelines 如何选择？
    sqlalchemy-orm联表查询指定字段
    剑指offer-高质量的代码
    暑假好看的日剧来啦~~
    Dash 2.17版本新特性介绍
    程序设计课程设计
    蒙特卡洛法批量计算期权希腊值
    linux系统维护篇：网络流量查看及带宽测试
    memcpy函数详解 看这一篇就够了-C语言（函数讲解、 使用用法举例、作用）
    第五周 丹巴晨景——跟随光线，渲染照片氛围
  • 原文地址：https://blog.csdn.net/weixin_47687315/article/details/127886428