編碼的世界 / 優質文選 / 生涯

CSS導航菜單高亮選中菜單項

2022年5月14日
-   

我開發了一個CSS導航菜單，並為每個導航項我寫了php.file。CSS導航菜單高亮選中菜單項
homepage.php

My First Try Of CSS Navigation Bar
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/*
End navigation bar styling. */
/* This is just styling for this
specific page. */
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #fff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
.active {
background-color: red;
}
Shree Shree Property, Kolhapur
  • Home
  • About US
  • ContactUS
  • Login

    • Area
    aboutus.php

    Shree Shree Property,Kolhapur
    /* Begin Navigation Bar Styling */
    #nav {
    width: 100%;
    float: left;
    margin: 0 0 5em 0;
    padding: 0;
    list-style: none;
    background-color: #f3f3f3;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    }
    ul.primary li:hover a {
    background: pink;
    color: #666;
    text-shadow: none;
    }
    #nav li {
    float: left;
    background: #0080ff;
    }
    #nav li a {
    display: block;
    padding: 8px 17.5px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    border-right: 1px solid #ccc;
    }
    #nav li a:hover {
    color: black;
    background-color: #00bfff;
    }
    /* End navigation bar styling. */
    /* This is just styling for this specific page.
    */
    body {
    background-color: #555;
    font: small/1.3 Arial, Helvetica, sans-serif;
    }
    #wrap {
    width: 900px;
    margin: 0 auto;
    background-color: #00bfff;
    }
    h1 {
    font-size: 1.5em;
    padding: 1em 8px;
    color: #333;
    background-color: #069;
    margin: 0;
    }
    #content {
    padding: 0 50px 50px;
    }
    h4 {
    font-size: 1.1em;
    float: center;
    padding: 1em 8px;
    color: #333;
    background-color: #00bfff;
    margin: 0;
    -webkit-align-content: center;
    align-content: center;
    }
    #content {
    padding: 1em 8px;
    }
    #current a {
    color: #ff0000;
    }
    #dddd {
    color: red;
    }
    .active {
    background-color: red;
    }
    Shree
    Shree Property, Kolhapur

    Shree Shree Property
    Shree Shree Property provides
    leading property consultancy in Kolhapur
    我需要設置只從左手邊第一個主菜單的顏色。然後 我只需要改變選擇的菜單背景 的顏色和whenver我轉到其他菜單該菜單的顏色也需要改變 和以前在主頁

    熱門文章