第2章 WEB02-CSS&JS篇【课件+代码】

今日任务

  • 使用CSS完成网站首页的美化
  • 使用CSS完成网站注册页面的美化
  • 使用JS完成简单的数据校验
  • 使用JS完成图片轮播效果

教学导航

教学目标了解CSS的概念了解CSS的引入方式了解CSS的基本语法和常用的选择器了解CSS的盒子模型,悬浮和定位.了解JS的概念掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互.
教学方法案例驱动法

1.1 上次课内容回顾

HTML:

HTML:超文本标记语言

HTML的字体标签:

<font>标签

* 标签内部 属性名称=”属性的值”

* size:控制字体的大小.从1-7

* color:控制字体颜色.使用英文单词,使用#16进制数的形式来进行设置。

* face:字体

HTML的排版标签:

<h>标签:标题标签

<p>标签:段落标签

<b>标签:加粗. 等价于<strong>

<i>标签:斜体.

<u>标签:下划线.

<br/>标签:换行

<hr/>标签:水平线标签

HTML的图片标签:

<img/>标签:图片标签。

  •  src:图片的路径
    • 图片是在上一级目录 使用../
    • 图片在同一级目录 使用./ 或者 直接写文件名
    • 图片在下一级目录 使用下一级路径/文件名
  • width:图片的宽度
  • height:图片的高度
  • alt:提示信息

HTML的列表标签:

无序列表

  • <ul>
    • type属性:
    • 子标签<li>

有序列表

  • <ol>
    • type属性:显示属性还是英文 取值:1,a,A,i,I
    • start属性:从哪开始

HTML的超链接的标签:

<a>标签:

  • href :链接路径
  • target :打开的方式   _self  _blank  _parent

HTML的表格标签:

<table>

  • border属性
  • background属性
  • width:宽度
  • height:高度
  • align:水平位置
    • <tr>
    • <td>
      • rowspan:跨行
      • colspan:跨列

HTML的表单标签:

<form>标签:

  • action:提交路径
  • method:提交的方式
    • get和post

表单标签:

文本框:<input type=”text” name=”” />

密码框:<input type=”password” name=””/>

单选按钮:<input type=”radio” name=”sex” value=””/>男

复选框:<input type=”checkbox” name=”hobby” valu=””/>

提交按钮:<input type=”submit” value=””/>

重置按钮:<input type=”reset” value=””/>

普通按钮:<input type=”button” value=””/>

文件上传:<input type=”file” name=””/>

隐藏字段:<input type=”hidden” name=””/>

下拉列表:<select name=””><option value=””></option></select>

文本区:<textarea name=”” rows=”” cols=””></textarea>

HTML的框架页面:

<frameset rows=”” cols=””>

<frame src=”” name=””/>

1.2 使用CSS对首页进行重新布局

1.2.1 需求分析

在上次的HTML课程中已经使用表格标签对页面进行布局显示了,但是表格标签有一定的缺陷。实际开发中都会采用DIV+CSS的方式进行布局。使用DIV+CSS重新布局网站的首页:

第2章 WEB02-CSS&JS篇【课件+代码】

1.2.2 分析

1.2.2.1 技术分析

【HTML的DIV标签】

HTML中有两个块标记:

  • <div></div>
  • <span></span>

【CSS的概述】

  • 什么是CSS:

Cascading Style Sheets 层叠样式表.

  • CSS的作用:

CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.

  • CSS的使用:
语法:
	选择器{属性1:属性值;属性2:属性值;..}
		<style>
			h2{
				color:red;
				font-size:100px;
			}
		</style>

【CSS的引入方式】

  • 行内样式:

直接在html的元素上使用style的属性编写CSS:

<span style="color:#00FF00 ;font-size: 100px;">黑马训练营</span>
  • 内部样式:

在html的<head>标签中使用<style>标签来定义CSS

<style>
	span{
		color:blue;
		font-size: 200px;
	}
</style>
  • 外部样式:

将CSS定义成一个.css的文件,在html中将该文件引入到html中

<link href="style.css" rel="stylesheet" type="text/css"/>

【CSS的基本选择器】

CSS的选择器为了更能精确的找个某个元素来设计的

  • 元素选择器:
div{
	color: red;
}
  • id选择器:
		<style>
			#d1{
				color: red;
			}
		</style>

<div id="d1">王凤</div>
***** id通常都是唯一的.
  • 类选择器:

HTML:

<div class="d1">王守义</div>
	<div>王凤</div>
	<div class="d1">王如花</div>

CSS:

<style>
	.d1{
	    color: green;
	}
</style>

【CSS的悬浮】

  • CSS的float属性:

float属性中常用取值:

  • Left :悬浮到左边
  • Right :悬浮到右边

使用clear属性清除浮动:

  • Left :清除左侧浮动
  • Right :清除右侧浮动
  • Both :清除两侧的浮动

1.2.2.2 步骤分析

  • 创建一个外层的div元素
  • 在div中创建代表每块区域div
  • 在每块div引入需要的元素的内容

1.2.3 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站的首页</title>
		<link href="../css/main.css" rel="stylesheet" type="text/css" />
		<style>
			
			.product{
				border:1px solid gray;
				width:16%;
				height:250px;
				float:left;
			}
		</style>
	</head>
	<body>
		<!-- 整体的DIV -->
		<div>
			<!-- LOGO部分的DIV -->
			<div>
				<!--分成三个小的DIV-->
				<div class="top">
					<img src="../img/logo2.png" height="48"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="48" />
				</div>
				<div class="top" style="padding-top: 10px;height: 40px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<!--清除浮动-->
			<div class="clear"></div>
			<!-- 菜单部分的DIV-->
			<div class="menu">
				<ul>
					<li style="display: inline;">首页</li>
					<li style="display: inline;">电脑办公</li>
					<li style="display: inline;">手机数码</li>
					<li style="display: inline;">鞋靴箱包</li>
				</ul>
			</div>
			<!-- 图片轮播的DIV -->
			<div style="width: 99%;">
				<img src="../img/1.jpg" width="100%">
			</div>
			<!-- 商品展示的DIV -->
			<div style="border:1px solid green;width: 99%;">
				<!--标题的DIV-->
				<div><h2>最新商品<img src="../img/title2.jpg"></h2></div>
				<!-- 左侧的广告位的DIV -->
				<div style="width:15%;height:500px;border: 1px solid red;float:left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!-- 右侧的商品显示的DIV -->
				<div style="border:1px solid blue;width:84%;float: left;">
					<div>
						<!-- 横向广告部分 -->
						<div style="border:1px solid blue;width:50%;height: 250px;float:left;">
							<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
						</div>
						<!--商品的DIV-->
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div><div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						
						
					</div>
				</div>
			</div>
			<div style="width:99%;">
				<img src="../products/hao/ad.jpg" width="100%"/>
			</div>
			<div style="border:1px solid green;width: 99%;">
				<!--标题的DIV-->
				<div><h2>最新商品<img src="../img/title2.jpg"></h2></div>
				<!-- 左侧的广告位的DIV -->
				<div style="width:15%;height:500px;border: 1px solid red;float:left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!-- 右侧的商品显示的DIV -->
				<div style="border:1px solid blue;width:84%;float: left;">
					<div>
						<!-- 横向广告部分 -->
						<div style="border:1px solid blue;width:50%;height: 250px;float:left;">
							<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
						</div>
						<!--商品的DIV-->
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						<div class="product">
							<img src="../products/hao/small04.jpg"/>
							<p>电饭煲</p>
							<p style="color:red;">¥299</p>
						</div>
						
						
						
					</div>
				</div>
			</div>
			<div>
				<img src="../img/footer.jpg" />
			</div>
			<div align="center">
				<a href="../案例一:网站信息页面显示/网站信息页面显示.html">关于我们</a>
				    <a href="">联系我们</a>
				    <a href="">招贤纳士</a>
				    <a href="">法律声明</a>
				    <a href="link.html">友情链接</a>
				    <a href="">支付方式</a>
				    <a href="">配送方式</a>
				    <a href="">服务声明</a>
				    <a href="">广告声明</a>
					<br/>
					Copyright © 2005-2016 传智商城 版权所有 
			</div>
		</div>
	</body>
</html>

1.2.4 扩展

1.2.4.1 CSS的其他的选择器:

【CSS的其他选择器】

  • 属性选择器

选中带有某个属性的元素:

		<style>
			input[type="text"]{
				background-color: yellow;
			}
			
			input[type="password"]{
				background-color: green;
			}
		</style>
  • 层次选择器:

父选择器 子选择器 {  }

		<style>
			#d1 div{
				color: red;
			}
		</style>
  • 伪类选择器:

主要用来描述超链接

<style>
			a:link{
				color:blue;
				font-size: 40px;
			}
			a:visited{
				color: red;
				font-size: 40px;
			}
			a:hover{
				color: green;
				font-size: 100px;
			}
			a:active{
				color: brown;
				font-size: 200px;
			}
		</style>

1.3 使用DIV+CSS对注册页面进行布局

1.3.1 需求分析

使用DIV+CSS对注册页面进行布局。更加灵活!

第2章 WEB02-CSS&JS篇【课件+代码】

1.3.2 分析

1.3.2.1 技术分析

【CSS的盒子模型】

第2章 WEB02-CSS&JS篇【课件+代码】

设置盒子的外边距:margin

  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left

设置盒子的内边距:padding

  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left

1.3.2.2 步骤分析:

  • 创建一个整体div元素
  • 在里面创建5个分别代表某个部分的DIV
  • 在每个部分中完成单独内容的显示

1.3.3 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../css/main.css" rel="stylesheet" type="text/css" />
		<style>
			.content{
				border:1px solid blue;
				height: 600px;
				background: url(../img/regist_bg.jpg);
				margin: 10px 0px;
			}
		</style>
	</head>
	<body>
		<!-- 创建一个整体的DIV -->
		<div>
			<div>
				<div class="top">
					<img src="../img/logo2.png" height="48"/>
				</div>
				<div class="top">
					<img src="../img/header.png"  height="48"/>
				</div>
				<div class="top" style="padding-top: 10px;height: 40px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<!--清除浮动-->
			<div class="clear"></div>
			<!-- 菜单部分的DIV-->
			<div class="menu">
				<ul>
					<li style="display: inline;">首页</li>
					<li style="display: inline;">电脑办公</li>
					<li style="display: inline;">手机数码</li>
					<li style="display: inline;">鞋靴箱包</li>
				</ul>
			</div>
			
			<div class="content">
				<div style="position: absolute;left:400px;top:150px;background-color: white;border:5px solid gray;width: 700px;height: 500px;">
					<h3>用户注册</h3>
					<form>
											<table width="100%" height="100%" border="0" align="center" cellspacing="10">
												<tr>
													<td>用户名</td>
													<td><input type="text" name="username" placeholder="请输入用户名"/></td>
												</tr>
												<tr>
													<td>密码</td>
													<td><input type="password" name="password"/></td>
												</tr>
												<tr>
													<td>确认密码</td>
													<td><input type="password" name="repassword"/></td>
												</tr>
												<tr>
													<td>性别</td>
													<td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
												</tr>
												<tr>
													<td>Email</td>
													<td><input type="text" name="email"/></td>
												</tr>
												<tr>
													<td>姓名</td>
													<td><input type="text" name="name"/></td>
												</tr>
												<tr>
													<td>生日</td>
													<td><input type="text" name="birthday"/></td>
												</tr>
												<tr>
													<td>验证码</td>
													<td><input type="text" name="checkcode" size="10"/></td>
												</tr>
												<tr>
													<td colspan="2"><input type="submit" value="注册" style="background: url(../img/register.gif);"/></td>
												</tr>
											</table>
											</form>
				</div>
			</div >
			
			<div>
				<img src="../img/footer.jpg" />
			</div>
			<div align="center">
				<a href="../案例一:网站信息页面显示/网站信息页面显示.html">关于我们</a>
				    <a href="">联系我们</a>
				    <a href="">招贤纳士</a>
				    <a href="">法律声明</a>
				    <a href="link.html">友情链接</a>
				    <a href="">支付方式</a>
				    <a href="">配送方式</a>
				    <a href="">服务声明</a>
				    <a href="">广告声明</a>
					<br/>
					Copyright © 2005-2016 传智商城 版权所有 
			</div>
		</div>
	</body>
</html>

1.3.4 扩展

1.3.4.1 扩展属性

【列表属性】

ul li{
	list-style-image: url(../img/reg4.gif);
}

【颜色取值】

  • 英文取值:

color:red

  • 十六进制数:

color:#ff0000

  • Rgb方式:

color:rgb(255,0,0)

1.4 使用JS完成简单的数据的校验

1.4.1 需求分析

使用JS完成对注册页面进行简单的数据的非空校验。在提交表单的时候,不可以出现用户名,密码是空的情况。

1.4.2 分析

1.4.2.1 技术分析

HTML骨架,CSS美化,JS可以使页面动起来。

【JavaScript的概述】

  • 什么是JavaScript:

运行在浏览器端的脚本语言.

第2章 WEB02-CSS&JS篇【课件+代码】

JS的组成:

第2章 WEB02-CSS&JS篇【课件+代码】

ECMAScript:语法,语句.

BOM:浏览器对象

DOM:Document Object Model 操作文档中的元素和内容.

  • 在哪些地方使用JS

JS增加用户和网站交互

  • 如何使用JS

语法:

  • 区分大小写
  • 语法要求不是特别严格
  • 变量是弱变量类型
    • var i = 3;
    • var s = “aa”;
  • JS代码需要写在<script></script>

【JS的数据类型】

  • 原始类型:
  • string
  • number
  • boolean
  • undefined
  • null
  • 引用类型:

基于对象而不是面向对象.内置对象.对象类型的默认值是null.

【JS的运算符和语句】

运算符与Java中一致.

  • 全等于 === :类型和值都一致返回true

语句与Java一致:

【JS的输出】

  • alert()

向页面中弹出一个提示框!!

  • innerHTML:

向页面的某个元素中写一段内容,将原有的东西覆盖

  • document.write();

向页面中写内容

1.4.2.2 步骤分析

  • JS都是由事件触发的,第一步确定事件。

on…

  • JS的事件都会触发一个函数,编写一个函数。
  • JS获得操作的对象的元素。

document.getElementById(“”);

  • JS修改这个元素的属性或值。

1.4.3 代码实现:

		<script>
			// 第一步确定事件:onsubmit
			// 第二步编写触发函数:
			function checkForm(){
				// 第三步:通过ID获得元素
				var uValue = document.getElementById("username").value;
				// alert(uValue);
				if(uValue == ""){
					alert("用户名不能为空!");
					return false;
				}
				
				// 校验密码
				var pValue = document.getElementById("password").value;
				if(pValue == ""){
					alert("密码不能为空!");
					return false;
				}
				
				// 校验确认密码
				var rpValue = document.getElementById("repassword").value;
				if(rpValue != pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				
				// 校验邮箱:使用正则表达式:
				var eValue = document.getElementById("email").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}
			}
		</script>

1.5 使用JS完成首页上轮播图片效果

1.5.1 需求分析

在网站的首页上图片的轮播,现在页面中图片是静止的。让图片隔5秒自动切换。

第2章 WEB02-CSS&JS篇【课件+代码】

1.5.2 分析

1.5.2.1 技术分析:

【修改图片的路径】

获得图片,修改图片的src的属性。

document.getElementById("img1").src="2.jpg";

【JS中定时操作】

查看BOM中的window对象:

第2章 WEB02-CSS&JS篇【课件+代码】
  • setInterval() :隔多少毫秒之后,执行一段代码。重复执行。
  • setTimeout() :隔多少毫秒之后,执行一段代码。
第2章 WEB02-CSS&JS篇【课件+代码】

清除定时:

  • clearInterval() :清除setInterval的定时操作。
  • clearTimeout() : 清除setTimeout的定时操作。

示例代码:

function init(){
	// window.setTimeout("alert('aaa')",5000);
	window.setInterval("alert('bbb')",5000);
}

1.5.2.2 步骤分析

  • 步骤一:使用页面加载的事件触发一个函数
  • 步骤二:在函数中设置定时:setInterval设置定时,5秒之后(切换图片-定义一个函数)
  • 步骤三:编写切换图片的函数
  • 步骤四:在函数中获得图片的元素
  • 步骤五:修改图片的src的属性

1.5.3 代码实现

<script>
			function init(){
				// 设置定时
				setInterval("changeImg()",5000);
			}
			
			// 定义一个全局变量
			var i = 1;
			
			function changeImg(){
				// 获得图片的元素:
				var img1 = document.getElementById("img1");
				
				if(i == 3){
					i =1;
				}else{
					i++;
				}
				
				// 修改图片的src的属性
				img1.src = "../img/"+i+".jpg";
			}
		</script>
第2章 WEB02-CSS&JS篇【课件+代码】

课程配套代码

已付费?登录刷新

原创文章,作者:小助手,如若转载,请注明出处:https://www.javahelp.com.cn/687.html

(0)
上一篇 2022年8月29日 下午10:42
下一篇 2022年8月30日 下午2:42

相关推荐

发表回复

登录后才能评论