案例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 基礎