要怎麼連接js到html? 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 9月 06, 2021 今天我想破頭的問題如何將javascript文件連接到html?上次我css也遇到同樣的問題,不過發現用link就好了,本來還以為完蛋的說這次一樣,不過我自己找不出來,所以上網google中最後發現使用<script>然後在中間塞關於js的程式碼 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 留言
css position 小心得 - 4月 08, 2022 最近有在研究position,在css中這算是一個非常重要的屬性,網頁中的定位全要靠它,在此整理一些研究時的筆記跟我的小小心得~ 首先,是我對position作用的理解 對網頁上物件的屬性添加了position就可以改變物件的排列方式,改變其在網頁上位置,但其實就算都沒有添加,原本物件間也會有自己的排列,所以我會覺得說,position它其實是在對網頁上的物件做一個「改變定位參考對象」的動作,預設狀態下參考對象會是原本物件資料自己本身的排列狀態,position的值會改變定位參考對象,從而改變物件排列方式。 position主要有的值大致分成以下五種: static relative fixed absolute sticky static 這個值是假如都沒設position,預設就會是satic。 幾個我覺得重要的點 使用了這個值,其他的定位方式都會失效 很少用到,因為預設就是static,我想要預設那我就不下就好 relative 相對定位,它的定位參考位置還是原本預設狀態的,但是可以讓顯示位子去做偏移,意思就是能在不改變網頁佈局的狀態下去改變物件位子,假如去做偏移的話,會依造原本預設狀態的基礎下再去改變 absolute 絕對定位,它的定位參考位置就直接脫離原本預設狀態,所以讓設定的物件做偏離之外,就不會佔據任何空間 = 其他沒被absolute且還是原本預設狀態的物件也會被跟著影響。另外,它的參考對象會是最近的非static設定的父層空間,所以常常在使用absolute時它的父層會在設定一個relative就是此道理,除了relative之外,fixed跟sticky也可以作為定位參考對象 fixed 固定定位,它的定位參考對象一樣會脫離原本的預設狀態,不過跟absolute不同的是,所定位參考對象會是當前視窗,意思就是當在滑動視窗捲軸時,不管怎麼滾動,被設定了fixed的物件都能一直固定在相同位置,等等講完sticky會一起用示意圖來跟abosolute做比較 sticky 黏貼定位,擁有剛剛所講述的relative和fixed的特性,關於定位參考對象可以成在跨過特定值前為相對定位,之後為固定定位,那什麼是特定值呢? 這就要來說到為什麼要使用黏貼定位: 簡單來說,是想要在網頁畫面上有著固定的效果,但是滑到一定地方之後,就不想繼續固定時,就會使用stick 閱讀完整內容
什麼時候會用img , 什麼時候會用background-image - 3月 26, 2022 一個是html標籤的img,一個是css的background-image,兩個都能讓網頁中顯示出圖片。 我自己目前個人遇到的狀況會使用img > background-image 。 img: 會使用img的情況通常是: 網頁不只是需要單純的一張圖片而已,還需要像是超連結的功能,或是想讓圖片能夠縮小放大。 有需要使用動畫的時候,因為img的動畫表現會比background-image更好。 影印頁面時,圖片也想跟著被印出來。 background-image: 簡單來說,是像是網頁中當背景圖片的感覺,意味著background-image其實並沒有自己本身的意義存在,它沒有辦法去代表網頁中內容的任何事情。 會使用的狀況: 圖片不是內容的一部分(設計考量)。 網頁需要有圖片當背景。 影印頁面時,圖片不想跟著被印出來。 小結: img是屬於頁面內容的一部分,它是擁有含義的圖片。 background-image則是不屬於頁面內容的一部分,它是沒有含義,可以拿來單純當作背景的圖片。 閱讀完整內容
便當問題(js變數) 第一個寫的js程式! - 9月 03, 2021 假如一個便當是80元 超過10個便當則一個便當就折價成70元 要如何使用判斷式輸出對應價格 我自己的寫法 首先先設定變數,也就是初始值 便當一個是多少 折價後是多少 跟可能會有幾個便當的 count,也就是數量 都設定好之後再設定一個總價 也就是上面的便當多少錢乘以數量這樣 不過沒用到,我就直接把算法寫在判斷式了,可以改進 最後判斷式在if 假如便當沒超過十個 就正常的算 超過十個的話,每個就以折扣0.875來看 這個數字是因為超過十個就80變成70那邊推算出來的 以上,雖然很簡單,不過是我的第一個手寫的,感動 閱讀完整內容
留言
張貼留言