最終效果圖如下: 主要功能和學(xué)習(xí)內(nèi)容與代碼展示 CSS的grid布局按鍵部分通過(guò)一個(gè)grid布局,快速完成了相應(yīng)的樣式 .calculator .buttons { display: grid; /* grid-template-columns...
手機(jī)訪(fǎng)問(wèn)原圖自己設(shè)計(jì)出來(lái)的 美工字體效果差距太大,只是簡(jiǎn)單看看結(jié)構(gòu)吧. 整體頁(yè)面結(jié)構(gòu)說(shuō)明分別引入iconfont,reset,和分結(jié)構(gòu)的CSS.body分為三部分獨(dú)立完成 其中注意在reset設(shè)置好隨手機(jī)端變化的自適應(yīng)rem并通過(guò)媒體查詢(xún)確保r...
一周的學(xué)習(xí),做個(gè)綜合使用看看效果,頁(yè)面效果圖如下: 整體大圖2.頭部設(shè)計(jì)3.媒體查詢(xún),窗口小的時(shí)候自動(dòng)調(diào)整fontsize并隱藏相應(yīng)元素 下面分項(xiàng)說(shuō)明: 整體頁(yè)面結(jié)構(gòu)代碼折疊顯示如下: 注意點(diǎn)有以下: 在CSS代碼分為icon,me...
先綜合說(shuō)明一下,再來(lái)上代碼和效果 頁(yè)面結(jié)構(gòu)最常見(jiàn)的頁(yè)面結(jié)構(gòu)就是上中下也即三項(xiàng),通過(guò)分別的CSS來(lái)將整個(gè)頁(yè)面做切隔,顯示代碼如下:
在CSS選擇器中,在最基本的標(biāo)簽選擇器(div,P等)和屬性選擇器([],.class,#id)之外,稍微有點(diǎn)難度的就是位置選擇器:所謂位置選擇器就是根據(jù)已經(jīng)明確的選擇內(nèi)容通過(guò)一定的表示方法,選擇出其子代,后代,兄弟或后面的同級(jí)元素,以此來(lái)添加相應(yīng)顯...
今天主要學(xué)習(xí)的是emmet的使用和簡(jiǎn)單表單的制作,下課后主要思考點(diǎn)是,如何用emmet快速來(lái)寫(xiě)出一個(gè)表單代碼來(lái),成品效果如下: 基本代碼如下:
本文為第一課的核心知識(shí)點(diǎn)總結(jié),主要是關(guān)于前端開(kāi)發(fā)環(huán)境搭建和網(wǎng)頁(yè)構(gòu)成的基本認(rèn)識(shí),前者主要是瀏覽器chrome和編輯器VSCode 前端開(kāi)發(fā)環(huán)境之瀏覽器chrome配置課上老師只是展示一下其檢查功能中的最基本一項(xiàng),把一個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)讓我們看的清清楚楚...
本課主要關(guān)于網(wǎng)頁(yè)基礎(chǔ)認(rèn)識(shí)部分 第一部分:頁(yè)面元素頁(yè)面為一個(gè)二維空間,所有元素的排列只有垂直和水平兩種方式,各元素的方式如下: 塊元素垂直排列,主要用來(lái)當(dāng)容器,最常見(jiàn)的元素就是DIV 行內(nèi)元素水平排列,主要為內(nèi)容項(xiàng),最常見(jiàn)的元素就是 ...
