評分：0, 年：0, 月：0, 週：0, 日：0, [+1 / -1] 最後更新：2018-09-25 14:39:47
現在都甚麼時間了!
還在幹甚麼!!!
另外有興趣寫網頁的可以下載vscode哦
等等跟大家分享html跟css的基礎哦
我自己只學三四個月左右 會的也不是很多
有想入門程式這個領域的可以參考(html css也不算程式啦
還在幹甚麼!!!
另外有興趣寫網頁的可以下載vscode哦
等等跟大家分享html跟css的基礎哦
我自己只學三四個月左右 會的也不是很多
有想入門程式這個領域的可以參考(html css也不算程式啦
哪位?
老師好
以前的id查詢有辦法救回來嗎?
以前的id查詢有辦法救回來嗎?
>>12642698
提示 兩個字!
>>12642715
我的技術力還不到家 等我夠厲害一定救回來
開始吧! 附圖上就是簡單的網頁
只要附檔名是html或htm裡面寫東西產出來的就是網頁了哦!
很簡單吧!
我自己個人是習慣用VScode寫網頁
不會用CSP連放大縮小圖片都覺得好累
有路過的塗鴉廚可以提供教學嗎
提示 兩個字!
>>12642715
我的技術力還不到家 等我夠厲害一定救回來
開始吧! 附圖上就是簡單的網頁
只要附檔名是html或htm裡面寫東西產出來的就是網頁了哦!
很簡單吧!
我自己個人是習慣用VScode寫網頁
不會用CSP連放大縮小圖片都覺得好累
有路過的塗鴉廚可以提供教學嗎
>>12642810
你好啊
你好啊
>>12642904
今天還有一個人回我嗎
好感動 嗚....嗚嗚
不知道要怎麼跟島民互動呢...
接下來就來講講tag吧
html是由很多tag組合起來的
一層包一層
第一行是在跟瀏覽器說 這份檔案的類型是 html 呦
html主要的內容分成head跟body兩塊
head最最主要的東西就是title用來放標題的!
而網頁內容全部都在body裡面哦!
講得好像有點慢..
今天還有一個人回我嗎
好感動 嗚....嗚嗚
不知道要怎麼跟島民互動呢...
接下來就來講講tag吧
html是由很多tag組合起來的
一層包一層
第一行是在跟瀏覽器說 這份檔案的類型是 html 呦
html主要的內容分成head跟body兩塊
head最最主要的東西就是title用來放標題的!
而網頁內容全部都在body裡面哦!
講得好像有點慢..
>>12642597
剛剛竟然念成塗雞時間....030
剛剛竟然念成塗雞時間....030
無題 無名 ID:ECK0HOxQ 2018/09/25(二) 22:31:02.731 No.12643217
>>12643205
那是鴿啦幹
那是鴿啦幹
尼薪水多少
會這個在台灣薪水能有多少?
>>12643138
是...是麻?!
是說有免費能放網站空間的地方嗎?
只知道github
>>12643153
網頁前端是最好入門程式領域的語言了
JS很好上手泛用性也非常高
雖然很多島民都不推新手學JS
但寫網頁馬上就能看到畫面
其他語言剛開始都是在跟小黑窗溝通
比較沒那麼親民
>>12643158
可以跟著一起學阿 如果有興趣的話
html超簡單超好入門
>>12643205
圖姬時間!!
>>12643233
22K是基本 多的拿去做功德
>>12643243
我的能力只能教靜態網頁 動態的資料串接部分我也不是很熟
響應式如果我能撐到那個時候還不停更...
響應式其實也不難
>>12643311
新手也就30K上下吧
第一章圖沒有任何<>也會有畫面是因為副檔名就是html所以瀏覽器直接讀出文件的內容了
接下來講的想必大家都很熟悉啦
F12開發者工具 從小用電腦或多或少都會點開這東西吧
這東西功能非常強大
有很多網站影片或圖片不能右鍵 有時靠開發工具就能找到原檔了哦!
綠色框框是可以讓你快速從網頁上選取網頁的元素(html標籤)
大家可以試試看選到上面的廣告或是管管放的圖片然後按delete
當然這種方式重新整理後刪掉的圖片就又回來了
先去洗個澡 等等回來再戰!
開發工具大家可以玩一下試著把YT或是NICO的影片給載下來
是...是麻?!
是說有免費能放網站空間的地方嗎?
只知道github
>>12643153
網頁前端是最好入門程式領域的語言了
JS很好上手泛用性也非常高
雖然很多島民都不推新手學JS
但寫網頁馬上就能看到畫面
其他語言剛開始都是在跟小黑窗溝通
比較沒那麼親民
>>12643158
可以跟著一起學阿 如果有興趣的話
html超簡單超好入門
>>12643205
圖姬時間!!
>>12643233
22K是基本 多的拿去做功德
>>12643243
我的能力只能教靜態網頁 動態的資料串接部分我也不是很熟
響應式如果我能撐到那個時候還不停更...
響應式其實也不難
>>12643311
新手也就30K上下吧
第一章圖沒有任何<>也會有畫面是因為副檔名就是html所以瀏覽器直接讀出文件的內容了
接下來講的想必大家都很熟悉啦
F12開發者工具 從小用電腦或多或少都會點開這東西吧
這東西功能非常強大
有很多網站影片或圖片不能右鍵 有時靠開發工具就能找到原檔了哦!
綠色框框是可以讓你快速從網頁上選取網頁的元素(html標籤)
大家可以試試看選到上面的廣告或是管管放的圖片然後按delete
當然這種方式重新整理後刪掉的圖片就又回來了
先去洗個澡 等等回來再戰!
開發工具大家可以玩一下試著把YT或是NICO的影片給載下來
無題 無名 ID:0FwF8PrU 2018/09/25(二) 22:56:44.315 No.12643441
>>12643205
ㄊㄨˊ
ㄊㄨˊ
上一個PHP廚教沒幾天就消失了= =
賣香腸比較適合你
尼特...也不是了 現在我該叫你什麼來著
之前學習了多久呢? 現在看你能學習到並發揮所長真是太好了
之前學習了多久呢? 現在看你能學習到並發揮所長真是太好了
>>12643460
PHP那個真的很可惜 滿想學PHP的
>>12643475
勸你不要哦❤❤❤❤
>>12643493
好久沒吃到香腸了 能量不足
>>12643496
github開發的編輯器
github現在是微軟的
那atom和vscode就是同一個老爸 大家不要分那麼細
>>12643622
現在是職業尼特!
你也可以發揮你的所長的!
[aa]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>標題</title>
<!-- 網頁的樣式都放在style裡面 -->
<style>
.box{
width: 100px;
height: 100px;
background-color: #444;
margin-bottom: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h1>講解class,id以及 'CSS' </h1>
<h3>div這個tag是CSS預設只有display:block;一條屬性的tag</h3>
<h3>CSS主要是用來控制樣式的語言</h3>
<hr>
<p>以下是簡單的CSS做出來的方塊</p>
<div id="b1" class="box red"></div>
<div id="b2" class="box blue"></div>
<div id="b3" class="box"></div>
</body>
</html>
[/aa]
上面是一段簡單的程式碼執行的結果如附圖(已經懶得塗鴉了 有夠沒用
先別被這麼多的東西嚇到 一個一個看完會發現其實你都看得懂(除了meta的部分 meta有機會以後再說)
head的地方我們多了一個叫做style的tag 沒錯他就是我們這段的主角 CSS!!
css這東西是能存在於html之中的 (JS也是js是存在於<script></script>這個tag之中的
附圖可以看到三塊不同顏色的方形
通通都是藉由css來控制他們的樣式屬性
接著看到程式碼的部分
三個div就是我們的三塊方形哦!
<div id="b1" class="box red"></div>
看到<div>裡面放了兩個新的東西了吧 id以及class
id具有唯一性 (每個tag裡面只能有一個id 而js要用到id的時候如果有重複也只會抓到後面的那個
class就不同了 他可以被重複使用 也能同時擁有很多個class
簡單的說id就是每個塗鴉廚的名稱
而class就是像 '塗鴉廚' '狗屎爛畫' '島民'
可以同時是島民又是塗鴉廚甚至還是狗屎爛畫
一個div可以是這樣的組成
<div id='香腸' class='島民 塗鴉廚 狗屎爛畫'></div>
而在css要用到單個id及class則是用 #跟.
#香腸{
xxxxxxxxx
}
.塗鴉廚{
ooooooo
}
這些就是所謂的選擇器
補充: https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
這裡有很詳細的css選擇器
比較簡單的就這幾個 可以先拿來試試看
*
#X
.X
tag
X Y
X>Y
或許沒有講得很詳盡 但有不懂的地方直接跟我說 如果有看到我會回答的!
等等貼的應該是今天最後了 謝謝各位今天的收看!
我已經盡力的表達了 或許不是很清楚 但我也會跟著各位進步的
PHP那個真的很可惜 滿想學PHP的
>>12643475
勸你不要哦❤❤❤❤
>>12643493
好久沒吃到香腸了 能量不足
>>12643496
github開發的編輯器
github現在是微軟的
那atom和vscode就是同一個老爸 大家不要分那麼細
>>12643622
現在是職業尼特!
你也可以發揮你的所長的!
[aa]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>標題</title>
<!-- 網頁的樣式都放在style裡面 -->
<style>
.box{
width: 100px;
height: 100px;
background-color: #444;
margin-bottom: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h1>講解class,id以及 'CSS' </h1>
<h3>div這個tag是CSS預設只有display:block;一條屬性的tag</h3>
<h3>CSS主要是用來控制樣式的語言</h3>
<hr>
<p>以下是簡單的CSS做出來的方塊</p>
<div id="b1" class="box red"></div>
<div id="b2" class="box blue"></div>
<div id="b3" class="box"></div>
</body>
</html>
[/aa]
上面是一段簡單的程式碼執行的結果如附圖(已經懶得塗鴉了 有夠沒用
先別被這麼多的東西嚇到 一個一個看完會發現其實你都看得懂(除了meta的部分 meta有機會以後再說)
head的地方我們多了一個叫做style的tag 沒錯他就是我們這段的主角 CSS!!
css這東西是能存在於html之中的 (JS也是js是存在於<script></script>這個tag之中的
附圖可以看到三塊不同顏色的方形
通通都是藉由css來控制他們的樣式屬性
接著看到程式碼的部分
三個div就是我們的三塊方形哦!
<div id="b1" class="box red"></div>
看到<div>裡面放了兩個新的東西了吧 id以及class
id具有唯一性 (每個tag裡面只能有一個id 而js要用到id的時候如果有重複也只會抓到後面的那個
class就不同了 他可以被重複使用 也能同時擁有很多個class
簡單的說id就是每個塗鴉廚的名稱
而class就是像 '塗鴉廚' '狗屎爛畫' '島民'
可以同時是島民又是塗鴉廚甚至還是狗屎爛畫
一個div可以是這樣的組成
<div id='香腸' class='島民 塗鴉廚 狗屎爛畫'></div>
而在css要用到單個id及class則是用 #跟.
#香腸{
xxxxxxxxx
}
.塗鴉廚{
ooooooo
}
這些就是所謂的選擇器
補充: https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
這裡有很詳細的css選擇器
比較簡單的就這幾個 可以先拿來試試看
*
#X
.X
tag
X Y
X>Y
或許沒有講得很詳盡 但有不懂的地方直接跟我說 如果有看到我會回答的!
等等貼的應該是今天最後了 謝謝各位今天的收看!
我已經盡力的表達了 或許不是很清楚 但我也會跟著各位進步的
>>12643918
https://test-0722.herokuapp.com/just-do-it.html
https://test-0722.herokuapp.com/just-do-it.html
程度不錯
明天看一下vue js
禮拜五記得交學習心得
明天看一下vue js
禮拜五記得交學習心得
無題 無名 ID:ca4RV8Ew 2018/09/26(三) 00:31:53.103 No.12644184
無題 無名 ID:rbmd63Zk 2018/09/26(三) 00:39:25.400 No.12644232
>>12643945
我英文有點差 這應該是可以架網站的空間沒錯吧?!
感謝! 有時間來看看!
>>12643994
沒關係哦! 只要有心 遲早能懂得!! 看來我寫的不夠簡潔
>>12644025
vue js 真的有夠難學 現在卡關暴死在路中
趁機發問
元件A有兩個子級元件BC
要怎麼讓B資料更動時C也跟著刷新內容呢?!
>>12644055
VUE有更新這麼快哦?!
我還在vue2的路上 希望不要改太多
>>12644094
GCP是甚麼?! 好像很厲害...
今天的結尾沒有更多的程式碼
在用vscode的各位想必都有看到最左邊的那欄icon吧
沒錯最後一個就是vscode的擴充元件市集囉
幾個好用的元件介紹給各位!
每個元件安裝好都要重新開啟vscode才會有作用哦
首先是必備的 live server
他可以在自己的電腦上模擬出小的主機
你寫的程式只要在儲存之後就會自動更新到那個網頁上
操作十分簡單 只要對著編輯器右鍵選open with live server就可以開啟囉!
不需要自己存檔後又f5網頁十分方便
還有path intellisense 這個今天教的內容暫時還用不上不過可以先裝
就以上先介紹給大家
接著是在寫網頁的時候一堆<> </>有的沒的想必一定很煩吧
每個網頁開頭都要打一堆落落長的東西 很辛苦吧
vscode有內建一款叫做emmet的套件 非常的實用
(其他編輯器不知道 應該大部分都有 sublime也可以透過外部安裝取得emmet
emmet在html上的用法很簡單
剛開起來一份檔案不要急著打<!DOCTYPE.........之類的
只要打個'!' 然後按tab後就可以快樂的寫程式囉
今天先到這裡 晚安了各位!
https://www.youtube.com/watch?v=BxgZRlx_pDE
聽音樂睡覺
我英文有點差 這應該是可以架網站的空間沒錯吧?!
感謝! 有時間來看看!
>>12643994
沒關係哦! 只要有心 遲早能懂得!! 看來我寫的不夠簡潔
>>12644025
vue js 真的有夠難學 現在卡關暴死在路中
趁機發問
元件A有兩個子級元件BC
要怎麼讓B資料更動時C也跟著刷新內容呢?!
>>12644055
VUE有更新這麼快哦?!
我還在vue2的路上 希望不要改太多
>>12644094
GCP是甚麼?! 好像很厲害...
今天的結尾沒有更多的程式碼
在用vscode的各位想必都有看到最左邊的那欄icon吧
沒錯最後一個就是vscode的擴充元件市集囉
幾個好用的元件介紹給各位!
每個元件安裝好都要重新開啟vscode才會有作用哦
首先是必備的 live server
他可以在自己的電腦上模擬出小的主機
你寫的程式只要在儲存之後就會自動更新到那個網頁上
操作十分簡單 只要對著編輯器右鍵選open with live server就可以開啟囉!
不需要自己存檔後又f5網頁十分方便
還有path intellisense 這個今天教的內容暫時還用不上不過可以先裝
就以上先介紹給大家
接著是在寫網頁的時候一堆<> </>有的沒的想必一定很煩吧
每個網頁開頭都要打一堆落落長的東西 很辛苦吧
vscode有內建一款叫做emmet的套件 非常的實用
(其他編輯器不知道 應該大部分都有 sublime也可以透過外部安裝取得emmet
emmet在html上的用法很簡單
剛開起來一份檔案不要急著打<!DOCTYPE.........之類的
只要打個'!' 然後按tab後就可以快樂的寫程式囉
今天先到這裡 晚安了各位!
https://www.youtube.com/watch?v=BxgZRlx_pDE
聽音樂睡覺