1. 角を丸くする 今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 を使用して多様な Web アプリケーションを開発しています。 HTML5 の利点の 1 つは、以前は画像で実装する必要があった要素をコードで実装できるようになったことです。 「border-radius」はこの機能を実現するための重要な属性であり、HTML 要素の丸い角を直接定義するために使用でき、すべての最新のブラウザでサポートされています。 CSSコード コードをコピー コードは次のとおりです。border-radius: 10px; /* CSS3 プロパティ */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome/Safari */ -khtml-border-radius: 10px; /* Linux ブラウザ */ IE ブラウザの CSS3 プロパティのサポートを完全に理解するには、この記事をお読みください。 2. 影の効果 影の効果は、CSS3 の box-shadow プロパティを通じて簡単に実現できます。すべての主要ブラウザはこのプロパティをサポートしており、Safari はプレフィックス付きの -webkit-box-shadow プロパティをサポートしています。 CSSコード コードをコピー コードは次のとおりです。#私のDiv{ -moz-box-shadow: 20px 10px 7px #ccc; -webkit-box-shadow: 20px 10px 7px #ccc; ボックスシャドウ: 20px 10px 7px #ccc; } 次のように、JavaScript を使用して影の効果を実現することもできます。 CSSコード コードをコピー コードは次のとおりです。object.style.boxShadow=”20px 10px 7px #ccc” 3. @media属性 Media 属性は、異なる画面で同じスタイルシートのスタイルを設定するために使用されます。このスタイルが適用されるメディアは、属性値で指定できます。 CSSコード コードをコピー コードは次のとおりです。@media スクリーンと (最大幅: 480px) { /* 幅 480px の画面での Web ページの表示スタイル */ } 開発者は、@media 印刷属性を使用して印刷プレビュー スタイルを指定することもできます。 CSSコード コードをコピー コードは次のとおりです。@メディアプリント { p.content { 色: #ccc } } 4. グラデーション塗りつぶし CSS3 の Gradient プロパティは、開発者にもう一つの素晴らしい体験を提供します。グラデーションはまだすべてのブラウザでサポートされているわけではないため、レイアウトを設定するためにグラデーションに完全に依存することはできません。 CSSコード コードをコピー コードは次のとおりです。背景: -webkit-gradient(linear, 左上, 左下, from(darkGray), to(#7A7A7A)); 5. 背景サイズ 背景サイズは CSS3 で最も重要なプロパティの 1 つであり、多くのブラウザーでサポートされています。背景サイズ プロパティは、背景画像のサイズを設定するために使用されます。以前は、背景画像のサイズはスタイルで調整できませんでした。現在は、背景サイズ プロパティを使用して、たった 1 行のコードでユーザーが望む背景画像効果を実現できます。 CSSコード コードをコピー コードは次のとおりです。分割 {背景:url(bg.jpg); 背景サイズ:800px 600px; 背景繰り返し:繰り返しなし; } 6 @フォント フェイス CSS3 の @font-face 属性により、フォント ファイルの参照が大幅に改善されました。この属性は主に、カスタム Web フォントを Web ページに埋め込むために使用されます。以前は、フォントのライセンスの問題により、デザイナーは特定のフォントしか使用できませんでした。まず、フォントの名前をカスタマイズします。 CSSコード コードをコピー コードは次のとおりです。@フォントフェイス { フォントファミリ: mySmashingFont; ソース: url('blitz.ttf') ,url('blitz.eot'); /* IE9 */ } これで、mySmashingFont フォント ファミリーをどこでも使用できるようになります。 CSSコード コードをコピー コードは次のとおりです。分割 { フォントファミリ:mySmashingFont; } 7. clearfix属性 デザイナーが、Overflow: hidden ではフローティングを適切に処理できないと判断した場合、clearfix はフローティングを処理するためのより優れたソリューションを提供します。 CSSコード コードをコピー コードは次のとおりです。.clearfix { 表示: インラインブロック; } CSSコード コードをコピー コードは次のとおりです。.clearfix:後{ コンテンツ: "。"; 表示: ブロック; クリア: 両方; 可視性: 非表示; 行の高さ: 0; 高さ: 0; } 8. マージン: 0 自動 Margin: 0 auto プロパティは基本的な CSS プロパティです。 CSS 構文ではブロック要素を中央に配置するステートメントは定義されていませんが、デザイナーは自動マージン オプションを使用してこの機能を実現できます。このプロパティは、必要に応じて要素を中央に配置するために使用できます。ただし、これはデザイナーが div の幅を設定した場合にのみ可能であることに注意してください。 CSSコード コードをコピー コードは次のとおりです。.myDiv { マージン: 0 自動; 幅:600ピクセル; } 9. オーバーフロー: 非表示 オーバーフロー: オーバーフロー機能を非表示にするだけでなく、Hidden CSS プロパティにはフロートをクリアする機能もあります。 CSSコード コードをコピー コードは次のとおりです。分割 { オーバーフロー:非表示; } |
正規表現は、特定のパターンに一致するテキストを検索および置換するためによく使用されます。たとえば、テ...
序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...
目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...
目次1. 範囲2. 関数の戻り値3. 関数のネスト4. 終了5. クロージャの実用的応用1. 内部変...
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...
Redis は、ANSI C で記述されたオープンソースの NoSQL データベースであり、ネットワ...
「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...
MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...
現在のページへのリンク。 -------------------一般的な使用法は次のとおりです。 &...
目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...
1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...
先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...
フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...
序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...