cgb2111-day09

Posted cgblpx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cgb2111-day09相关的知识,希望对你有一定的参考价值。

一,CSS

–1,练习学生管理系统


改造html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
		
		<!-- link在HTML文件中,引入外部的css文件 
			rel的值是固定写法,stylesheet样式表
			href用来指定样式表的位置
		-->
		<link rel="stylesheet" href="student.css"/>
		
	</head>
	<body>
		<!-- 提供表单来提交学生的数据 -->
		<form>
			<h1>学生信息管理系统MIS</h1>
			<table>
				<tr>
					<td>
						姓名: <br />
						<input class="a" type="text" name="user" placeholder="请输入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>
						年龄: <br />
						<input class="a" type="number" name="age" placeholder="请输入年龄.."/>
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框) 
						<input type="radio" name="sex" value="1" checked="checked"/><input type="radio" name="sex" value="0"/></td>
				</tr>
				<tr>
					<td>
						爱好:(多选) 
						<input type="checkbox" name="like" value="ppq" checked="checked"/>乒乓球
						<input type="checkbox" name="like" value="ps"/>爬山
						<input type="checkbox" name="like" value="cg"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框)  
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">研究生</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期:  <br />
						<input type="date" name="intime"/>
					</td>
				</tr>
				<tr>
					<td>
						<button type="submit" id="btn1">保存</button>
						<button type="reset" id="btn2">取消</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

创建css文件,提取css代码

/* 输入框 */
.a
	width: 320px;
	height: 30px;

/* 保存按钮 */
#btn1
	background-color: #0000FF; /* 背景色 */
	color: white; /* 文字颜色 */
	border-color: #0000FF; /* 边框颜色 */
	width: 50px; /* 宽度 */
	height: 30px; /* 高度 */

/* 取消按钮 */
#btn2
	background-color: hotpink; /* 背景色 */
	border-color: hotpink; /* 边框颜色 */
	color: white; /* 文字颜色 */
	width: 50px; /* 宽度 */
	height: 30px; /* 高度 */

–2,练习用户注册

创建HTML网页文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		
		<!-- 在HTML中引入css文件 -->
		<link rel="stylesheet" href="regist.css" />
	</head>
	<body>
		<form method="post" action="#">
			<h3>用户注册</h3>
			<div>
				<input class="a" type="text" placeholder="用户名" name="user"/>
			</div>
			<div>
				<span>支持中文、字母、数字、“-”、“_”的组合,4-20个字符</span>
			</div>
			<div>
				<input class="a" type="password" placeholder="设置密码" name="pwd"/>
			</div>
			<div>
				<span>建议使用数字、字母和符号两种以上的组合,6-20个字符</span>
			</div>
			<div>
				<input class="a" type="password" placeholder="确认密码" name="repwd"/>
			</div>
			<div>
				<span>两次密码输入不一致</span>
			</div>
			<div>
				<input class="a" type="number" placeholder="验证手机" name="tel"/><a href="#">验证邮箱</a>
			</div>
			<div id="readme">
				<input type="checkbox"/>
				我已阅读并同意
				<a href="#">《京淘用户注册协议》</a>
			</div>
			<div>
				<button type="submit">立即注册</button>
			</div>
		</form>
	</body>
</html>


创建css文件

/* 输入框 */
.a
	width: 350px;/* 宽度 */
	height: 30px;/* 高度 */
	padding: 5px;/* 内边距 */

/* 按钮 */
button
	width: 360px;/* 宽度 */
	height: 40px;/* 高度 */
	background-color: red;/* 背景色 */
	border-color: red;/* 边框颜色 */
	color: white;/* 文字颜色 */
	font-size: 20px;/* 文字字号 */

/* 提示文字 */
span
	font-size: 5px;/* 字号变小 */
	color: gray;/* 灰色的字 */
	padding: 20px; /* 内边距 */

