首頁(yè) 猿問這個(gè)要如何實(shí)現(xiàn)

這個(gè)要如何實(shí)現(xiàn)

CSS3 Html5

木漁人R3435218 2016-10-26 10:19:31

查看完整描述

1 回答

已采納

stone310

TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

測(cè)試下是這種效果嗎

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
?li?{
????????????float:?left;
?list-style-type:?none;
?width:?100px;
?height:?40px;
?text-align:?center;
?position:?relative;
?}
????????.point?{
????????????border-bottom:?5px?solid?orange;
?}
????????.point:after?{
????????????content:?"";
?border-bottom:?10px?solid?orange;
?border-left:?10px?solid?transparent;
?border-right:?10px?solid?transparent;
?position:?absolute;
?top:?30px;
?left:?40px;
?}
????</style>
</head>
<body>
<ul>
????<li?class="point">首頁(yè)</li>
????<li>內(nèi)容</li>
????<li>聯(lián)系我們</li>
</ul>
<script>
?var?li?=?document.getElementsByTagName("li");
?for?(var?i?=?0;?i?<?li.length;?i++)?{
????????li[i].onmouseover?=?function?()?{
????????????for?(var?i?=?0;?i?<?li.length;?i++)?{
????????????????li[i].className?=?"";
?}
????????????this.className?=?"point";
?}
????}
</script>
</body>
</html>

1 反對(duì) 回復(fù) 2016-10-26