[HTML] CSS: Coding with Style＠Morris' Blog｜PChome Online 個人新聞台

2012-05-03 15:33:02| 人氣527| 回應0 | 上一篇 | 下一篇

[HTML] CSS: Coding with Style

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;
}

我要檢舉

台長： Morris

您可能對以下文章有興趣

[HTML] CSS: Coding with Style

[PHP][作業] 使用 $_GET 跳轉同檔案

[PHP][作業] 陣列使用

[HTML5][簡易] 流幕動畫

人氣(527) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 不分類 | 個人分類: [學習]HTML |
此分類下一篇:[HTML] 簡易視窗炸彈
此分類上一篇:[HTML] CSS: Coding with Style

回應(0)