/* 设置用户注册 */
h3
	/*text-align: center;文本居中 */
	padding-left: 130px;/* 左边距 */

/* 修饰我已阅读 */
#readme
	padding: 15px;/* 左边距 */


二,javascript

–1,概述

简称是JS,用来增强网页的动态交互性.
是一种基于对象和事件驱动的脚本语言
1,基于对象: js也可以像java一样,使用对象.
2,事件驱动: 所有js的代码,都是通过事件来驱动执行的.事件就是你在网页中常见的动作(单击.双…)
3,脚本语言: 是指在特殊的环境才能运行.js就是在浏览器中执行的

–2,特点

1, js是一门直译式的语言,不需要像java一样的编译过程.
2, js是弱类型的语言,底层会自动类型转换.
3, 增强了用户的交互性, 跨平台 .
4, js代码出现的位置: 行内JS, 内部JS, 外部JS

–3,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js</title>
	</head>
	<body>
		<!-- 1, js可以出现的位置:行内js,内部js,外部js -->
		<!-- 事件驱动: js代码要通过一些事件(动作)来触发,常见有单击,双击 -->
		
		<!-- 单击时弹框 -->
		<div onclick="alert('欢迎来到div')">我是div</div>
		<!-- 双击时弹框 -->
		<span ondblclick="alert('欢迎来到span')">我是span</span>
		<!-- 鼠标进入/移出 时弹框 -->
		<div onmouseenter="alert('欢迎进入div2')">我是div2</div>
		<div onmouseleave="alert('您离开了div3')">我是div3</div>
	</body>
</html>

三,JS语法

–1,数据类型 & 变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js语法</title>
		
		<!-- 1,js的出现位置:内部JS -->
		<script>
			//练习变量:交换变量的值(收尾相连)
			var x = 1 ;
			var y = 2 ;
			var t = y ;
				y = x ;
				x = t;
			alert(x+","+y);
			//2,JS的变量定义,JS是弱类型的语言,通过var定义变量
			var a = 1;
			a = 1.8;
			alert(a);//number
			a = true ;
			a = "你好" ;
			alert(a);//string
			
			// 1,JS的数据类型: 基础(number/string/boolean/null/undefined) + 复杂
			alert('你好');//string
			alert("hello");//string
			alert(2.4+3.6);//6,number
			alert(false);//boolean
			alert(true);//boolean
			alert(null);//null
			alert(undefined);//undefined
		</script>
	</head>
	<body>
	</body>
</html>

–2,运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语法</title>
		
		<script>
			//1, js运算符
			//三元运算符:
			//获取两个数里的大值
			var c = 10;
			var d = 5;
			var e = c > d ? c : d;
			alert(e);
			//比较运算符:== !=  === !==
			alert(1 == 1);//true
			alert(1 != 1);//false
			alert(1 == '1');//true, 只比值
			alert(1 === '1');//false, 比较类型和值
			//赋值运算符: += -= *= /=
			var b = 2;
			b += 2; //b=b+2
			alert(b);//4
			//算术运算符: / % ++ --
			var a = 12;
			alert(a / 5);  //取商, 2.4
			alert(a % 5);  //取余, 2
			// alert(a++);//12,顺便把a从12变成13
			// alert(++a);//14
			// a = a++; //把右侧a++整体的运算结果,重新赋值给a
			// alert(a);//12
			a = a+++a;//自增 自减 的优先级高 a++ +a ;
			alert(a);//12 + 13 = 25
		</script>
	</head>
	<body>
	</body>
</html>

四,JS语句

–1,分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS语句</title>
		<script>
			//2, 分支结构 switch...case
				//练习: 判断今天星期几
				var day = 1;
				switch(day)
					//在java里,switch参数的数据类型只能有
					//byte int char short String
					case 1 : alert('今天星期一'); break;
					case 2 : cgb2111-day04

cgb2111-day04

cgb2111-day04

cgb2111-day03

cgb2111-day03

cgb2111-day03