M9 Navigation: Linking Pages and Using Pseudo Classes
|
Recap
We learned about pseudo classes in this module. A very popular pseudo class is for links. Here is an example:
We learned about pseudo classes in this module. A very popular pseudo class is for links. Here is an example:
nav a, nav a:active, nav a:visited {
color:#ffffff; text-decoration:none; } nav a:hover { color:#f00; } |
In this example, the navigation copy color is white. When visitor roll over the navigation, it turns red.
You can add more definition in the style including a different background color, different text-decoration style. etc. etc. |
Some other interesting pseudo classes:
First letter or line
:first-letter :first-line |
Responding to user
:hover :active :focus |
::selection {
background-color: #dd2020; color: #f9c; } |
Activities
- In the class, we will refine our personal page, add pseudo classes. We will introduce a simple jQuery code so that our page will slide smoothly. We will also introduce a small javaScript so that we can load up some random quotes for our page.
- Work with your group create all pages and link them together. (Finish creating all pages, and link them together. The pages don't need to contain all final content, but they should be linked, and the general design should be complete. Make sure each page has a unique title in the <title></title>.)
Assignments:
- Assignment 9.1: Work with your group create all pages and link them together. (Finish creating all pages, and link them together. The pages don't need to contain all final content, but they should be linked, and the general design should be complete. Make sure each page has a unique title in the <title></title>.)