iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

平板發文第四天
同學對工程感到十分畏懼
對著平板敲一個半小時
沒辦法,文都已經發很弱了
如果還有錯字還甚麼的,無法容忍
好的,對看這裡的看官們感到十分抱歉
明天就會回復滿滿的幹話大平台

平板發文最後一天,讓我們一起忍耐吧 (「・ω・)「


CSS說明範本點我~

是的這是小農本人小時候做的
由這門課提供,學會之後再經過修改
動畫互動網頁程式入門 (HTML/CSS/JS)

接下來位各位逐一介紹美術丟過來一張圖,HTML該怎麼寫CSS最輕鬆
與用免通靈的方式知道目前物件與物件之間是怎麼回事

* {
  border: solid 1px black; 
  box-sizing: border-box;
  font-family: 微軟正黑體;
  position: relative;
}
  • 起手式1=>星字號代表所有標籤

    • border ==> 讓頁面上所有元件顯示出他的邊框,即可判斷padding、maring、width、height大小
    • box-sizing ==> 抵銷第一項border 1px的大小,讓他算在標籤內部,這樣後面取消時才不會有嚴重跑版
    • position ==> CSS預設是static ,改成relative對齊會方便快速許多

    至於這個是甚麼意思各位看官們自行google吧



html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  
}
  • 起手式2=>滿版的框架網頁必做
    • width: 100%;height: 100%;==>高寬設定100%撐滿window
    • padding: 0px;margin: 0px;==>內具與外距為0,這樣在引用某些框架,或特定瀏覽器時可以省去這部分的苦惱
    • overflow: hidden==>當頁面東西被撐出外框時可以隱藏起來,不跑出滾動軸,改成內部div使用scroll
body {
  background-color: #d1d1d1;
  border-top: solid 20px #0080a4;
  border-bottom: solid 20px #0080a4;
}
  • 實作開始=>
    • 因為之前我們前面設定了高寬100因此body涵蓋了整個瀏覽器畫面
    • 所謂的body是指這整份文件顯示在瀏覽器的部分,如果將高寬撐成100%,那麼這個body的top&bottom便在這個頁面的上下

歐吼吼,下一篇開始用可以回台灣用辦公室的電腦寫啦~~
這五天真是挑戰極限
跑到了日本還要擔心文會不會發不出去
明天開始回復之前廢話一堆風格
感謝各位看官們這五天的包容


上一篇
三本柱大混戰 #8 老闆!!開發環境可以外帶嗎?
下一篇
三本柱大混戰 # 10 讓我們把菜鳥卡片本體完成吧
系列文
大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧31

1 則留言

0
hbdoy
iT邦新手 5 級 ‧ 2018-10-24 02:48:40

position ==> CSS預設是static ,改成relative「對其」會方便快速許多...

是這個「對齊」嗎XD

哈哈哈,對對對,用平板發文錯字特多,感謝喔喔喔

我要留言

立即登入留言