CSS可以通過a標(biāo)簽的屬性來打開新窗口,即target屬性,可以設(shè)定為"_blank"。
<a target="_blank">打開新窗口</a>
以上代碼可以在點(diǎn)擊鏈接時(shí)使用瀏覽器的新窗口打開鏈接。
如果您想通過CSS樣式表來打開新窗口,可以使用:before或:after偽元素來替代具體元素,通過content屬性添加鏈接文本和target屬性來達(dá)到目的,例如:
.new-window:before {
content: "打開我的博客";
display: block;
}
.new-window:after {
content: "\f08e";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: 5px;
}
.new-window {
display: inline-block;
background-color: #007bff;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-radius: 3px;
}
.new-window::before,
.new-window::after {
display: inline-block;
vertical-align: middle;
}
.new-window:hover {
background-color: #0056b3;
}
.new-window:active {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
.new-window {
position: relative;
}
.new-window:before {
position: absolute;
bottom: 100%;
left: -300%;
transition: all 0.3s;
opacity: 0;
}
.new-window:hover:before {
left: -200%;
opacity: 1;
}
.new-window:after {
position: absolute;
right: -20%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s;
}
.new-window:hover:after {
right: -10%;
}
以上代碼會(huì)創(chuàng)建一個(gè)類名為new-window的元素,hover時(shí)將顯示一個(gè)打開新窗口的圖標(biāo),點(diǎn)擊元素時(shí)會(huì)在新窗口打開鏈接。
通過使用target屬性或CSS樣式表,您可以方便地打開新窗口,提供更好的用戶體驗(yàn)。