iT邦幫忙

layout相關文章
共有 34 則文章
鐵人賽 SideProject30 DAY 19

技術 Day19. 網站開發過程(一) 共用Layout

今天開始正式進入切版,會先區分共用Layout優先製作,再利用bootstrap的框架,說明我通常如何切版,在這之前先複習一下前面的內容吧!Day3-5. 制定...

鐵人賽 Modern Web DAY 4

技術 Day04 問問題Debug!人生持續的修煉

當我還是個小小白時,我很困惑的就是,要怎樣問問題?不想當伸手牌,要不是在那困住很久,就是你的行為不得不就是個伸手牌,真是兩難。我突然意識到,會問問題真的好重要...

鐵人賽 Modern Web DAY 9

技術 Day 09 - Persistent Layout 是什麼?要怎麼在 App Router 中實踐?

昨天介紹了 App Router 的第一個優點,是能讓專案的檔案結構更加自由。今天接著來分享第二個優點:可以透過特殊檔案 layout.tsx 更簡單地實現 p...

鐵人賽 Software Development DAY 16

技術 第 16 天:排版元件之 Surface、Box 與 Spacer

在排版 UI 時,有時會想要把元件群組、彼此堆疊,或有時就只是需要一個可以動態撐開的空間。在 Compose 的世界裡,有些排版元件的功能就是協助我們更快的做出...

鐵人賽 Software Development DAY 15

技術 第 15 天:排版元件之 Column、Row

雖然看了這麼多元件,但在實作 UI 時,通常會組合多個元件,為了讓 UI 清楚、易懂、好看,如何排版元件就變得很重要了!若讀者曾自行把多個元件放在 Window...

鐵人賽 Modern Web DAY 2

技術 Day 2 - Slider 基本佈局 (Layout)

由於 JavaScript Slider 套件通常會用在展示相片,最常見的的佈局為四個項目區塊,包裝在一個 HTML 的 <div> 標籤中,如下圖...

鐵人賽 Mobile Development DAY 19

技術 [Day19] swift & kotlin 遊戲篇!(1) 小雞BB-遊戲製作-按鈕排版

遊戲説明 接下來我們要來製作真正的遊戲了 遊戲就是猜 左右兩隻小雞誰先破蛋 然後落入藍色還是紅色藍子裡 如果猜對了 +200分 猜錯了 -50分 並有一個頁面...

鐵人賽 Mobile Development DAY 14

技術 [Day14] swift & kotlin 實作篇!(5) 基本版面配置

swift 接下來~就讓我們還拉一下版面吧 設定背景首先點選左側 Main.storyboard 我們先來設定個底色 點選中間的view 右側功能選單 切...

技術 Sass/Css 設計模式(Smacss) DAY37

今天要來介紹 Sass/Css 設計模式啦~~首先我們先認識 最好入門的 Smacss官網: http://smacss.com/ Smacss Base 首...

鐵人賽 Mobile Development DAY 22

技術 days[21] = "Layout是怎麼運作的?"

我們在上一篇提到在Flutter整個Render Pipeline中,光是Layout這個步驟就值得獨立一篇出來討論,因此今天我們就繼續來深入研究整個Layou...

鐵人賽 自我挑戰組 DAY 9

技術 Day 09|Divi 功能練習 01-Layout 排版篇

嗨呦大家好我是 Jasmine~腦袋總是胡思亂想停不下來的設計師一枚\(✪ω✪)/ 大家的 Divi 安裝好了嗎? 我在找資料的時候找到了很棒的資源— Ele...

鐵人賽 Mobile Development DAY 5

技術 iOS Developer Learning Flutter. Lesson4 畫面佈局

我認為學習前端技術的第一步都是先了解如何layout再去學習各個Components的特性接著再逐漸擴展到其他功能(例如打API之類的)而Flutter的lay...

鐵人賽 Modern Web DAY 15
~網頁入門~ 系列 第 15

技術 Day15-HTML(11) – 語意化標籤與Layout

什麼是語意化標籤 為了讓標籤更具意義,並加強結構化,讓瀏覽器更清楚了解,HTML5 新增了語意化標籤(Semantic Elements),像是 <hea...

鐵人賽 Modern Web DAY 24
.Net Core 網站開發 101 系列 第 24

技術 Views 視圖

在 MVC 架構中,View 負責將結果呈現給客戶端,通常會產生出 HTML 到瀏覽器端顯示。在 ASP.NET Core MVC 中,使用 Razor 語法來...

