day02 css&js 基礎

標籤：選擇   框模型   是什麼   函數返回   補充   提示   建議   整合   存在   

案例1-用div+css重新布局首頁

div:塊標籤， <div></div>
span:行內的塊標籤 <span><span>
////////////
css:渲染
層疊樣式表
格式:
選取器{屬性:值;屬性1:值1;}
尾碼名:
.css 獨立的css(樣式)檔案
和html元素的整合★
方式1:內聯樣式表 通過標籤的style屬性設定樣式
方式2:內部樣式表 在當前頁面中使用的樣式
通過head標籤的style子標籤匯入
例如:
<style>
#divId2{
background-color: #0f0;
}
</style>

方式3:外部樣式表 有獨立的css檔案
通過head標籤的link子標籤匯入
例如:
<link rel="stylesheet" href="css/1.css" type="text/css"/>
選取器:★
id選取器
要求:
html元素必須有id屬性且有值 <xxx id="id1"></xxx>
css中通過"#"引入,後面加上id的值 #id1{...}
class選取器
要求:
html元素必須有class屬性且有值 <xxx class="cls1"/>
css中通過"."引入,後面加上class的值 .cls1{...}
元素選取器
直接用元素(標籤)名即可 xxx{...}

派生的選取器
屬性選取器★
要求:
html元素必須有一個屬性不論屬性是什麼且有值 <xxx nihao="wohenhao"/>
css中通過下面的方式使用
元素名[屬性="屬性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
後代選取器
選取器 後代選取器{...} 在滿足第一個選取器的條件下找後代的選取器,給滿足條件的元素添加樣式
瞭解的選取器
錨偽類別選取器
a:link {color: #FF0000}/* 未訪問的連結 */
a:visited {color: #00FF00}/* 已訪問的連結 */
a:hover {color: #FF00FF}/* 滑鼠移動到連結上 */
a:active {color: #0000FF}/* 選定的連結 */

選取器使用小結:
id選取器:一個元素(標籤)
class選取器:一類元素
元素選取器:一種元素
屬性選取器:元素選取器的特殊用法
使用的時候注意:(瞭解)
若多個樣式作用於一個元素的時候
不同的樣式,會疊加
相同的樣式,最近原則
若多個選取器作用於一個元素的時候
越特殊優先順序越高 id優先順序最高
//////////////////////
屬性(瞭解)
字型
font-family:設定字型(隸書) 設定字型家族
font-size:設定字型大小
font-style:設定字型風格
文本:改變文本的顏色、字元間距，對齊文本，裝飾文本，對文本進行縮排
color:文本顏色
line-height:設定行高
text-decoration: 向文本添加修飾。 none underline 去掉底線
text-align:對齊文本
列表:
list-style-type:設定清單項目的類型 例如:a 1 實心圓
list-style-image:設定圖片最為清單項目類型 使用的時候使用 url函數 url("/i/arrow.gif");
背景:
background-color:設定背景顏色
background-image:設定圖片作為背景 url
尺寸:
width:
height:
浮動:
float: 可選值 left right

分類:
clear:設定元素的兩邊是否有其他的浮動元素
值為:both 兩邊都不允許有浮動元素
display:設定是否及如何顯示元素。
none 此元素不會被顯示。
block 此元素將顯示為區塊層級元素，此元素前後會帶有分行符號。
inline 預設。此元素會被顯示為內嵌元素，元素前後沒有分行符號。
框模型:(理解)
一個元素外面有padding(內邊距) border(邊框) margin(外邊距)
padding:元素和邊框的距離
margin:元素最外層的空白
上面這三個屬性都有簡寫的屬性
若設定大小的時候 四個值:順序 上右下左
padding:10px 10px 10px 10px
若唯寫一個的話 代表四個邊使用同一個值 padding:10px
若唯寫兩個個的話 代表四個邊使用同一個值 padding:10px 20px
若唯寫三個個的話 代表四個邊使用同一個值 padding:10px 20px 30px
border(邊框)
還可以設定顏色 風格
簡寫屬性:
border:寬度風格 顏色;
border:5px solid red;
solid:實線 dashed:虛線，double:雙實線
步驟分析:
1.建立一個div
2.在這個div中建立8個div
3.第1個div logo
嵌套三個div
4.第2個div 菜單
嵌套一個列表 display:inline
5.第3個div 輪播圖

6.第4個div 熱門商品
標題標籤 圖片display:inline
a:兩個div
左邊的div 展示一張圖片
右邊的div 展示所有商品
b.右邊的div中嵌套10個div
3.第5個div 廣告
3.第6個div 最新商品
3.第7個div 廣告
3.第8個div foot 著作權
兩個p標籤
////////////////////////////////
javascript 俗稱 js
案例1-校正表單
需求:
表單提交的時候需要校正資料是否完整,若不滿足條件,則使用彈出框提示.

//////////////////////
JavaScript一種直譯式指令碼語言，是一種動態類型、弱類型、基於原型的語言，
內建支援類型。它的解譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於用戶端的指令碼語言
組成部分:
ECMAScript:js基礎文法(規定 關鍵字 運算子 語句 函數等等...)
BOM:瀏覽器物件模型
DOM:文件物件模型
作用:
修改html頁面的內容
修改html的樣式
完成表單的驗證
注意:
js可以在頁面上直接寫,也可以單獨出去
js的檔案的尾碼名 .js
js和html整合
方式1:在頁面上直接寫
將js代碼放在 <script></script>標籤中,一般放在head標籤中
方式2:獨立的js檔案
通過script標籤的src屬性匯入
js中變數聲明:
var 變數名=初始化值;
var 變數名;
變數名=初始化值;
注意:
var可以省略 建議不要省略
一行要以分號結尾,最後一個分號可以省略,建議不要省略
js的資料類型:
原始類型:(5種)
Null
String
Number
Boolean
Undefined
通過 typeof運算子可以判斷一個值或者變數是否屬於原始類型,若屬於原始類型,他還可以判斷出屬於那種原始類型
typeof 變數|值;
若變數為null,使用typeof彈出的值 object

使用typeof的傳回值
undefined - 如果變數是 Undefined 類型的
boolean - 如果變數是 Boolean 類型的
number - 如果變數是 Number 類型的
string - 如果變數是 String 類型的
object - 如果變數是一種參考型別或 Null 類型的

參考型別:
//////////////////////

js中的事件:
常見的事件:
單擊: onclick
表單提交: onsubmit 加在form表單上的 onsubmit="return 函數名()" 注意函數傳回值為boolean類型
頁面載入: onload

js擷取元素:
方式1:
var obj=documnet.getElementById("id值");
擷取元素的value值
obj.value;
擷取元素的標籤體中的內容
obj.innerHTML;
////////////////////
案例2-步驟分析:
1.先有一個表單
2.在form上添加一個事件 onsubmit="return checkForm()"
3.編寫checkForm這個方法
4.擷取每個表單子標籤的內容
5.判斷是否滿足要求,
若滿足,不用管他
若不滿足,表單不能提交,返回false,且提示資訊.
///////////////////////////
函數的定義:
方式1:
function 函數名(參數){
函數體;
}

方式2:
var 函數名=function(參數){
函數體;
}
注意:函數不用聲明傳回值類型
參數不需要加類型
函數調用的時候，函數名(參數)

js事件和函數的綁定:
方式1:
通過標籤的事件屬性 <xxx onclick="函數名(參數)"></xxx>
方式2:
給元素派發事件
document.getElementById("id值").onclick=function(參數){....}
document.getElementById("id值").onclick=函數名
注意:
記憶體中應該存在該元素才可以派發事件
a.將方式2的js代碼放在html頁面的最下面
b.在頁面載入成功之後在運行方式2的js代碼 onload事件.
////////////////////////
案例3-輪播圖片
需求:
每隔3秒圖片更新一下
技術分析:
bom中window對象的定時器方法
定時器:
var id=setInterVal(code,毫秒數):每隔指定的毫秒數執行一次函數 周期
var id=setTimeout(code,毫秒數):延遲指定的毫秒數之後 只執行一次函數

清除定時器:
clearInterval(id);
claerTimeout(id);

////////////////
步驟分析:
1.在首頁上面綁定一個onload事件
2.事件綁定的函數中編寫一個定時器
3.定時器每隔3秒更換圖片
imgObj.src="";

///////////////
補充:
運算子:
比較子: > >= < <=
若兩邊都是數字 和java一樣
若一般為數字,另一邊為字串形式的數字,將字串形式的數字轉換成數字在進行比較 3>"2"
若一般為數字,另一邊為字串,返回一個false 3>"hello"
兩邊都是字串的時候,比較ascii
等性運算子 == ===
== :只判斷值是否相同
===:不僅判斷是否相同,還要判斷類型是否相同
語句:
if語句 和java一樣
for while 語句和java一樣
switch 和java一樣(區別,switch 後面跟字串. 還可以跟變數)

 

總結:掌握
1.css和html整合
方式3種
2.css中選取器:
id class 元素
屬性 後代
3.js
js和html整合
方式兩種
4.變數定義
5.函數定義
2中格式
6.事件
onclick onload onsubmit
7.事件和函數的綁定
2中方式
8.定時器 2種
9.for while if

day02 css&js 基礎