2020-03-10

筆記:

為什么使用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>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容