HTML 踩坑-不要使用 Button 标签来做类似方形的按钮

前言

放假闲来无事,便给自己写了一个个人页,顺便检验一下自己的 HTML 学习成果,结果踩了不少坑(((
这篇是系列文章第一弹(?),之后遇到坑还会写出来w

P.S.:本人技术十分弱,有错误请在评论区指出qwq

正文

最开始实现首页上横排的三个按钮,枫是这么做的:

<input type="button" value="Blog" onclick="document.location='https://sakurai.in'" style="width:120px;height:45px;border: pink 2px solid;background-color:pink;margin: 5px;">

它看起来是这样的:
如果你看到的是一个方形的按钮上面显示着 Blog,那么你使用的可能是 Chromium 或者 Gecko 内核的浏览器,但如果你看到的是这样子的按钮的话:

按钮

那么你可能使用的是 Safari 或者 iOS 上面的其他的浏览器(按照 Apple 的要求,iOS 上的所有的浏览器必须使用与 Safari 相同的内核)
如图所示,这样写出来的按钮在 iOS 上的观感并不好,所以在写这种按钮的时候,建议使用<a>标签来写,例如:

HTML:
<a href="https://sakurai.in">Blog</a>
CSS:
a:link, a:visited {
display:inline-block;
text-align: center;
text-decoration: none;
width:100px;
color: black;
border: pink 2px solid;
background-color:pink;
margin: 5px;
padding: 10px;
}
a:hover, a:active {
background-color: hotpink;

(代码可应实际需求更改)

 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