Hands On Practice 7.2

Click Here to View Link 1 Page

 

Hands On Practice 7.2

Click Here to View Link 2 Page

 

Hands On Practice 7.2

Click Here to View Link 3 Page

 

Hands On Practice 7.2

Click Here to View twocolumn.html

 

Hands On Practice 7.2

Click Here to View twocolumn.html
without bullet points

 

Hands On Practice 7.2

Click Here to View twocolumn.html
with arrows instead of bullet points

 

Hands On Practice 7.2

Click Here to View page1.html

 

Hands On Practice 7.2

Click Here to View home0.html

 

Hands On Practice 7.2

Click Here to View skipnav.html


Chapter 7

More on Links, Lists, and Layout

Hands On Practice 7.2 P.271

In this exercise I learned about pseudo-classes to create interactive hyperlinks.

Link 1 Page

The Link 1 page demostrates the use of pseudo-classes. When the mouse hovers over a link, it will change color and the underline disappears.

Link 2 Page

In Link 2 we are configuring naviational links that look like buttons. When the mouse hovers over button the text and border change.

Link 3 Page

Sometimes you will want to have a link that is not associated with the button links. The Yahoo link uses default browser settings where as the button links use a class called button to configure their settings.

twocolumn.html

This is the page that we created in Hands-On Practice Exercise 6.6.

twocolumn without bullets

In this exercise we are working with unordered lists. I just changed the css code in the navBar class. I did this by setting the list-style-type property to none.

.navBar{ text-decoration:none;
list-style-type:none;

}

twocolumn with arrows

I changed the same code again to get the arrows you see. I did this by using the property list-style-image and linking it to the image that is desired. We are replacing the default bullet points with our own image of the arrow here.

.navBar{ text-decoration:none;
list-style-image:url(arrow.gif);

}

page1.html

This is the page that we created in Hands-On Practice Exercise 6.5.

home0.html

For the horizontal list to display properly, you must add a CSS configuration for the <li> element within the nav class as follows:

.nav li { display:inline;
list-style-type:none;
}

skipnav.html

The "skip navigation" allows screen readers to easily skip repetitive navigation links.