第2章WEB02-CSS&JS篇
阿新 • • 發佈：2018-03-29
web CSS&JS篇 今日任務
? 使用CSS完成網站首頁的美化
? 使用CSS完成網站註冊頁面的美化
? 使用JS完成簡單的數據校驗
? 使用JS完成圖片輪播效果
教學導航
教學目標
了解CSS的概念
了解CSS的引入方式
了解CSS的基本語法和常用的選擇器
了解CSS的盒子模型,懸浮和定位.
了解JS的概念
掌握JS的基本語法,數據類型,能夠使用JS完成簡單的頁面交互.
教學方法
案例驅動法
1.1 上次課的內容回顧：
? 使用CSS完成網站首頁的美化
? 使用CSS完成網站註冊頁面的美化
? 使用JS完成簡單的數據校驗
? 使用JS完成圖片輪播效果
教學導航
教學目標
了解CSS的概念
了解CSS的引入方式
了解CSS的基本語法和常用的選擇器
了解CSS的盒子模型,懸浮和定位.
了解JS的概念
掌握JS的基本語法,數據類型,能夠使用JS完成簡單的頁面交互.
教學方法
案例驅動法
1.1 上次課的內容回顧：
HTML: * HTML的概述： * HTML：Hyper Text Markup Language. * HTML就是由一組標簽所組成的. * HTML的字體標簽: * <font>標簽: * 屬性：color,size,face * HTML的排版標簽: * h標簽：標題標簽. * p標簽：段落標簽. * b標簽：加粗標簽. * i標簽：斜體標簽. * u標簽：下劃線標簽. * br標簽：換行. * hr標簽：水平線. * HTML的圖片標簽: * img標簽: * 屬性: * src屬性:圖片的路徑. * 相對路徑: ./ 代表當前目錄 ../上一級目錄 * width,height,alt. * HTML的超鏈接標簽: * a標簽: * 屬性： * href:鏈接的路徑. * target:鏈接打開的方式. _self,_blank,_parent * HTML的列表標簽: * 無序列表:<ul> * 有序列表:<ol> * HTML的表格標簽： * table標簽: * tr標簽：表格的行. * td標簽：表格的列. * HTML的表單標簽：（*****） * form標簽： * action屬性：表單提交的路徑 * method屬性：表單的提交的方式. * GET和POST： * GET：地址欄上會顯示提交的數據的信息,大小限制. * POST：地址欄不會顯示提交的數據的信息,沒有大小限制. * <input> * type=”text”:文本框 * type=”password”:密碼框. * type=”radio”:單選按鈕. * type=”checkbox”:復選框. * type=”file”:文件上傳. * type=”hidden”:隱藏字段. * type=”submit”：提交按鈕. * type=”reset”:重置按鈕. * type=”button”:普通按鈕. * type=”image”:圖片按鈕. * <select>:下拉列表. * <textarea>:文本區 * HTML的框架標簽: * <frameset> * <frame>
1.2 案例一：使用DIV+CSS方式重新布局網站的首頁.
1.2.1 需求：
網站首頁的設計：采用DIV+CSS的方式完成.
之前使用的是表格的布局！！！表格的布局有缺陷！！！
1.2.2 分析：
1.2.2.1 技術分析：
【HTML的塊標簽】
<div></div> :默認一個div獨占一行.
<span></span> :默認在同一行.【CSS的概述】
? 什麽是CSS:
- HTML相當於網站的骨架！CSS對骨架進行美化！
? CSS在那些地方使用：
任何網站都會使用CSS去美化頁面！！！
? 如何使用CSS
【CSS的基本語法】
CSS的基本語法通常包含兩個部分：一個是選擇器，一個聲明.
-
選擇器{屬性:屬性值;屬性:屬性值...}
【CSS的引入的方式】
? 行內樣式：直接在HTML的元素上使用style屬性設置CSS.
<h1 style="color:red;font-size:200px ;">標題</h1>
? 頁面內樣式：在HTML的<head>標簽中使用<style>標簽設置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
? 外部樣式:單獨定一個.css的文件.在HTML中引入該CSS文件.
【CSS的選擇器】
? 元素選擇器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
? ID選擇器:
#d1{
border:2px solid red;
}
? 類選擇器：
.divClass{
border:2px solid yellow;
}
【CSS的浮動】
? 使用float屬性可以完成DIV的浮動.
float屬性的取值:
? 清除浮動效果：使用clear屬性進行清除:
? 案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{
border:1px solid blue;
width:200px;
height:220px;
}
#d1{
float:left;
}
#d2{
float:left;
}
#d3{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="d1" class="divClass">DIV1</div>
<div id="d2" class="divClass">DIV2</div>
<div id="d3" class="divClass">DIV3</div>
<div class="clear"></div>
<div id="d4" class="divClass">DIV4</div>
</body>
</html>1.2.2.2 步驟分析:
【步驟一】創建一個首頁的HTML文件
【步驟二】創建一個整體的DIV元素.
【步驟三】創建每個部分的DIV元素.
【步驟四】為每個部分填充屬於自己的那塊內容.
1.2.3 代碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<style>
#bodyDiv{
border:1px solid blue;
width:90%;
}
.logoDiv{
border:1px solid blue;
width:33%;
float:left;
height:50px;
}
.clear{
clear:both;
}
#menuDiv{
width:100%;
height:50px;
border:1px solid blue;
background-color: black;
}
#imgDiv{
width:100%;
border:1px solid blue;
}
#menuDiv a{
font-size: 20px;
color: white;
}
.productClass{
width:100%;
border:1px solid blue;
}
.contentClass{
width:100%;
border:1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
}
</style>
</head>
<body>
<!-- 整體的DIV -->
<div id="bodyDiv">
<!-- logo的DIV -->
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="48">
</div>
<div class="logoDiv">
<img src="../img/header.png" height="48">
</div>
<div class="logoDiv">
<a href="">登錄</a>
<a href="">註冊</a>
<a href="">購物車</a>
</div>
<div class="clear"></div>
</div>
<!-- Menu的DIV -->
<div id="menuDiv">
<a href="">首頁</a>
<a href="">電腦辦公</a>
<a href="">手機數碼</a>
<a href="">煙酒糖茶</a>
</div>
<!-- 圖片滾動的DIV -->
<div id="imgDiv">
<img src="../img/1.jpg" width="100%">
</div>
<!-- 熱門商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>熱門商品</font><img src="../img/title2.jpg">
</div>
<!-- 商品部分的DIV -->
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/big01.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 廣告的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/ad.jpg" width="100%" height="80">
</div>
<!-- 最新商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>最新商品</font><img src="../img/title2.jpg">
</div>
<!-- 商品部分的DIV -->
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/big01.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 頁腳的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/footer.jpg" width="100%">
</div>
<!-- 友情鏈接及版權的DIV -->
<div style="width:100%;border:1px solid blue;">
<center>
關於我們 聯系我們 招賢納士 法律聲明 友情鏈接 支付方式 配送方式 服務聲明 廣告聲明 <br/>
Copyright ? 2005-2016 傳智商城 版權所有
</center>
</div>
</div>
</body>
</html>1.2.4 總結：
【CSS的其他選擇器】
? 屬性選擇器：
<style>
input[type="text"]{
background-color: red;
}
</style>
? 後代選擇器:
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>? 子元素選擇器：
div > span找這個div中的第一層級的span元素.
h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>? 並列選擇器:
選擇器,選擇器{
}
【CSS的樣式】
? 背景
? 文本
? 字體
? 列表
1.3 案例二：使用DIV+CSS布局註冊頁面:
1.3.1 需求：
使用DIV+CSS的方式完成註冊頁面的布局:
1.3.2 分析:1.3.2.1 技術分析：
【CSS中的盒子模型】
? 內邊距：padding.
? 邊框：border
? 外邊距：margin
【CSS中的定位】
position屬性設置定位：
- relative:相對定位
- absolute:絕對定位
使用另外兩個屬性:left,top
1.3.2.2 步驟分析：
【步驟一】創建一個html頁面
【步驟二】創建一個整體的DIV
【步驟三】在整體DIV中創建5個DIV.
【步驟四】為每個DIV添加所屬的內容.
1.3.3 代碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<style>
div{
border:1px solid blue;
}
.bodyDiv{
width:90%;
}
.bodyDiv > div{
width:100%;
}
.logoDiv{
width:33%;
height:50px;
float:left;
}
.clear{
clear:both;
}
ul li{
display:inline;
}
</style>
</head>
<body>
<!--整體DIV-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="50"/>
</div>
<div class="logoDiv">
<img src="../img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;">
<a href="">登錄</a>
<a href="">註冊</a>
<a href="">購物車</a>
</div>
<div class="clear"></div>
</div>
<div style="height:50px;background-color: black;color:white;font-size: 20px;">
<ul >
<li>首頁</li>
<li>首頁</li>
<li>首頁</li>
<li>首頁</li>
</ul>
</div>
<div style="height:500px;background-image: url(../img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;width:600px;">
<form>
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用戶名</td>
<td><input type="text" name="username"></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="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍貫</td>
<td>
<select name="province">
<option>-請選擇-</option>
</select>
<select name="city">
<option>-請選擇-</option>
</select>
</td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="註冊"></td>
</tr>
</table>
</form>
</div>
</div>
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<div>
<center>
關於我們 聯系我們 招賢納士 法律聲明 友情鏈接 支付方式 配送方式 服務聲明 廣告聲明 <br/>
Copyright ? 2005-2016 傳智商城 版權所有
</center>
</div>
</div>
</body>
</html>1.3.4 總結：
1.3.4.1 超鏈接的偽類
1.4 案例三：完成對註冊頁面的數據的簡單校驗.
1.4.1 需求：
對註冊頁面的數據進行非空的簡單校驗！！！如果有某個值沒有輸入,點擊提交,彈出一個對話框進行提示！！
1.4.2 分析:1.4.2.1 技術分析:
【JS的概述】
? 什麽是JavaScript：
運行在瀏覽器端的腳本語言!
JavaScript的歷史：
? JavaScript的組成：
ECMAScript：JavaScript的基本的語法
BOM：Browser Object Model ：
DOM：Document Object Model ：
? 其他的腳本語言：
JavaScript,ActionScript,Flex
? JS的用途：
使頁面更加豐富,使頁面動起來！！！
【JS的基本語法】
? 區分大小寫：
? 弱變量類型語言：（與Java不同）
- Java
- int i = 3;
- String s = “abc”;
- JavaScript:
- var i = 3;
- var s = “abc”;
? 分號可有可無：
? 變量命名：
【JS的數據類型】
JS將數據類型分成兩類：
-
原始類型：
- undefined：未定義類型
- boolean:布爾類型
- number:數字類型
- string:字符或字符串.
- null：空
- 引用類型：
- 對象類型.對象類型默認值是null.
【JS的運算符】
JS中的運算符與Java中基本一致！
JS中有一個 === 全等於.全等於是類型和值都一致的情況下才為true.
【JS的語句】
JS中的語句與Java的語句一致！
【JS的通常開發的步驟】
JS通常都由一個事件觸發.
觸發一個函數,定義一個函數.
獲得操作對象的控制權.
修改要操作的對象的屬性或值.
定義函數:
-
function 函數名稱(){
// 函數體
} - window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
【JS的引入方式】
通常兩種方式：
一種：頁面內直接編寫JS代碼,JS代碼需要使用<script></script>.
二種：將JS的代碼編寫到一個.js的文件中,在HTML中引入該JS代碼即可.
1.4.3 代碼實現：
<script>[/align]
// alert("Hello!");
function checkForm(){
// 獲得文本框的值：
var username = document.getElementById("username").value;
// var val = username.value;
// alert(username);
if(username == ""){
alert("用戶名不能為空！");
return false;
}
// 校驗密碼：
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)){
alert("郵箱格式不正確！");
return false;
}
}
</script>1.4.4 總結:
將JS的代碼定義成一個文件引入:
<script src="../js/check.js"></script>
獲得頁面中的元素:
- document.getElementById(“”);
正則的匹配:
JS中有兩種匹配正則的方式:
- 使用String對象中的match方法.
- 使用正則對象中的test方法.
1.5 案例四：使用JS完成圖片滾動的效果:
1.5.1 需求:
使用JS完成該效果：
1.5.2 分析:
1.5.2.1 技術分析:
【HTML的window對象】
-
setInterval(); :每隔多少毫秒執行某個表達式.
- setInterval(“change()”,5000);
- setTimeout(); :隔多少毫秒執行一個該表達式.
- setTimeout(“change()”,5000);
第2章WEB02-CSS&JS篇