今日目標
使用CSS完成網站首頁的優化
使用CSS完成網站註冊頁面的優化
使用JS完成簡單的資料校驗
使用JS完成圖片輪播效果
教學目標：
- 瞭解CSS的概念
- 瞭解CSS的引入方式
- 瞭解CSS的基本用法和常用的選擇器
- 瞭解CSS的盒子模型，懸浮和定位
- 瞭解JS的概念
- 掌握JS的基本語法，資料型別，能夠使用JS完成簡單的頁面互動
去年的內容簡單回顧
什麼HTML : 超文字標記語言
p標籤: 段落標籤
br標籤: 簡單換行
h1-h6: 標題標籤
hr標籤: 水平分割線, 華麗的分割線
font標籤: color屬性改變顏色 , size
b標籤: 加粗
i標籤: 斜體
strong標籤: 帶語義的加粗
em標籤: 斜體標籤,帶語義
img標籤: 圖片標籤 顯示圖片
src: 指定圖片路徑(相對路徑)
width: 寬度
height: 高度
alt: 圖片載入失敗時的提示
相對路徑:
./ 代表當前路徑
../ 代表的是上一級路徑
../../ 代表的是上上一級路徑
ul標籤: 無序列表
ol標籤: 有序列表
li標籤: 列表項
a標籤: 超連結標籤:
target: 開啟方式
href: 指定要跳轉的連結地址
table標籤: table > tr > td
tr標籤: 行
td標籤: 列
合併行: rowspan
合併列: colspan
網站註冊案例:
form 標籤: 表單標籤,主要是用來向伺服器提交資料
method: 提交方式 get post
action : 提交的路徑
input 標籤:
type:
password: 密碼框
text : 文字
submit: 提交
button: 普通的按鈕
reset: 重置按鈕
radio: 單選按鈕 設定name屬性讓它們是一組
checkbox: 核取按鈕
email:
date:
tel:
frameset : 框架標籤
rows:
cols:
frame:
使用CSS完成網站首頁的優化
需求分析:
由於我們昨天使用表格佈局存在缺陷,那麼我們要來考慮使用DIV+CSS來對頁面進行優化
表格佈局的缺陷:
1. 巢狀層級太多, 一旦出現巢狀順序錯亂, 整個頁面達不到預期效果
2. 採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變
技術分析
HTML的塊標籤:
div標籤: 預設佔一行,自動換行
span標籤: 內容顯示在同一行
CSS概述:
Cascading Style Sheets : 層疊樣式表
紅磚, 抹了一層水泥, 白灰
主要用作用:
用來美化我們的HTML頁面的
HTML 決定網頁的骨架 ,CSS 化妝
將頁面的HTML和美化進行分離
CSS的簡單語法:
在一個style標籤中,去編寫CSS內容,最好將style標籤寫在這個head標籤中
<style>
選擇器{
屬性名稱:屬性的值;
屬性名稱2: 屬性的值2;
}
</style>CSS選擇器: 幫助我們找到我們要修飾的標籤或者元素
元素選擇:
元素的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}ID選擇器:
以#號開頭 ID在整個頁面中必須是唯一的s
#ID的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}類選擇器:
以 . 開頭
.類的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}CSS的引入方式:
外部樣式: 通過link標籤引入一個外部的css檔案
內部樣式: 直接在style標籤內編寫CSS程式碼
行內樣式: 直接在標籤中新增一個style屬性, 編寫CSS樣式
CSS浮動 : 浮動的元素會脫離正常的文件流,在正常的文件流中不佔空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不允許浮動
left: 左邊不允許浮動
right : 右邊不允許浮動
流式佈局
步驟分析:
- 創一個最外層div
- 第一部份: LOGO部分: 巢狀三個div
- 第二部分: 導航欄部分 : 放置5個超連結
- 第三部分: 輪播圖
- 第四部分:
- 第五部分: 直接放一張圖片
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖片
- 第八部分: 放一堆超連結
程式碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!--
1. 創一個最外層div
2. 第一部份: LOGO部分: 巢狀三個div
3. 第二部分: 導航欄部分 : 放置5個超連結
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超連結
-->
<div>
<!--2. 第一部份: LOGO部分: 巢狀三個div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登入</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div style="clear: both;"></div>
<!--3. 第二部分: 導航欄部分 : 放置5個超連結-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機數碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香菸酒水</a>
</div>
<!--4. 第三部分: 輪播圖-->
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一張圖片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一張圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超連結-->
<div style="text-align: center;">
<a href="#">關於我們</a>
<a href="#">聯絡我們</a>
<a href="#">招賢納士</a>
<a href="#">法律宣告</a>
<a href="#">友情連結</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務宣告</a>
<a href="#">廣告宣告</a>
<br />
Copyright © 2005-2016 傳智商城 版權所有
</div>
</div>
</body>
</html>擴充套件:
- CSS的優先順序
按照選擇器搜尋精確度來編寫: 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
就近原則: 哪個離得近,就選用哪個的樣式
CSS: 層疊樣式表
主要作用:
1. 美化頁面
2. 將頁面美化和HTML程式碼進行分離,提高程式碼的服用型
-
選擇器:
- 元素選擇器: 標籤的名稱{}
- 類選擇器: 以. 開頭 .類的名稱
- ID選擇器: 以#開頭 , #ID的名稱 (ID必須是頁面上面唯一)
-
CSS浮動:
- float : left, right 不再佔有正常文件流中的空間 , 流式佈局
- clear : both left right
-
CSS中的其它選擇器
- 選擇器分組: 選擇器1,選擇器2{ 屬性的名稱:屬性的值}
-
屬性選擇器:
a[title] a[titile=`aaa`] a[href][title] a[href][title=`aaa`] - 後代選擇器: 爺爺選擇器 孫子選擇器 找出所有的後代
- 子元素選擇器: 父選擇器 > 兒子選擇器
- 偽類選擇器: 通常都是用在A標籤上
使用DIV+CSS完成註冊頁面的優化
需求分析
由於我們的註冊頁面也是用table佈局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的註冊頁面進行美化
總共是5部分內容
技術分析
CSS的盒子模型: 萬物皆盒子
內邊距:
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 順時針的方向外邊距:
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS絕對定位:
position: absolute
top: 控制距離頂部的位置
left: 控制距離左邊的位置
步驟分析:
- 總共是5部分
- 第一部分是LOGO部分
- 第二部分是導航選單
- 第三部分是註冊部分
- 第四部分是FOOTER圖片
- 第五部分是一堆超連結
程式碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!--
1. 總共是5部分
2. 第一部分是LOGO部分
3. 第二部分是導航選單
4. 第三部分是註冊部分
5. 第四部分是FOOTER圖片
6. 第五部分是一堆超連結
-->
<div>
<!--2. 第一部分是LOGO部分-->
<div>
<div class="logo">
<img src="../img/logo2.png" />
</div>
<div class="logo">
<img src="../img/header.png" />
</div>
<div class="logo">
<a href="#">登入</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div style="clear: both;"></div>
<!--3. 第二部分是導航選單-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機數碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香菸酒水</a>
</div>
<!--4. 第三部分是註冊部分-->
<div style="background: url(../image/regist_bg.jpg);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">會員註冊</font>USER REGISTER</td>
</tr>
<tr>
<td>使用者名稱:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性別:</td>
<td><input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>驗證碼:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="註冊"/></td>
</tr>
</table>
</div>
</div>
<!--5. 第四部分是FOOTER圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第四部分: 放一堆超連結-->
<div style="text-align: center;">
<a href="#">關於我們</a>
<a href="#">聯絡我們</a>
<a href="#">招賢納士</a>
<a href="#">法律宣告</a>
<a href="#">友情連結</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務宣告</a>
<a href="#">廣告宣告</a>
<br />
Copyright © 2005-2016 傳智商城 版權所有
</div>
</div>
</body>
</html>
CSS部分的回顧:
CSS: 層疊樣式表.
CSS作用: 美化頁面,提高程式碼的複用性
選擇器:
需要掌握的:
元素選擇器: 標籤的名稱
類選擇器: 以 . 開頭
ID選擇器: 以#開頭, #ID的名稱 ID必須是唯一的
優先順序: 按照選擇精確度: 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
就近原則
擴充套件選擇器:
選擇器分組: 選擇器1,選擇器2 以逗號隔開
後代選擇器: 爺爺 孫子 中間以空格隔開
子元素選擇器: 爸爸 > 兒子
屬性選擇器: 選擇器[屬性的名稱=“]
偽類選擇器: 超連結標籤上使用
浮動: float屬性 left right
清除浮動: clear: both left right
盒子模型: 順時針 : 上右下左
padding : 內邊距 ,控制的是盒子內容的距離
margin : 外邊距 控制盒子與盒子之間的距離
絕對定位:
position: absolute
top:
left:
使用JS完成簡單的資料校驗
需求分析
使用JS完成對註冊頁面的簡單資料校驗,不允許出現使用者名稱或密碼為空的情況
技術分析
JavaScript概述
什麼是javascript: JavaScript一種直譯式指令碼語言，
什麼是指令碼語言?
java原始碼 —-> 編譯成.class檔案 —–> java虛擬機器中才能執行
指令碼語言: 原始碼 ——– > 解釋執行
js由我們的瀏覽器來解釋執行
HTML: 決定了頁面的框架
CSS: 用來美化我們的頁面
JS: 提供使用者的互動的
JS的組成:
ECMAScript : 核心部分 ,定義js的語法規範
DOM: document Object Model 文件物件模型 , 主要是用來管理頁面的
BOM : Browser Object Model 瀏覽器物件模型, 前進,後退,頁面重新整理, 位址列, 歷史記錄, 螢幕寬高
JS的語法:
變數弱型別: var i = true
區分大小寫
語句結束之後的分號 ,可以有,也可以沒有
寫在script標籤
JS的資料型別:
-
基本型別
- string
- number
- boolean
- undefine
- null
-
引用型別
- 物件, 內建物件
-
型別轉換
- js內部自動轉換
JS的運算子和語句:
-
運算子和java 一樣
- “===” 全等號: 值和型別都必須相等
- == 值相等就可以了
- 語句和java 一樣
JS的輸出
- alert() 直接彈框
- document.write() 向頁面輸出
- console.log() 向控制檯輸出
- innerHTML: 向頁面輸出
- 獲取頁面元素: document.getElementById(“id的名稱”);
JS宣告變數:
var 變數的名稱 = 變數的值
JS宣告函式:
var 函式的名稱 = function(){
}
function 函式的名稱(){
}
JS的開發步驟
1. 確定事件
2. 通常事件都會出發一個函式
3. 函式裡面通常都會去操作頁面元素,做一些互動動作
步驟分析:
程式碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. 確認事件: 表單提交事件 onsubmit事件
2. 事件所要觸發的函式: checkForm
3. 函式中要乾點事情
1. 校驗使用者名稱, 使用者不能為空, 長度不能小於6位
1.獲取到使用者輸入的值
*/
function checkForm(){
//獲取使用者名稱輸入項
var inputObj = document.getElementById("username");
//獲取輸入項的值
var uValue = inputObj.value;
// alert(uValue);
//使用者名稱長度不能6位 ""
if(uValue.length < 6 ){
alert("對不起,您的長度太短!");
return false;
}
//密碼長度大於6 和確認必須一致
//獲取密碼框輸入的值
var input_password = document.getElementById("password");
var uPass = input_password.value;
if(uPass.length < 6){
alert("對不起,您還是太短啦!");
return false;
}
//獲取確認密碼框的值
var input_repassword = document.getElementById("repassword");
var uRePass = input_repassword.value;
if(uPass != uRePass){
alert("對不起,兩次密碼不一致!");
return false;
}
//校驗手機號
var input_mobile = document.getElementById("mobile");
var uMobile = input_mobile.value;
//
if(!/^[1][3578][0-9]{9}$/.test(uMobile)){
alert("對不起,您的手機號無法識別!");
return false;
}
//校驗郵箱: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(uEmail)){
alert("對不起,郵箱不合法");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="JS開發步驟.html" onsubmit="return checkForm()">
<div>使用者名稱:<input id="username" type="text" /></div>
<div>密碼:<input id="password" type="password" /></div>
<div>確認密碼:<input id="repassword" type="password" /></div>
<div>手機號碼:<input id="mobile" type="number" /></div>
<div>郵箱:<input id="email" type="text" /></div>
<div><input type="submit" value="註冊" /></div>
</form>
</body>
</html>javascript : 它是一門指令碼語言 , 直接解釋執行的語言
javascript:
ECMAScript : 定義的語法
DOM: document Object Model
BOM: 瀏覽器物件模型
會定義變數: var 變數的名稱 = 變數的值
會定義函式:
function 函式的名稱(引數的名稱){
}
使用JS完成圖片的輪播效果
需求分析
在我們的網站首頁,通常需要有一塊區域,用來顯示廣告,但是這塊區域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要採用動態迴圈播放我們所有的廣告. 顯示效果照抄黑馬程式設計師的網站首頁
技術分析:
步驟分析:
程式碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 當頁面載入完成的時候, 動態切換圖片
1.確定事件:
2.事件所要觸發的函式
*/
var index = 1;
//切換圖片的函式
function changeAd(){
//獲取要操作的img
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg"; //0,1,2 //1,2,3
index++;
}
function init(){
//啟動定時器
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html>