CSSの高度なスキル（7）

その他 2021-03-27 23:28:10 訪問数: null

要素の表示と非表示

表示（非表示）

表示と非表示

  • 表示：なし（非表示）
  • display：block（表示）

特徴

先隐藏元素 不占位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        .box1 {
         
            display: none;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

ここに画像の説明を挿入

可視性（表示と非表示）

  • 可視性：非表示（非表示）
  • 可視性：可視（表示）

特徴

先隐藏元素 占位置



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            
        }
        
        div {
            width: 200px;
            height: 200px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        .box1 {
            background-color: yellow;
            /* 设置元素的显示与隐藏 */
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

ここに画像の説明を挿入

オーバーフロー（要素の表示と非表示）

  • オーバーフロー：表示は、コンテンツをトリミングせず、スクロールバーを表示しません
  • オーバーフロー：非表示のコンテンツは、それを超えるとクリップされます
  • オーバーフロー：スクロールは常にスクロールバーを表示します
  • オーバーフロー：autoは、スクロールバーが表示スクロールバーを超えた場合、スクロールバーを表示しません
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 400PX;
            height: 200PX;
            border: 1px solid red;
            /* 超出部分则自动剪裁 其它属性值请看说明  */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        缓慢地升起后小心地将树苗移向事先挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的时间，工人们共栽下国槐、西府海棠等树苗50余株。 据门头沟区城市管 理委员会相关负责人介绍，本次景观提升工程主要对S1线门头沟段沿线，设计总绿化面积约11万平方米，主要选择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等植物，打造三季有花、四季有景的景观效果。 缓慢地升起后小心地将树苗移向事先挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的时间，工人们共栽下国槐、西府海棠等树苗50余株。
        据门头沟区城市管 理委员会相关负责人介绍，本次景观提升工程主要对S1线门头沟段沿线，设计总绿化面积约11万平方米，主要选择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等植物，打造三季有花、四季有景的景观效果。

    </div>
</body>

</html>

ここに画像の説明を挿入

コンテンツの概要を表示および非表示

ここに画像の説明を挿入

ケースの表示と非表示

分析：盒子里面原本有一个半透明的遮罩，设置隐藏，当鼠标经过a时显示。在特殊情况下，a链接可以放div标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            position: relative;
            width: 222px;
            height: 220px;
            margin: auto;
            border: 1px solid red;
        }
        
        .box a {
            display: block;
        }
        
        .box img {
            width: 100%;
        }
        
        .box .mask {
            display: none;
            position: absolute;
            width: 222px;
            height: 220px;
            background: rgba(0, 0, 0, 0.3) url(img/arr.png) no-repeat center center;
        }
        
        .box a:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="">
            <!-- 遮罩层 -->
            <div class="mask"></div>
            <img src="./img/3.jpg" alt="">
        </a>
    </div>
</body>

</html>

ここに画像の説明を挿入

CSSユーザーインターフェイススタイル

マウススタイル

ここに画像の説明を挿入

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            list-style: none;
            line-height: 200px;
            text-align: center;
            font-weight: bold;
            color: white;
            background-color: #0000FF;
        }
        
        li:nth-child(1) {
            cursor: default;
        }
        
        li:nth-child(2) {
            cursor: pointer;
        }
        
        li:nth-child(3) {
            cursor: move;
        }
        
        li:nth-child(4) {
            cursor: text;
        }
        
        li:nth-child(5) {
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <ul>
        <li>默认的鼠标状态</li>
        <li>小手状态</li>
        <li>移动状态</li>
        <li>文本状态</li>
        <li>禁止状态</li>

    </ul>
</body>

</html>

ここに画像の説明を挿入

等高線

実際の開発では、等高線は直接削除されます

  outline:none


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            outline: none;
        }
    </style>
</head>

<body>
    账号：<input type="text">
</body>

</html>

ここに画像の説明を挿入

テキストフィールドがドラッグされないようにする

 resize:none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                paddding: 0;
            }

            textarea {
                width: 200px;
                height: 200px;
                outline: 0;
                resize: none;
            }
        </style>
    </head>
    <body>
        <h2>留言板</h2>
        <textarea rows="" cols="">

        </textarea>
    </body>
</html>

ここに画像の説明を挿入

ユーザーインターフェイススタイルの概要

ここに画像の説明を挿入

垂直方向の中央

インライン要素とインラインブロック要素に対してのみ有効であることに注意してください

vertical-align:top(顶线)  middle(中线)  baseline(基线)  bottom(底线)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {
                vertical-align: middle;
            }
    
        </style>
    </head>
    <body>
        
        <img src="../CSS（4）/6.导航栏案例/image/button2.jpg" alt="" > hello word
    </body>
</html>

ここに画像の説明を挿入

