Morris' Blog

2012-05-03 15:33:02Morris

[HTML] CSS: Coding with Style

留言 0 收藏 0 推薦 0

External Style Sheets

Let's finish this section with a little interactivity.

Find the rule you built for the a element in the previous exercise and copy the whole thing, selector, braces, declaration and all.
Paste it below the curly brace.
Place your cursor right after the a in the pasted selector.
Type the following, without a space:
:hover
Change the text-decoration from "none" to "underline", also, add a color (other than blue).
Now go to the results tab and put your cursor over the links to see what happens.
By the way, touchscreen devices like phones can't hover!


HTML2.jpg




以下是 HTML 部分

<html>
    <head>
        <title>Results</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>My Homepage</h1>
        <p id="subheader">Where my thoughts can roam free.<p>
        <ul id="nav">
            <li><a href="home">Home</a></li>
            <li><a href="page1">First Page</a></li>
            <li><a href="page2">Second Page</a></li>
            <li><a href="about">About Me</a></li>
        </ul>
        <h2>Old Latin</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ligula magna, scelerisque sed cursus ac, consequat non quam. </p>
        <p>Etiam ipsum ligula, semper scelerisque fringilla nec, elementum eu dui. Aenean nec nunc nisi. Curabitur in purus at odio viverra bibendum id eu urna. Curabitur aliquet, odio a mattis semper, justo risus volutpat nunc, non ornare velit augue tincidunt quam. </p>
        <p class="neat-word">scelerisque</p>
        <p>Morbi commodo nisl mauris, convallis venenatis urna. Donec consequat tincidunt commodo. Etiam luctus, risus non dignissim gravida, nibh enim tristique turpis, vel viverra mauris dui sit amet sem. Morbi dignissim dictum tortor, vel ullamcorper sem consequat et.</p>
        <p>Ut turpis ante, pharetra vitae euismod ac, euismod at enim. Proin porttitor venenatis diam, consectetur placerat urna mattis vulputate. Vestibulum tristique scelerisque rhoncus. Donec ac lectus tortor, sit amet gravida enim.</p>
    </body>
</html>

以下是 CSS 部分
h1 {
color: blue;    
}
#subheader {
    text-align: right;
    color: orange;
}
#nav {
    background: grey;
}
#nav li {
    display:inline;
    margin-right:15px;
}
#nav a:hover{
    text-decoration: underline;
    color: yellow;
}
p {
    text-align:justify;
    margin: 0 20%;
}
.neat-word {
    text-align: center;
    font-size:30px;
    color: blue;
    text-transform:uppercase;
}