鐵人賽 Software Development DAY 18
Kotlin for Android 系列 第 18

技術 Day 18. Android Layout 版面設計-4/4

  今天要來處理不同尺寸設備上的顯示問題,昨天我們設計了一個在手機上看起來還不賴的排版,但若在平板上看起來會如何呢?   看起來...似乎是場災難,今天的章節...

鐵人賽 Software Development DAY 17
Kotlin for Android 系列 第 17

技術 Day 17. Android Layout 版面設計-3/4

  今日一開始來小試身手,在 logo 右側加入一個 TextView,設定左下右如下圖的約束:   再快速的新增三個圖示進來,這裡介紹 Chains,用一個...

鐵人賽 Software Development DAY 16
Kotlin for Android 系列 第 16

技術 Day 16. Android Layout 版面設計-2/4

  在預設的版面設計上,會有一個動作列如下圖左邊所示,此項目主要用於放選單、查詢、排序...等等,一些介面操控功能,或是顯示目前使用者所在的動作頁面,各位不妨打...

鐵人賽 Software Development DAY 15
Kotlin for Android 系列 第 15

技術 Day 15. Android Layout 版面設計-1/4

  接下來的課程會著重在 Android ConstraintLayout System,ConstraintLayout 作者一直在想怎麼翻成中文比較方便撰寫...

鐵人賽 Modern Web DAY 12

技術 [鐵人賽Day12] - View(2) / Tag Helper及Layout

前言 本篇將針對View中Tag Helper及Layout進行介紹。 同步發表於個人點部落 - [鐵人賽Day12] ASP.Net Core MVC 進化...

鐵人賽 Modern Web DAY 27
Angular Material完全攻略 系列 第 27

技術 [Angular Material完全攻略] Day 27 - Angular CDK(3) - Bidirectionality、Layout

今天我們來講Angular CDK中兩個跟版面配置有關的功能,分別是Bidirectionality、Layout。 Bidirectionality主要是用來...

鐵人賽 Software Development DAY 13

技術 瀏覽器引擎處理版面佈局的簡易版(三)

本系列目錄 《來做個網路瀏覽器吧!》文章列表 接續昨天討論 robinson/src/layout.rs 這個 layout 模組。 一般來說,box 是從...

鐵人賽 Software Development DAY 12

技術 瀏覽器引擎處理版面佈局的簡易版(二)

本系列目錄 《來做個網路瀏覽器吧!》文章列表 昨天討論了什麼是 box。算是對 layout 有初步認識了。今天來看 robinson/src/layout...

技術 Android Studio 筆記─Layout元件介紹

Layout 決定app的外觀,來介紹幾個常見的Layout元件。Layout元件主要有分五種:Linear Layout(線性佈局)、Relative Lay...

鐵人賽 自我挑戰組 DAY 9
30 天 CSS 隨手筆記 系列 第 9

技術 30 天 CSS 隨手筆記 - 第 09 天 - OMG... Grid Layout~!! ( 5/7 - item 屬性 )

在 grid conatiner 上可以畫出表格後,剩下的就是 grid item 的事了。 不多加設定的話,那麼預設是一個 item 佔一個 grid cel...

鐵人賽 自我挑戰組 DAY 7
30 天 CSS 隨手筆記 系列 第 7

技術 30 天 CSS 隨手筆記 - 第 07 天 - OMG... Grid Layout~!! ( 3/7 - container 屬性 1 )

今天筆記了幾個在 grid 上的基礎屬性,分別為: display ( 特定 value ) grid-template-columns grid-templ...

鐵人賽 自我挑戰組 DAY 6
30 天 CSS 隨手筆記 系列 第 6

技術 30 天 CSS 隨手筆記 - 第 06 天 - OMG... Grid Layout~!! ( 2/7 - 概觀 )

本來預計今天要筆記 Grid 相關屬性的,但考慮過後決定延到下一篇。 這篇分為三個部分: ( 舉例 ) grid 大概是什麼樣子呢? 術語介紹 DEMO -...

鐵人賽 自我挑戰組 DAY 5
30 天 CSS 隨手筆記 系列 第 5

技術 30 天 CSS 隨手筆記 - 第 05 天 - OMG... Grid Layout~!! ( 1/7 - 簡介 )

10 月時,我與同事一起參加了 CSS Conf 2016,非常多的講者都在推 Grid 這個東西。( 我當時連聽都沒聽過,還覺得那可能是一個新的 css fr...