WEB阶段_CSS&JS篇(附代码笔记)

(一)、使用DIV+CSS布局首页

1、HTML的块标记



	
		
		
	
	
		
div1
div2
span1 span2

2、CSS的入门



	
		
		
		

		
	
	
		

标题1

标题2

3、CSS的引入方式

WEB阶段_CSS&JS篇(附代码笔记)_第1张图片



	
		
		
		
	
	
		

标题3

4、CSS的选择器



	
		
		
		
	
	
		
DIV1

DIV2

DIV3

DIV4

DIV5

5、CSS的浮动

在浮动的div外套一个设置死宽度和高度的div,就可以让他和别的div分割,但是在这个设置死宽度的div内,其他的div子元素还是要清除浮动才可以!

WEB阶段_CSS&JS篇(附代码笔记)_第2张图片



	
		
		
		
	
	
		
DIV1
DIV2
DIV3
清除浮动,从这
DIV4
div5
div5

6、CSS的其他选择器



	
		
		
		
	
	
		



em是斜体

This is very very important.

This is very very红 really very important.

你好

7、综合:案例一:网站首页的DIV+CSS的布局

【注意】:要设置清除浮动,否则下个div就会到上个div(有设置浮动)的位置。不然就在浮动的div外套一个设置死宽度和高度的div,就可以让他和别的div分割,但是在这个设置死宽度的div内,其他的div子元素还是要清除浮动才可以!



	
		
		首页
		
	
	
		
		
热门商品
最新商品
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2008-2030 老韩商城 版权所有

(二)、使用DIV+CSS布局注册页面

1、综合:案例二:使用DIV+CSS布局注册页面



	
		
		注册页面
		
		
	
	
		
		
  • 首页
  • 首页
  • 首页
  • 首页
用户名
密码
确认密码
性别
籍贯
爱好 篮球 足球 排球 羽毛球 蛋球
邮箱

(三)、使用JS完成注册页面的简单校验

1、首页index



	
		
		首页
		
	
	
		
		
热门商品
最新商品
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2008-2030 老韩商城 版权所有

2、综合:案例三:使用JS完成注册页面的简单校验

WEB阶段_CSS&JS篇(附代码笔记)_第3张图片

 JS:另存为js文件,,那么不需要,若在HTML文件中写JS代码,那么要在此标签内完成

//	alert("hello")
		function checkForm(){
			//获得文本框的值,通过标签的id	
			var username = document.getElementById("username").value;
	//				var val = username.value; //获得文本框的值,通过value是该标签的值,用链式表达式如上
	//				alert(username);
			if(username == ""){
				alert("用户名不能为空");
				return false;//表示form表单那里提交不了
			}
			
			// 校验密码:
			var password = document.getElementById("password").value;
			if(password == ""){
				alert("密码不能为空");
				return false;
			}
			
			// 校验确认密码:
			var repassword = document.getElementById("repassword").value;
			if(repassword != password){
				alert("两次密码输入不一致!");
				return false;
			}
			
			// 校验邮箱:
			var email = document.getElementById("email").value;
			// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
			// str.match("正则表达式");  正则.test("字符串");
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){   //day08截图有解释,//表示开始和结束(作为字符串形式),^表示字符串开始位置,匹配字母数字_-任意个,匹配@符号....
				alert("邮箱格式不正确!");
				return false;
			}
			
		}


	
		
		注册页面
		
		
		
		
	
		
	
	
	
		
		
		
  • 首页
  • 首页
  • 首页
  • 首页
用户名
密码
确认密码
性别
籍贯
爱好 篮球 足球 排球 羽毛球 蛋球
邮箱

你可能感兴趣的:(Java-WEB阶段,前端,css,javascript)