? ? ? 最近初學(xué)html5和css3,然后做了這個(gè)demo,主要是鞏固學(xué)到的東西,另一方面感受一下html5的響應(yīng)式設(shè)計(jì)是如何搭載在不同客戶端,各個(gè)不同大小的屏幕之下的強(qiáng)大之處。在文章下面會(huì)寫出自己的在做這個(gè)項(xiàng)目時(shí)的總結(jié)體會(huì),希望做個(gè)筆記吧,也希望能和大家分享,交流。還是一枚初學(xué)者,可能demo有點(diǎn)簡(jiǎn)單,還希望包涵,也希望提出您寶貴的意見,在今后的學(xué)習(xí)中會(huì)加以改正,謝謝拉。
代碼地址:我的github
本來做了gif圖的,但是放不下,只能用圖片了,請(qǐng)見諒,過后有時(shí)間我去搞搞服務(wù)器,再回來改改??
順便問問圖片不能縮小嗎??




總結(jié):(都是一些基礎(chǔ)性的,現(xiàn)在看來我也覺得簡(jiǎn)單,但畢竟剛開始做,請(qǐng)多原諒吧)
調(diào)試每個(gè)大范圍的時(shí)候記得給個(gè)background-color,確定一下范圍
每一個(gè)大層用id ,然后class
文字放左放右:text-align
加粗:font-weight:border
文字與文字之間,文字和整個(gè)頁(yè)面之間:margin
文字里特殊的幾個(gè)屬性,用復(fù)合選擇器
自身的邊框處理:border
文字的顏色:color
下劃線:text–decoration
想和其他文字同一行,但是自己能夠調(diào)整高度和寬度:display: inLine-block
去陰影:outline:none
跳出當(dāng)前路徑去另一個(gè)路徑: …/
背景圖片的設(shè)置:background-color
文本框中的提示內(nèi)容? : ?input placeholder = “請(qǐng)輸入帳號(hào)名“
暗文: type = “password”
去邊框:border:0px
點(diǎn)擊文本框變顏色:border-color
接觸變成手:cursor:point
圖片不平鋪:no-repeat
href=“#”跳轉(zhuǎn)到本頁(yè)面頂部,一般建議寫成javascript:void(0);要好一點(diǎn),點(diǎn)了一點(diǎn)反應(yīng)都沒有,寫#點(diǎn)了會(huì)跳一下的
設(shè)置陰影效果,不透明度:opacity:xxx
響應(yīng)式設(shè)計(jì):寬度到達(dá)某個(gè)位置時(shí),響應(yīng)
? ? ? @media screen and (max-width:) ? {
? ? ? ? ? ? ? ?}