CSS ピックアップ矢印、カタログ、アイコン実装コード

xxx プロジェクト
    - アプリ
      -s1.html
      -s2.html
    - css
      -commons.css
    - スクリプト
      - コモンズ
    - プラグイン
      -素晴らしい
      - ブートストラップ
      - ...

<ヘッド>
    <スタイル>
        画像{
            境界線: 0;
        }
        /* IE ブラウザは境界線を生成するので、境界線を 0 に設定します */
    </スタイル>
</head>

<本文>
    <a href="wwww.baidu.com">ランシン</a>
    <a href="www.baidu.com">
        <img style="height:300px;width:400px" src="wallpaper1.jpg" alt="ランシン">
    <あ>
<本文>

<スタイル>
        。上 {
            border-top: 30px 緑一色;
            border-right: 30px 透明の実線;
            border-bottom: 30px 透明の実線;
            border-left: 30px 透明の実線;
            表示: インラインブロック;
        }
        。下 {
            border-top: 30px 透明の実線;
            border-right: 30px 透明の実線;
            border-bottom: 30px 赤一色;
            border-left: 30px 透明の実線;
            表示: インラインブロック;
        }
        .c1 {
            境界線: 30px 透明の実線;
            border-top: 30px 緑一色;
            表示: インラインブロック;
            上マージン: 40px;
        }
        .c1:ホバー{
            境界線: 30px 透明の実線;
            border-bottom: 30px 緑一色;
            上マージン: 10px;
        }
    </スタイル>
</head>
<本文>
    <div class="up"></div>
    <div class="down"></div>
    <div style="height: 100px; background-color: red;">
        <div class="c1"></div>
    </div>

</本文>