CSS3 HTML5學習心得

2021-07-25 07:47:50 字數 2769 閱讀 4643

1.字串

str.charat(字串索引),若索引超過字串長度,返回空。

str.indexof(「某字元」),找到這個字元順序第一次出現的索引。

str.lastindexof(「某字元」),找到某字串倒序最後出現的索引,若沒有返回-1。

str.uppercase(),將str轉換為大寫。

str.lowercase(),將str轉換為小寫。

str.substr(2,3),從索引為2開始,向後取3個字元。

str.substring(2,5),取索引[2,5)的字元。str.substring(5,2)和前者結果一樣。

str.slice(2,5),取索引[2,5)的字元。str.slice(5,2)返回空,不能這麼寫。

str=」welcome」,str.split(「e」),以e分割它,得到[「w」,」locm」,」「]。

2.date

var d=new date();

var year=d.getfullyear();//年

var month=d.getmonth();//月

var date=d.getdate();//日

var hour=d.gethours();//時

var minute=d.getminutes();//分

var second=d.getseconds();//秒

var milliseconds=d.getmilliseconds();//毫秒

可以得到當前的時間。

月份要加1,如果你想得到3月,那麼輸入的是2。

日期具有自動更正的效果。如果你想知道2023年2月多少天,那麼var d=new date(2012,2,0)。

3.css3新增

01 :root設定整個頁面的文字大小為16px預設*62.5%=10px。

02 rem,直接設定文字和根元素大小相比,em是和它的父級相比。

03 新增選擇器:

:first-child,父元素第乙個子元素。

:last-child,父元素最後乙個子元素。

:nth-child(3),父元素的第3個子元素。

:nth-last-child(3),父元素的倒數第3個子元素。

:nth-child(3n+1),父元素的第1,4,7…個子元素。

:nth-child(even/add),父元素的偶/奇數個子元素。

以上的前提是父元素後面全是這一種子元素,若還有其他型別不同的元素,還要選到它們則要使用type。用法和child原理一樣。

04 偽類

input

input:focus

input獲取焦點時改變input邊框樣式,input此時type為text。

input:enabled

input處於可用狀態時改變input邊框樣式,input此時type為text。

input:disabled

input處於不可用時改變input邊框樣式,input此時type為text。

input:checked

input處於選中狀態時改變input邊框樣式,input此時type為checkbox。

body ::selection;選中狀態,就是ctrl+a那種選中樣子。

input:read-only

input處於唯讀時改變input邊框樣式,input此時type為text。

readonly和disabled區別

表單元素被提交的兩個條件:

1.元素必須是enabled

2.元素必須有name屬性

就是disabled不能被提交。

04.屬性選擇器

屬性選擇器

div[class]選到 所有具有class屬性的div

div[id=」hello」] 選到 所有具有id叫hello的div

div[id^=」he」] 選到 所有具有id以he開頭的div

div[id$=」d」] 選到 所有具有id以d結尾的div

p :not(span)選到父級p下面除了span以外所有標籤。

05.表單設定

.tab

06.新增文字樣式

文字新增陰影:text-shadow:15px(x軸) 5px(y軸) 5px(模糊大小) #3cf(顏色), -5px -5px 3px #f00(可以重複寫,逗號隔開);

文字超出隱藏,配合white-space,overflow使用

white-space: nowrap;/* 超出不換行 */

overflow: hidden;/* 超出部分隱藏 */

text-overflow:ellipsis;預設clip,ellipsis(超出部分「...」表示。)

07.邊框

border-image: url(images/border.png) 26(切割位置)/26px(邊框的寬度) round;

必須是特定的才能用。

08.變形

.itany1 div的class叫.itany1的,向x軸移動100px,y軸移動-50px。

.itany2 div的class叫.itany2的,橫向縮小0.8,縱向不變。

.itany3 div的class叫.itany3的,沿中心轉-30度。

.itany4 x傾斜30度,y傾斜-10度。

.itany5 也可以寫在一起。

.itany3 div的class叫.itany3的,沿右上方轉-30度。

HTML5 CSS學習心得

不說廢話,直接上菜,花了兩天時間看了看這兩個的東西,雖然之前也有涉獵,但是說真的,這兩天我彷彿看透了很多.說真的,乙個個去記憶每個元素的用法真的是蠢爆了,這個大家都知道.大家也知道實踐出真理的道理,但是如果在開會,不能實踐的話該怎麼辦呢?好了說重點.h5就是html,這是一門一直延伸的語言,或者說語...

CSS3 Html5學習筆記之CSS3多類選擇器

css 多類選擇器 我們處理了 class 值中包含乙個詞的情況。在 html 中,乙個 class 值中可能包含乙個詞列表,各個詞之間用空格分隔。例如,如果希望將乙個特定的元素同時標記為重要 important 和警告 warning 就可以寫作 this paragraph is a very ...

HTML學習心得

去年暑假學校安排的實習也對html有過接觸,那時只是知道html是用來寫網頁的,老師也只是帶我們簡單的做了一下網頁,對一些基礎知識沒有多少了解,雖然最後網頁也按時完成了,但是基本上都是在老師的幫助下完成的,自己沒有多大感觸,只是覺得這個東西好玩而已。上週開始又對html進行了重新學習,對於html才...