評分：0, 年：0, 月：0, 週：0, 日：0, [+1 / -1] 最後更新：2018-09-26 14:58:53
塗雞時間!!
今天也是口汀口汀的一天哦!
今天來做K島左邊的版面列表好了
從簡單的開始 先不做書籤及搜尋功能
今天也是口汀口汀的一天哦!
今天來做K島左邊的版面列表好了
從簡單的開始 先不做書籤及搜尋功能
只有一個人理我...夠了我再也不寫狗屎爛扣了
來了 現在我可以告白了嗎
尼下班怎摸還有精神塗雞寫教學
開啟一份html然用用emmet語法'!'展開一份文件
K島的選單列十分的簡單
幾乎沒有css樣式
把東西打進去就完成7~8成了哦!
整個架構組成如附圖
發現K島版面幹多的
一堆廢版管管是不會砍一砍哦= =
這邊說明一下
h1~h6都是標題用的標籤
簡單來說字會比較大啦
雖然CSS也能調整
ul 跟 li則是配合在一起使用的標籤
通常用在沒有排列順序的清單中
ul裡包著許多的li標籤
會呈現像圖中前面帶著點點的清單哦
K島的選單列十分的簡單
幾乎沒有css樣式
把東西打進去就完成7~8成了哦!
整個架構組成如附圖
發現K島版面幹多的
一堆廢版管管是不會砍一砍哦= =
這邊說明一下
h1~h6都是標題用的標籤
簡單來說字會比較大啦
雖然CSS也能調整
ul 跟 li則是配合在一起使用的標籤
通常用在沒有排列順序的清單中
ul裡包著許多的li標籤
會呈現像圖中前面帶著點點的清單哦
[aa]
<body>
<h3>KOMICA</h3>
<ul>
<li>連線板</li>
<li><a href="https://2cat.cf/">2CAT</a></li>
<li><a href="https://2cat.cf/0d/fstyle.html">貓管理部</a></li>
<li><a href="https://komica.blogspot.com/">站務公告</a></li>
<li><a href="https://2cat.cf/~tedc21thc/anime/">動畫</a></li>
<li><a href="https://2cat.cf/~scribe/2c/">漫畫</a></li>
<li><a href="https://aqua.komica.org/04/index.htm">影視</a></li>
<li><a href="https://luna.komica.org/12/index.htm">歡樂惡搞</a></li>
<li><a href="https://aqua.komica.org/25/index.htm">新聞</a>
<li><a href="https://aqua.komica.org/62/index.htm">氣象</a></li>
<li><a href="https://2cat.cf/~tedc21thc/new/index.html">新番捏他</a></li>
<li><a href="https://2cat.cf/~tedc21thc/live/index.html">新番實況</a></li>
<li><a href="https://yuutan.mymoe.moe/pawahuru/">三次實況</a></li>
<li><a href="https://aqua.komica.org/09/index.htm">模型</a></li>
<li><a href="https://vi.anacel.com/fg/vichan/fg/">Figure/GK</a></li>
<li><a href="https://aqua.komica.org/26/index.htm">玩偶</a></li>
<li><a href="http://alica.dreamhosters.com/screenshot/">螢幕攝</a></li>
<li><a href="https://aqua.komica.org/13/index.htm">特攝</a></li>
<li><a href="http://rthost.fam.cx/sd/" target=_balnk>祭典</a></li>
<li><a href="https://tsukisiro.snow-sugar.net/iyasi/">治癒系</a></li>
<li><a href="https://aqua.komica.org/15/index.htm">蘿蔔</a></li>
<li><a href="https://aqua.komica.org/50/index.htm">攝影</a></li>
<li><a href="https://aqua.komica.org/17/index.htm">軍武</a></li>
<li><a href="https://2cat.cf/~caradmin/all-car/">車</a></li>
<li><a href="https://2cat.cf/~kirur/img2/index.htm">萌</a></li>
<li><a href="https://2cat.cf/~kirur/orz/index.htm">詢問</a></li>
<li><a href="http://rthost.fam.cx/aa/pbbs.html">AA</a></li>
<li><a href="https://secilia.zawarudo.org/costumade/">COSPLAY</a></li>
<li><a href="https://sora.komica.org/40/index.htm">改造</a></li>
<li><a href="http://komica.yucie.net/vote/">投票所</a></li>
<li><a href="http://komica.yucie.net/quiztest/">問答</a></li>
<li><a href="http://rthost.fam.cx/komica-up/upload.php">UP</a></li>
</ul>
</body>
[/aa]
這些是連線版的清單
大部分的tag裡除了放文字還能放更多不一樣的標籤哦
<a></a>是超連結的標籤
超連結需要網址 我們的網址就是放在href裡面哦!
一般超連結的標籤是長這樣的!
<a href=""></a>
有興趣的人可以跟著做
上面這段方便大家複製 不用自己一個一個打字
>>12649899
你人真好
>>12649994
塗鴉塗的這麼辛苦 竟然沒人理我 夠了.....
>>12650020
你是個好人
>>12650026
塗鴉廚宣布佔領列表!
>>12650039
上班都在摸魚(XXX
<body>
<h3>KOMICA</h3>
<ul>
<li>連線板</li>
<li><a href="https://2cat.cf/">2CAT</a></li>
<li><a href="https://2cat.cf/0d/fstyle.html">貓管理部</a></li>
<li><a href="https://komica.blogspot.com/">站務公告</a></li>
<li><a href="https://2cat.cf/~tedc21thc/anime/">動畫</a></li>
<li><a href="https://2cat.cf/~scribe/2c/">漫畫</a></li>
<li><a href="https://aqua.komica.org/04/index.htm">影視</a></li>
<li><a href="https://luna.komica.org/12/index.htm">歡樂惡搞</a></li>
<li><a href="https://aqua.komica.org/25/index.htm">新聞</a>
<li><a href="https://aqua.komica.org/62/index.htm">氣象</a></li>
<li><a href="https://2cat.cf/~tedc21thc/new/index.html">新番捏他</a></li>
<li><a href="https://2cat.cf/~tedc21thc/live/index.html">新番實況</a></li>
<li><a href="https://yuutan.mymoe.moe/pawahuru/">三次實況</a></li>
<li><a href="https://aqua.komica.org/09/index.htm">模型</a></li>
<li><a href="https://vi.anacel.com/fg/vichan/fg/">Figure/GK</a></li>
<li><a href="https://aqua.komica.org/26/index.htm">玩偶</a></li>
<li><a href="http://alica.dreamhosters.com/screenshot/">螢幕攝</a></li>
<li><a href="https://aqua.komica.org/13/index.htm">特攝</a></li>
<li><a href="http://rthost.fam.cx/sd/" target=_balnk>祭典</a></li>
<li><a href="https://tsukisiro.snow-sugar.net/iyasi/">治癒系</a></li>
<li><a href="https://aqua.komica.org/15/index.htm">蘿蔔</a></li>
<li><a href="https://aqua.komica.org/50/index.htm">攝影</a></li>
<li><a href="https://aqua.komica.org/17/index.htm">軍武</a></li>
<li><a href="https://2cat.cf/~caradmin/all-car/">車</a></li>
<li><a href="https://2cat.cf/~kirur/img2/index.htm">萌</a></li>
<li><a href="https://2cat.cf/~kirur/orz/index.htm">詢問</a></li>
<li><a href="http://rthost.fam.cx/aa/pbbs.html">AA</a></li>
<li><a href="https://secilia.zawarudo.org/costumade/">COSPLAY</a></li>
<li><a href="https://sora.komica.org/40/index.htm">改造</a></li>
<li><a href="http://komica.yucie.net/vote/">投票所</a></li>
<li><a href="http://komica.yucie.net/quiztest/">問答</a></li>
<li><a href="http://rthost.fam.cx/komica-up/upload.php">UP</a></li>
</ul>
</body>
[/aa]
這些是連線版的清單
大部分的tag裡除了放文字還能放更多不一樣的標籤哦
<a></a>是超連結的標籤
超連結需要網址 我們的網址就是放在href裡面哦!
一般超連結的標籤是長這樣的!
<a href=""></a>
有興趣的人可以跟著做
上面這段方便大家複製 不用自己一個一個打字
>>12649899
你人真好
>>12649994
塗鴉塗的這麼辛苦 竟然沒人理我 夠了.....
>>12650020
你是個好人
>>12650026
塗鴉廚宣布佔領列表!
>>12650039
上班都在摸魚(XXX
>>12650157
等下抄來用
等下抄來用
下班了嗎 辛苦了 歡迎回來
前尼特朋友 你的所長與興趣終能發揮真是太棒了
那麼我們拭目以待
前尼特朋友 你的所長與興趣終能發揮真是太棒了
那麼我們拭目以待
接著 加點樣式!
[aa]
*{
font-family: 'Trebuchet MS';
}
body {
margin: 0;
background-color: #444;
}
.boardList{
width: 300px;
height: 100vh;
background-color: #ffffee;
}
h3{
margin: 0;
padding: 10px 20px;
font-size: 30px;
color: #d10000;
}
ul {
list-style: none;
}
[/aa]
不知道大家還記不記得CSS要放在哪呢??
稍微說明上面這串程式碼是在幹嘛吧
我在整個內容的外面再包了一層
<div class='boardList'> </div>
這個是用來限制我們的選單列邊界用的哦~
那麼從頭開始說起
*{
font-family: 'Trebuchet MS';
}
米字號代表的是全域也就是整個網頁任何標籤都吃得到這項設定
font-family <<這個是自行的意思哦!
中文最常見的應該就是微軟正黑體了
英文字型非常多種 像這裡用的也是比較不常見的自行
字體主要分成兩種 襯線體 與 非襯線體 這裡我不詳細多說
簡單來說就是 細明體 和 正黑體的差別
body {
margin: 0;
background-color: #444;
}
body毫無疑問就是body 網頁的內容通通都是再body裡哦!
看到margin可能大家不是很熟悉
這等等我會詳細說明 簡單來說就是間距
因為body再瀏覽器有預設8px的margin 這裡是為了消除這8px的間距
background-color這個應該十分淺顯易懂 就是 背景-顏色
後面可以放上色碼或是rgb rgba的數值
rgb跟rgba的差別在於 rgba多了個alpha值(不透明度)
rgb的打法為 rgb(0,0,0) (黑色)
接下來說說width和height這兩項屬性
width是寬度的意思 height則是高度
網頁用的單位有很多種 px em rem %這些都很常見
px簡單暴力直接給死數值 em rem則是判斷外層元素的設定來變換大小的
%數就是%數 很常用在長寬距離上
padding這也是間距的一種 但跟margin完全不一樣等等會詳細說明
list-style 這個比較常用在ul li上 用來更換清單旁的點點樣式用的
以上! 如果有不懂都可以提問哦!
等等說明一下網頁的box model
>>12650172
抄起來!
>>12650196
廢廢!!!!
>>12650215
晚ㄤㄤ 我已經聞到要被開除的味道了
說不定很快就會回歸尼特嚕!!
[aa]
*{
font-family: 'Trebuchet MS';
}
body {
margin: 0;
background-color: #444;
}
.boardList{
width: 300px;
height: 100vh;
background-color: #ffffee;
}
h3{
margin: 0;
padding: 10px 20px;
font-size: 30px;
color: #d10000;
}
ul {
list-style: none;
}
[/aa]
不知道大家還記不記得CSS要放在哪呢??
稍微說明上面這串程式碼是在幹嘛吧
我在整個內容的外面再包了一層
<div class='boardList'> </div>
這個是用來限制我們的選單列邊界用的哦~
那麼從頭開始說起
*{
font-family: 'Trebuchet MS';
}
米字號代表的是全域也就是整個網頁任何標籤都吃得到這項設定
font-family <<這個是自行的意思哦!
中文最常見的應該就是微軟正黑體了
英文字型非常多種 像這裡用的也是比較不常見的自行
字體主要分成兩種 襯線體 與 非襯線體 這裡我不詳細多說
簡單來說就是 細明體 和 正黑體的差別
body {
margin: 0;
background-color: #444;
}
body毫無疑問就是body 網頁的內容通通都是再body裡哦!
看到margin可能大家不是很熟悉
這等等我會詳細說明 簡單來說就是間距
因為body再瀏覽器有預設8px的margin 這裡是為了消除這8px的間距
background-color這個應該十分淺顯易懂 就是 背景-顏色
後面可以放上色碼或是rgb rgba的數值
rgb跟rgba的差別在於 rgba多了個alpha值(不透明度)
rgb的打法為 rgb(0,0,0) (黑色)
接下來說說width和height這兩項屬性
width是寬度的意思 height則是高度
網頁用的單位有很多種 px em rem %這些都很常見
px簡單暴力直接給死數值 em rem則是判斷外層元素的設定來變換大小的
%數就是%數 很常用在長寬距離上
padding這也是間距的一種 但跟margin完全不一樣等等會詳細說明
list-style 這個比較常用在ul li上 用來更換清單旁的點點樣式用的
以上! 如果有不懂都可以提問哦!
等等說明一下網頁的box model
>>12650172
抄起來!
>>12650196
廢廢!!!!
>>12650215
晚ㄤㄤ 我已經聞到要被開除的味道了
說不定很快就會回歸尼特嚕!!
我是別的行業的
認真問一下，像原PO這種寫網頁的，在台北價碼大概多少？
認真問一下，像原PO這種寫網頁的，在台北價碼大概多少？
還有要分享前端程式碼的話
可以試試codepen
可以試試codepen
無題 無名 ID:stpvDtmE 2018/09/26(三) 22:29:00.324 No.12650727
來說明一下box model吧
附圖這東西打開F12就能看到
主要分成四塊
紅色是本體 content
綠色是內距 padding
藍色是外框 border
以上三個都是滑鼠可以作用到的區域
padding也會吃到background的屬性
最後是外距 margin
就算用margin撐開該元素的作用範圍也不會變大
margin的大小也不會算進元素的大小裡面
其他三個則是會影響元素的尺寸
>>12650685
我南部人啦 我的看法是
>>12650698
>>12650719
是這樣嗎!?
那*字號還真是沒用呢
之前我開始學也是用codepen做
但我發現用codepen之後還是需要學編輯器
不如意開始就學著用編輯器
codepen省略很多東西
>>12650733
K島價值=09價值 不用不用
附圖這東西打開F12就能看到
主要分成四塊
紅色是本體 content
綠色是內距 padding
藍色是外框 border
以上三個都是滑鼠可以作用到的區域
padding也會吃到background的屬性
最後是外距 margin
就算用margin撐開該元素的作用範圍也不會變大
margin的大小也不會算進元素的大小裡面
其他三個則是會影響元素的尺寸
>>12650685
我南部人啦 我的看法是
>>12650698
>>12650719
是這樣嗎!?
那*字號還真是沒用呢
之前我開始學也是用codepen做
但我發現用codepen之後還是需要學編輯器
不如意開始就學著用編輯器
codepen省略很多東西
>>12650733
K島價值=09價值 不用不用
無題 無名 ID:xrzSGU4. 2018/09/26(三) 23:14:06.868 No.12651049
>>12650942
好厲害
好厲害
蛇摸時候會講到js
無題 無名 ID:Bz7DhpJQ 2018/09/26(三) 23:29:29.936 No.12651166
超想幹可愛的差分醬❤❤❤
無題 無名 ID:rbmd63Zk 2018/09/26(三) 23:29:44.560 No.12651170
剛剛聽到公司的UI要離職了
覺得要完蛋了
今天就隨便寫一寫了
最後補充一點東西
padding margin border
這三個都可以讓他們各自從不同的方向長出來
要控制他們的方向不用想太多 上下左右四個單字加進去就對了
top right bottom left
不想打這麼麻煩也可以這樣寫
EX: padding: 10px 20px;
這樣寫意思是 上下長10px 左右長20px
也可以這樣寫
margin: 1px 2px 3px 4px;
這裡的順序不是上下左右 而是順時針的從上右下左各自長出1234px
以上!
https://codepen.io/mihawasa/pen/aaeRwm
我把東西丟在codepen上了
codepen上有把html跟css分開來寫
想要看到整頁的內容可以點右上角的change view > debug mode來看整個頁面
我的畫面長得跟k島不太一樣
加點自己覺得好看的元素進去
大家也可以試試看加上不同的東西 讓你的畫面變得很有風格哦!
有不懂的東西可以直接問我 或是 參考下面的網站
https://www.w3schools.com/default.asp
分類的很簡潔明瞭
覺得要完蛋了
今天就隨便寫一寫了
最後補充一點東西
padding margin border
這三個都可以讓他們各自從不同的方向長出來
要控制他們的方向不用想太多 上下左右四個單字加進去就對了
top right bottom left
不想打這麼麻煩也可以這樣寫
EX: padding: 10px 20px;
這樣寫意思是 上下長10px 左右長20px
也可以這樣寫
margin: 1px 2px 3px 4px;
這裡的順序不是上下左右 而是順時針的從上右下左各自長出1234px
以上!
https://codepen.io/mihawasa/pen/aaeRwm
我把東西丟在codepen上了
codepen上有把html跟css分開來寫
想要看到整頁的內容可以點右上角的change view > debug mode來看整個頁面
我的畫面長得跟k島不太一樣
加點自己覺得好看的元素進去
大家也可以試試看加上不同的東西 讓你的畫面變得很有風格哦!
有不懂的東西可以直接問我 或是 參考下面的網站
https://www.w3schools.com/default.asp
分類的很簡潔明瞭
公司的UI要離職你為什麼會完蛋= =
無題 無名 ID:sFIc7kwE 2018/09/26(三) 23:46:37.624 No.12651303
然後你覺得版太多這部份 其實你真的可以寫信給1883說
因為很少人跟他說這部份 他總是以為我說要清廢版其實是我跟一些版主有仇 或想專斷
因為很少人跟他說這部份 他總是以為我說要清廢版其實是我跟一些版主有仇 或想專斷
>>12651143
JS我自己也不太會 能講的應該也是控制樣式的比較多
甚至是只會jquery說
未來稱得到那時候我想跟大家分享vue.js
>>12651194
我怕被抓去當前端+UI
新來的UI不是很懂UI設計
公司沒半個UX 元UI對UX還有點研究
新來的不知道罩不罩得住
>>12651197
剛剛看了貓頭鷹選擇器
好像是很有趣的東西呢
這樣就不用再寫一堆選擇器了 真方便
>>12651243
既然問到css放哪
那我就先說
本來外聯檔案想放後面一點在說
css的外連檔案放的位置是在head之間 通常都放在title下面
跟原本放style的位置相同
<link rel="stylesheet" href="XXX.css">
寫法是這樣
xxx是你的路徑及檔名
如果前面有上層資料夾就要打../跳出去在換到其他資料夾
以上
如果還有不懂都可以問哦!
JS我自己也不太會 能講的應該也是控制樣式的比較多
甚至是只會jquery說
未來稱得到那時候我想跟大家分享vue.js
>>12651194
我怕被抓去當前端+UI
新來的UI不是很懂UI設計
公司沒半個UX 元UI對UX還有點研究
新來的不知道罩不罩得住
>>12651197
剛剛看了貓頭鷹選擇器
好像是很有趣的東西呢
這樣就不用再寫一堆選擇器了 真方便
>>12651243
既然問到css放哪
那我就先說
本來外聯檔案想放後面一點在說
css的外連檔案放的位置是在head之間 通常都放在title下面
跟原本放style的位置相同
<link rel="stylesheet" href="XXX.css">
寫法是這樣
xxx是你的路徑及檔名
如果前面有上層資料夾就要打../跳出去在換到其他資料夾
以上
如果還有不懂都可以問哦!
>>12651279
看附圖可能不是很清楚 有點凌亂
我css的位置是放在<head>裡的<title>下面
而<link href則是這樣
如果css有放在css的資料夾
html放最外面則是寫 ./css/test.css
>>12651377
看這附圖就是最前面少個點所以讀取不到
看附圖可能不是很清楚 有點凌亂
我css的位置是放在<head>裡的<title>下面
而<link href則是這樣
如果css有放在css的資料夾
html放最外面則是寫 ./css/test.css
>>12651377
看這附圖就是最前面少個點所以讀取不到
無題 無名 ID:gnpRFPjE 2018/09/27(四) 00:19:26.083 No.12651564
<meta charset="utf-8">
我上面多加了一行這個
現在出現中文字了 不過好像還是有點怪怪的
我上面多加了一行這個
現在出現中文字了 不過好像還是有點怪怪的
>>12651499
[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>Document</title>
</head>
<body>
</body>
</html>
[/aa]
我看你的原碼似乎沒加上這些東西
其中<meta charset="UTF-8">
這行是宣告網頁採用utf-8編碼
有加這行基本上網頁不會變成亂碼
不過我看源碼似乎就是亂碼了
該加的東西不能少哦!
[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>Document</title>
</head>
<body>
</body>
</html>
[/aa]
我看你的原碼似乎沒加上這些東西
其中<meta charset="UTF-8">
這行是宣告網頁採用utf-8編碼
有加這行基本上網頁不會變成亂碼
不過我看源碼似乎就是亂碼了
該加的東西不能少哦!
https://rem.komica.org/test.html
喔 沒錯了 你寫出來的就是這樣了吧？
喔 沒錯了 你寫出來的就是這樣了吧？
無題 無名 ID:gnpRFPjE 2018/09/27(四) 00:25:27.450 No.12651617
>>12651583
假設我這個https://rem.komica.org/ 等於隨你決定
你來親自寫一個你會覺得滿意的K島主頁列表 以及你覺得看上去太多而不需要的版面你就去除掉 你就做一個一百個版面以內的UI
你要不要試試看呢？而我也可以拿來當列表改革的參考
假設我這個https://rem.komica.org/ 等於隨你決定
你來親自寫一個你會覺得滿意的K島主頁列表 以及你覺得看上去太多而不需要的版面你就去除掉 你就做一個一百個版面以內的UI
你要不要試試看呢？而我也可以拿來當列表改革的參考
無題 無名 ID:rFNrcZkg 2018/09/27(四) 00:30:08.678 No.12651662
無題 無名 ID:JN8R7tTI 2018/09/27(四) 00:30:28.869 No.12651665
無題 無名 ID:gnpRFPjE 2018/09/27(四) 00:35:02.000 No.12651690
我想要有人修的不是關於程式的部分
而是「太多的版面」
而是「太多的版面」
無題 無名 ID:rG5Kk2v6 2018/09/27(四) 00:37:29.453 No.12651708
無題 無名 ID:u29Ux6/w 2018/09/27(四) 00:39:17.395 No.12651724
>>12651617
林奈我是可以幫妳做這種簡單的雜魚工作拉= =
我平常是做網頁後台維護工作的 php+mysql
也有幫忙做防駭客SQL Injection的工作
這種簡單的前端網頁設計 我們公司的小女生就會做了
不用花錢請人做
林奈我是可以幫妳做這種簡單的雜魚工作拉= =
我平常是做網頁後台維護工作的 php+mysql
也有幫忙做防駭客SQL Injection的工作
這種簡單的前端網頁設計 我們公司的小女生就會做了
不用花錢請人做
>>12651715
我職訓局學一個月 入職後摸一個月
更早以前也有自己練過 那時候學的都忘了
夜間版我覺得可以改善的就是文字輸入框的部分了
大面積的白色底 還有那個拳四郎真的很亮
我自己也是習慣用夜間模式
>>12651761
島民的建議不一定都是好建議 你不能全照島民的要求做
你還是自己思考一下有那些想要改進的 在請熱心島民幫忙弄吧
我職訓局學一個月 入職後摸一個月
更早以前也有自己練過 那時候學的都忘了
夜間版我覺得可以改善的就是文字輸入框的部分了
大面積的白色底 還有那個拳四郎真的很亮
我自己也是習慣用夜間模式
>>12651761
島民的建議不一定都是好建議 你不能全照島民的要求做
你還是自己思考一下有那些想要改進的 在請熱心島民幫忙弄吧
夜間版CSS討論串
https://aqua.komica.org/cs/pixmicat.php?res=12309
https://aqua.komica.org/cs/pixmicat.php?res=12309
無題 無名 ID:gnpRFPjE 2018/09/27(四) 02:12:15.914 No.12652122