Html button問題,初學者勿噴~~~感謝各位

html5 css button mvc

lingting 2021-08-21 23:38:22 ‧ 1852 瀏覽

想要做一個類似下圖的按紐
這張的信箱
這張的購物籃

遇到的問題:
1.不會把圖變成按鈕(網路上基本都是按鈕改背景)
2.按紐不會放到右上角
3.跟我的LOGO圖還有文字都不對齊(希望logo 文字按鈕統一對齊底部)
以下是練習時的慘狀:

看更多先前的討論...收起先前的討論...

CherryYang iT邦新手 4 級 ‧ 2021-08-22 18:39:02 檢舉

哈囉～我也是剛學幾個月的菜鳥，能加FB一起交流嗎？

lingting iT邦新手 5 級 ‧ 2021-08-22 22:21:02 檢舉

可以呀,給我FB >w<

窮嘶發發發 iT邦高手 1 級 ‧ 2021-08-23 09:21:58 檢舉

建議多練練 CSS 的語法，基本上如果沒有表單事件，可以直接用 CSS 模仿按鈕
如果有表單事件，才去改表單物件的 CSS 語法，另外建議都是初心者
那不如直接找一個前端框架來學習上手，花的時間其實都差不了多少
例如 BOOTSTRAP，這算是最多人用的，他也有一堆JQ套件可用
基本上對開發網站可以提升非常多的效率

Yaowen iT邦研究生 4 級 ‧ 2021-08-23 10:16:48 檢舉

我覺得學asp.net 架構 View的部分建議使用BOOTSTRAP...

lingting iT邦新手 5 級 ‧ 2021-08-23 13:19:52 檢舉

好的,感謝各位><

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-08-22 07:03:14

最佳解答

1.不會把圖變成按鈕(網路上基本都是按鈕改背景)

<button type="button"><i class="fa fa-fb"></i>狂</button>
<a href=""><img src="" /></a>

以上是基本的，當然還有更進階的，請自行GOOGLE了

2.按紐不會放到右上角

<style>
.rtop{
    position: absolute;
    top: 0;    
    right: 0;    
}
</style>

<button class="rtop"></buton>

上面是基本的。如果不會的話，請查看CSS。
網路上很多這樣的教學。畢竟這些是簡單基本的

3.跟我的LOGO圖還有文字都不對齊(希望logo 文字按鈕統一對齊底部)

這是我不太想回答

結論：
總之，你的問題都是很基本的東西。大多數都是CSS調整有關。
而這些都是網路上隨便找就一堆教學。
雖然你說了勿噴。

但你的作為跟表現實在是很......
好啦!算了，你都說勿噴了..我也點到為止就好。
其它加油了

回應 3
分享
檢舉

lingting iT邦新手 5 級 ‧ 2021-08-22 11:55:11 檢舉

謝謝您,有特別推薦的教學網站嗎><,因為我關鍵字,常常找不到需要的東西TT

newkevin iT邦高手 1 級 ‧ 2021-08-23 08:17:07 檢舉

你用過那些關鍵字阿

lingting iT邦新手 5 級 ‧ 2021-08-23 13:19:32 檢舉

我查CSS BUTTON 圖按鈕,還有html如何圖文底部對齊

登入發表回應

緯大啊緯大人

iT邦研究生 1 級 ‧ 2021-08-22 00:14:02

圖片變按紐 <img src="" onclick=""> 裝圖， onclick後面寫js的function，即可當按紐，或使用id後至js製作onclick function。
你要放哪的右上角，黑色bar最右邊??
建議你放出你的前端程式碼....沒人知道你寫了什麼很難判斷~放程式碼時請使用下圖紅框之功能

回應 1
分享
檢舉

lingting iT邦新手 5 級 ‧ 2021-08-22 11:58:06 檢舉


<h1><img src="~/Img/LOGO.png" width="70" height="70">ABC影音網站<button type="button" style="width:60px;height:60px;"><img src="~/Img/fb.png" width="90" height="90"></button></h1>

上面是我的程式碼
右上角指的是LOGO跟文字最右邊

登入發表回應