導航條的製做(css)

時間  2019-12-11
標籤 導航 製做 css 欄目 CSS 简体版
原文   原文鏈接

1、在作導航條的時候，經過用css怎麼讓通過的a元素的邊框顏色發生改變呢？css

2、遇到的問題是重合的邊框老是解決很差,而後解決的辦法是html

     先肯定讓他們的右邊框與下一個元素的左邊框重合。htm

    層級的前後順序 a:hover{z-index: 1}utf-8

3、z-index必須在定位元素上才能奏效，因此定義了a的定位。最後問題解決了。it

<!DOCTYPE html>
<html>
<head>
 <title>滾動條的樣式製做練習</title>
 <meta charset="utf-8">
 <style type="text/css">
        *{margin:0;padding:0;}
        .nav{position: absolute;top:50px;left:30px;}
        .nav a{position:relative;float: left;display: block;height: 30px;line-height: 30px;padding:10px;text-decoration: none;
         border:1px solid #000;margin-left: -1px;}
         a:nth-last-child(1){border:1px solid #000; }
         a:hover{z-index: 1;border-color: red;} 
 </style>  
</head>
<body>
<div class="nav">
 <a href="#">首頁</a>
 <a href="#">新聞</a>
 <a href="#">指南</a>
 <a href="#">專題</a>
 <a href="#">關於咱們</a>
</div>
</body>
</html>io

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程