画像のギャップを取り除く2つの方法

  • ベースラインでない限り、vertivcal-alignの属性を使用します
  • display：blockを使用すると、この問題も解決できます
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            border: 1px solid red;
        }
        
        img {
            height: 600px;
            /* 去除图片底部缝隙的第一种方法 */
            /* vertical-align: bottom; */
            /* 去除图片底部缝隙的第二种方法 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./img/timg.jpg" alt="">
    </div>
</body>

</html>

ここに画像の説明を挿入

テキストの省略

空白：nowrapは、行にデフォルトの属性値を通常どおり表示するように強制します

オーバーフロー：隠された隠された要素

text-overflow：省略記号のデフォルトの属性値テキストオーバーフローは省略記号です

注：3つのステップのいずれかを少なくすることはできません

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="box">hello 我的名字叫做尧子陌 很高兴认识各位哦</div>
</body>

</html>

ここに画像の説明を挿入

魔神テクノロジー

スプライトグラフの利点

サーバーの要求と受け入れの数を減らし、ページの読み込み速度を向上させます

独自のスプライトマップを作成する方法

各背景画像のサイズと位置を正確に測定します

ボックスの幅と高さを設定する場合、位置は通常負の値です

スプライトパターンの例

あなたの名前を綴る

ここに画像の説明を挿入

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            float: left;
            background: url(img/name.jpg) no-repeat;
        }
        
        .box1 {
            width: 116px;
            height: 106px;
            background-position: -365px -557px;
        }
        
        .box2 {
            width: 110px;
            height: 110px;
            background-position: 0px -9px;
        }
        
        .box3 {
            width: 108px;
            height: 108px;
            background-position: -370px -280px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

ここに画像の説明を挿入

独自のスプライトマップを作成する

各スプライトはきちんと配置され、解像度は72pt、背景は透明、フォーマットはpngフォーマットである必要があります。
ここに画像の説明を挿入

引き戸技術

さまざまな特殊な形状の背景をテキストコンテンツの量に適応させるために、引き戸技術が登場しました。

コアテクノロジー：cssウィザードとパディングパディングを使用する

注意点

  1. aは左側を担当します-シーンスパンは、適切な幅を拡張するためのパディングを備えた右側の背景を担当します
  2. ナビゲーションバー全体がリンクであるため、aにはスパンが含まれます

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            display: inline-block;
            height: 33px;
            line-height: 33px;
            padding-left: 15px;
            color: white;
            text-decoration: none;
            background: url(img/ao.png) no-repeat left center;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(img/ao.png) no-repeat right center;
            padding-right: 15px;
        }
    </style>
</head>

<body>
    <a href="#">
        <span>首页 </span>
    </a>

</body>

</html>

ここに画像の説明を挿入

WeChatナビゲーションバーケース

注：引き戸技術が使用されています

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(./img/wx.jpg) repeat-x;
        }
        
        .nav {
            margin-top: 20px;
        }
        
        .nav li {
            list-style: none;
            float: left;
            margin: 0px 20px;
        }
        
        .nav a {
            display: inline-block;
            height: 33px;
            color: white;
            line-height: 33px;
            padding-left: 15px;
            background: url(./img/to.png) no-repeat left;
        }
        
        .nav a span {
            display: inline-block;
            height: 33px;
            padding-right: 15px;
            background: url(./img/to.png) no-repeat right;
        }
        
        .nav a:hover {
            background-image: url(./img/ao.png);
        }
        
        .nav a:hover span {
            background-image: url(./img/ao.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>帮助与反馈</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>公众平台</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

ここに画像の説明を挿入

ネガティブマージンの美しさ

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            float: left;
            height: 400px;
            width: 400px;
            border: 1px solid red;
            /* 利用margin负值可以合并边框 */
            margin-left: -1px;
            margin-top: -1px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

ここに画像の説明を挿入

負のマージンはボックスの美しさを際立たせることができます

  • 位置決めにより、ボックスを最高点まで持ち上げることができます
  • z-indexを使用して、マージンが負のボックスを表示できます。
    ここに画像の説明を挿入

CSSトライアングルの美しさ

ケーススタディ

次のように進めます

幅と高さがすべて0の場合、三角形の色を維持する必要があり、不要な三角形の色を透明に設定できます。
互換性に注意してください。line-height：0 font-size：0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-left: 10px solid #000000;
                /* 照顾兼容性 */
                line-height: 0;
                font-size: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

ここに画像の説明を挿入

トライアングルケース

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: #0000FF;
            margin: 200px auto;
        }
        
        p {
            position: absolute;
            left: 50%;
            /* 两个三角的距离的一半 所以-50px */
            margin-left: -50px;
            /* 两个三角的距离 所以-100px */
            margin-top: -100px;
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-bottom: 50px solid black;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

</html>

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_45419127/article/details/110285508
おすすめ
ランキング
パイソンのPythonの設計哲学--zen
VUE - 1を学習の開発ブログ
エントリートラバース地図要素
コードをHuaweiCloudgitリポジトリに同期する
Mavenは地元の倉庫とアリクラウド遠隔倉庫を設定しました
Linux は、ファイルとサブディレクトリの内容をすべてのユーザーが読み取り、書き込み、実行できるように変更します。
サンプルを作成するためのK8S展開＆サービス
ailoop2内部ailoop3内部の操作で、検討します。（コストは右である）海のデバッグ本当の巨人を使用した場合HearthBuddy愛2（第ヒーローのスキルが問題のトーテムを召喚使用していない、海の巨人を使用）、以下トーテムを召喚
お金が最も多くを得ました
[P1023]羅区税補助金（説明）
アーカイブ
もっと
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)

コードワールド

© 2018 codetd.com