了解CSS的概念
了解CSS的引入方式
了解CSS的基本语法和常用的选择器
了解CSS的盒子模型,悬浮和定位.
了解JS的概念 掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互
任务
使用CSS完成网站首页的美化
使用CSS完成网站注册页面的美化
使用JS完成简单的数据校验
使用JS完成图片轮播效果
导航
| 目标 | 了解CSS的概念 了解CSS的引入方式
了解CSS的基本语法和常用的选择器
了解CSS的盒子模型,悬浮和定位.
了解JS的概念 掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互. |
使用CSS对首页进行重新布局:
需求分析:
在上次的HTML课程中已经使用表格标签对页面进行布局显示了,但是表格标签有一定的缺陷。实际开发中都会采用DIV+CSS的方式进行布局。使用DIV+CSS重新布局网站的首页:
分析:
技术分析
【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>
1 |
|
【CSS的悬浮】
- CSS的float属性:
float属性中常用取值:
Left :悬浮到左边
Right :悬浮到右边
使用clear属性清除浮动:
Left :清除左侧浮动
Right :清除右侧浮动
Both :清除两侧的浮动
步骤分析:
创建一个外层的div元素
在div中创建代表每块区域div
在每块div引入需要的元素的内容
代码实现:
<!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>
扩展:
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>
使用DIV+CSS对注册页面进行布局:
需求分析:
使用DIV+CSS对注册页面进行布局。更加灵活!
分析:
技术分析:
【CSS的盒子模型】
设置盒子的外边距:margin
Margin-top
Margin-right
Margin-bottom
Margin-left
设置盒子的内边距:padding
Padding-top
Padding-right
Padding-bottom
Padding-left
步骤分析:
创建一个整体div元素
在里面创建5个分别代表某个部分的DIV
在每个部分中完成单独内容的显示
代码实现:
<!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>
扩展:
扩展属性:
【列表属性】
ul li{
list-style-image: url(../img/reg4.gif);
}
【颜色取值】
- 英文取值:
color:red
- 十六进制数:
color:#ff0000
- Rgb方式:
color:rgb(255,0,0)
使用JS完成简单的数据的校验
需求分析:
使用JS完成对注册页面进行简单的数据的非空校验。在提交表单的时候,不可以出现用户名,密码是空的情况。
分析:
技术分析:
HTML骨架,CSS美化,JS可以使页面动起来。
【JavaScript的概述】
- 什么是JavaScript:
运行在浏览器端的脚本语言.
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();
向页面中写内容
步骤分析:
- JS都是由事件触发的,第一步确定事件。
on…
JS的事件都会触发一个函数,编写一个函数。
JS获得操作的对象的元素。
document.getElementById(“”);
- JS修改这个元素的属性或值。
代码实现:
<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>
使用JS完成首页上轮播图片效果:
需求分析:
在网站的首页上图片的轮播,现在页面中图片是静止的。让图片隔5秒自动切换。
分析:
技术分析:
【修改图片的路径】
获得图片,修改图片的src的属性。
document.getElementById(“img1”).src=”2.jpg”;
【JS中定时操作】
查看BOM中的window对象:
setInterval() :隔多少毫秒之后,执行一段代码。重复执行。
setTimeout() :隔多少毫秒之后,执行一段代码。
清除定时:
clearInterval() :清除setInterval的定时操作。
clearTimeout() : 清除setTimeout的定时操作。
示例代码:
function init(){
// window.setTimeout(“alert(‘aaa’)”,5000);
window.setInterval(“alert(‘bbb’)”,5000);
}
步骤分析:
步骤一:使用页面加载的事件触发一个函数
步骤二:在函数中设置定时:setInterval设置定时,5秒之后(切换图片-定义一个函数)
步骤三:编写切换图片的函数
步骤四:在函数中获得图片的元素
步骤五:修改图片的src的属性
代码实现:
<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>