ホームページ > ウェブフロントエンド > htmlチュートリアル > 「HTML5 と CSS3 の基本チュートリアル」学習ノート --Three Day_html/css_WEB-ITnose

「HTML5 と CSS3 の基本チュートリアル」学習ノート --Three Day_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:21:23
オリジナル
1076 人が閲覧しました

第 11 章

1. box-sizing: border-box (幅と高さにパディングとボーダーを含めます)

2. フローティング要素の背後に次の要素を表示できます

3.インデックスは、絶対要素、固定要素、および相対的に配置された要素にのみ有効です

4.vertical-aligh はインライン要素にのみ使用されます

baseline/middle/sub/super/text-top/text-bottom/top/bottom/ Percent/ value

第 12 章

1.

and (min-width/max-width/resolution:value)” href=”” />章

1、グラデーション背景

1) デフォルトでは、線形グラデーションは上から下にグラデーションするため、属性値で下に指定する必要はありません

 body{font-family:’ pt_sansregular’;}@font-face{ font-family: 'pt_sansregular';src: url('PTS55F-webfont.eot');src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),url('PTS55F-webfont.woff') format('woff'),url('PTS55F-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;}
ログイン後にコピー

2) 放射状グラデーション

background: aqua;//要放在前面background: linear-gradient(to top right,blue,green);background: linear-gradient(90deg,blue,green);(起点:中上线)
ログイン後にコピー

2. 要素の不透明度を設定します

opacity:value

3. コンテンツを生成する効果

/* 默认 */background: red;background: radial-gradient(yellow, red); background: radial-gradient(at top,yellow, red); background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red)
ログイン後にコピー

4. スプライトを使用して画像をステッチします。

スプライトはコンテンツを介して行われます: " "; 空白用に生成された背景画像。アイコンのサイズに合わせて高さと幅を設定できるように、display: block; に設定します。

:before和:after.more:after {content: " »";}
ログイン後にコピー
  • 第 15 章

    1, カスタムマーク

    .icon:before {background-image: url(sprite.png);content: " ";//-------------------------------------------------display: block;//height: 16px; /* 图标高度 */position: absolute;width: 16px; /* 图标宽度 */}a[href$=".xls"]:before {background-position: -17px 0;}a[href$=".docx"]:before {background-position: -34px 0;}
    ログイン後にコピー

    2, リストを選択Number

    整1) リスト全体のエンコーディングの初期値 ol を増やします start = "n"

    2) 次のリストに影響を与えるリストエンコーディングの順序リストを変更し、li 3 に value = "n"

    を追加します。マークの位置を制御します

    list-style-position=”inside/outside(default)”

    4. ドロップダウン ナビゲーション

    HTML:

    ul{   list-style: none;   margin-left: 0;padding-left: 0;}li{   background: url(../img/done_square.png) no-repeat 0 .1em;   padding-left: 15px;   line-height: 24px;}
    ログイン後にコピー

    CSS:

    <nav role="navigation">         <ul class="nav">            <li><a href="/">Home</a></li>            <li><a href="#">Products</a>                <ul class="subnav">                   <li><a href="#">Phones</a></li>                   <li><a href="#">Accessories</a></li>                </ul>            </li>            <li><a href="#">Support</a>                <ul class="subnav">                   <li><a href="#">Community Forum</a></li>                   <li><a href="#">Contact Us</a></li>                   <li><a href="#">How-to Guides</a></li>                </ul>            </li>            <li><a href="#">About Us</a></li>         </ul>         <!-- end .nav -->      </nav>
    ログイン後にコピー

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート