htmlアダプティブの方法、css Webページの初期化の方法、16の美しいコンテナスクロールバーcssスタイル、タグのアンカーマークは簡単に使用できます

その他 2020-10-26 12:09:40 訪問数: null

序文

「歩数を積み上げないと千マイルに到達できません。小さな流れを積み上げないと川になれません」

（1）画面中央のコンテナのスタイルを設定します

    .style{
    
    
            position: absolute;              可以先使标签绝对定位
            left: 50%;                       让他左边距为整个网页  的50%；
            top: 50%;                        让他顶部距为  整个网页  的50%;
            margin-left: -600px;             再减去自声宽度  的一半
            margin-top: -200px;              减去自身高度的一半
            width: 1200px;
            height: 400px;
     }

（2）Webページの初期化時には、ブラウザごとに互換性が異なるため、ブラウザ間の互換性の問題を最小限に抑えるために、スタイルごとに設定する必要があります。

        body, div, address, blockquote, iframe, ul, ol, dl, dt,
        dd, li, dl, h1, h2, h3, h4, pre, table, caption, th, td, form,
        legend, fieldset, input, button, select, textarea {
    
    
            margin: 0;
            padding: 0;
            font-style: normal;
            font: 12px/22px Arial, Helvetica, sans-serif;
        }
        ol, ul, li {
    
    
            list-style: none;
        }
        img {
    
    
            border: 0;
            vertical-align: middle;
        }
        body {
    
    
            color: #000000;
            background: #FFF;
            text-align: center;
        }

（3）ハイパーリンクアンカーマーク

アンカーを使用する場合は、最初に現在のHTMLページ内のポイントを特定する必要があります。具体的な方法は、nameという名前の属性を<a>タグに追加して、現在のページの現在の位置にあるポイントを特定できるようにすることです。これは名前をクリックします;
 <h2> <a name=“first_title">記事の最初の段落のタイトル</ a> </ h2>次に、<a>タグのhref属性を使用して、ページの他の場所でこの名前を参照します。この方法を使用する場合は、適用されたアンカー名の前に＃を追加する必要があります：<a href="#first_title>
 記事の最初のタイトルに戻ります。ユーザーがこのアンカーをマウスでクリックすると、ブーンという音とともに名前に戻ります。 first_titleの属性値の<a>タグが配置されているWebページの場所は、非常に魔法のようなものですか？一部の友人は
 、名前属性値がWebページ内でまったく同じである2つの<a>タグがある場合はどうなるでしょうか？ ？まず、name属性の値はWebページ内で一意である必要があるため、これは仕様に準拠していません。

<a href="#Login">点我去登录处</a>
<a href="#Regin">点我去注册处</a>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<a name="Regin">这里是标题登录处</a>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<a name="Login">这里是标题注册处 </a>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>
<div>测试数据</div>

（4）スクロールバーの素敵なスタイル

<style>
/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
     
     
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
     
     
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
     
     
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
     
     
	background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
     
     
	background-color: #000000;
	border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
     
     
	background-color: #0ae;
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */
#style-6::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
     
     
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
     
     
	border: 1px solid black;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
     
     
	background-color: #000000;	
}


/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
     
     
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
     
     
	background-color: #AAA;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(0, 0, 0, .2) 50%,
											  rgba(0, 0, 0, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
     
     
	background-color: #3366FF;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(0deg,
	                                          rgba(255, 255, 255, 0.5) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, 0.5) 50%,
											  rgba(255, 255, 255, 0.5) 75%,
											  transparent 75%,
											  transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #444444;
}

#style-12::-webkit-scrollbar
{
     
     
	width: 12px;
	background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
     
     
	width: 12px;
	background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
     
     
	background-color: #FFF;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, 1) 0%,
											  rgba(0, 0, 0, 1) 25%,
											  transparent 100%,
											  rgba(0, 0, 0, 1) 75%,
											  transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track
{
     
     
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
     
     
	width: 10px;
	background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
     
     
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-linear-gradient(top,
											  #e4f5fc 0%,
											  #bfe8f9 50%,
											  #9fd8ef 51%,
											  #2ab0ed 100%);
}


</style>
</html>

スクロールバースタイル効果の一部
ここに写真の説明を挿入

スクロールバーのコンポーネント

  1. ::-webkit-scrollbarスクロールバーの全体

  2. ::-webkit-scrollbar-thumbスクロールバー内の小さな正方形は、上下（または左右）に移動できます

  3. ::-webkit-scrollbar-trackスクロールバーのトラック（Thumb付き）

  4. ::-webkit-scrollbar-button小さな正方形の位置はクリックすることで調整できるため、スクロールバーのトラックの端にあるボタン。

  5. ::-webkit-scrollbar-track-piece内側のトラック、スクロールバーの中央部分

  6. ::-webkit-scrollbar-コーナーコーナー。垂直スクロールバーと水平スクロールバーが交差する場所です。

  7. ::-webkit-resizer2つのスクロールバーの交点で要素をドラッグしてサイズ変更するために使用される小さなコントロール

コンテナ内の外光

 box-shadow: inset 0 0 5em #ffd800, 0 0 5em #ffd800;

おすすめ

転載: blog.csdn.net/WenRouDG/article/details/108966589
おすすめ
ランキング
ワンポイントほぼ3正確なサイズの見積もり46128582
jqueryのIMGタグを削除
Brain-like sensors: Dynamic Vision Sensor and Dynamic Audio Sensor
フラグメントのAndroidドットスライドスイッチページは以下に示すと
C# 抽象クラス (抽象)
論文研究：堅牢なPDFマルウェア分類子のトレーニングについて
入力タグ付きのファイルをアップロードします（1つの記事を実行できます）
フラッター（9） - 引き出しスライドメニューとパッケージ管理
キーボードフック取得で
話し言葉412毎日20の英単語
アーカイブ
もっと
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)
2024-07-27(0)
2024-07-26(0)
2024-07-25(0)
2024-07-24(0)
2024-07-23(0)
2024-07-22(0)
2024-07-21(0)

コードワールド

© 2018 codetd.com