Week4 1.md - 4YCAaaa/wp109b GitHub Wiki

網頁設計第四週練習筆記-1

CSS Navigation Bars & Dropdowns

<!DOCTYPE html>
<html>
<head>
<style>
/*上方表單底色*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#484891;
}
/*上方表單框線*/
li {
  float: left;
  border-right:1px solid #9393FF;
}

li:last-child {
  border-right: none;
}
/*表單字體*/
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color:#97CBFF;
  border-right:1px solid #9393FF;
}

.active {
  background-color:#8080C0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #97CBFF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color:#484891;}

.dropdown:hover .dropdown-content {
  display: block;
}

</style>
</head>
<body>
<ul>
  <li class="dropdown">
  <a href="javascript:void(0)" class="dropbtn">Index</a>
   <div class="dropdown-content"style="float:right;">
     <a href="#">Home Page</a>
     <a href="#">About</a>
     <a href="#">Something</a>
     <a herf="#">Contact</a>
    </div>
  <li><a class="active" href="#homepage">Home Page</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#something">Something</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<p>&nbsp Hello World. (｡•ㅅ•｡)♡</p>


</body>
</html>

參考閱讀筆記: w3schools.com

⚠️ **GitHub.com Fallback** ⚠️