筆記:
為什么使用CSS代替HTML屬性設置樣式
? ? 因為HTML屬性在單獨使用時有一定的局限性,所以要配合CSS代碼才可以展示更為豐富的效果
CSS的代碼規(guī)范
? ? 1.放置規(guī)范
? ? ? ? 在<style>標簽內容體中書寫CSS樣式的代碼<style>標簽放置在<head>標簽中
? ? 2.格式規(guī)范
? ? ? ? 選擇器名稱{屬性名:屬性值;屬性名:屬性值;······}
? ? ? ? 選擇器:即制定CSS樣式作用在那些HTML標簽上
? ? 3.代碼規(guī)范
? ? ? ? 屬性名和屬性值之間是鍵值對關系
????????屬性名和屬性值之間用:連接,最后用;結尾
????????如果一個屬性名有多個值,多個值用空格隔開
? ? ? ? CSS注釋:/*注釋內容*/ 等同于java的多行注釋
CSS選擇器
? ? 基本選擇器
? ? 1.元素選擇器
? ? 2.id選擇器
? ? 3.類選擇器
JavaScript運算符與Java運算符基本一致,主要學習不同點
1、比較運算符
運算符???????????????? 描述
==?????? ?等于(邏輯等,僅僅對比值)
==?????? ?全等(對比值,并且對比類型,都相同為true)
!= ?? ? 不等于
!==?????? 不全等
>?????????? 大于
<? ???????? 小于
>=???????? ???????? 大于或等于
<= ? ? ? ? ? ? ? ? 小于或等于
2、邏輯運算符
運算符???????????????? 描述
&&???????????????????????? and??????????
||????????????????? or
!??????????????????? not
通過typeof運算符可以分辨變量值屬于哪種基本數據類型,對變量或值調用typeof運算符將返回下列值之一:
?undefined??????? 變量是Undefined類型的
?boolean?? 變量是Boolean類型的
?number??? 變量是Number類型的
?string??????? 變量是String類型的
?object????? 變量是Null類型的,或者是一種引用類型
變量
?變量:標示內存中的一塊空間,用于存儲數據,且數據是可變的
?變量的聲明:var 變量名; // 變量賦予默認值,默認值為undefined
?變量的聲明和賦值:var 變量名=值; // 變量賦予對應的值
?在聲明JavaScript變量時,需要遵循以下命名規(guī)范:
?1、必須以字母或下劃線開頭,中間可以數字、字符或下劃線、美元符號
?2、變量名不能包含空格等符號
?3、不能使用JavaScript關鍵字或保留字作為變量名
?4、JavaScript嚴格區(qū)分大小寫
基本數據類型
?string??????? 字符串類型,””和’’都是字符串,JavaScript中沒有單個字符
?boolean?? 布爾類型,固定值為true、false
?number??? 數值類型,任意數字
?null? 空,一個占位符
?undefined??????? 未定義類型,


<!DOCTYPE html>
<html>
<head>
<title>三星</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
background-color:#F5F5F5;
margin:0;
padding:0;
}
.header{
width:100%;
height:30px;
background-color:#F2F2F2;
margin: 0 auto;
}
.content{
width:100%;
height:80px;
background-color:#fff;
margin: 0 auto;
}
.contents{
width:100%;
height:300px;
background-color:#DAE8F3;
margin: 0 auto;
}
.footer{
width:100%;
height:180px;
margin: 0 auto;
}
.one{
width:30%;
height:250px;
background-color:#070506;
margin: 20px 30px;
float:left;
}
.two{
width:30%;
height:250px;
background-color:#fff;
margin: 20px 30px;
float:left;
}
.three{
width:30%;
height:250px;
background-color:#fff;
margin:20px 0;
float:left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="contents"></div>
<div class="footer">
<div class="one"></div>
<div class="two"> </div>
<div class="three"></div>
</div>
</body>
</html>