コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

フロントエンド開発における一般的なヒントのまとめ_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:43:27
オリジナル
779 人が閲覧しました

1. 余分な部分の表示省略を制御します (単一行): 

white-space: nowrap;text-overflow:ellipsis;overflow: hidden;
ログイン後にコピー

以下は、css3 を使用して、複数行の余分な部分の表示省略を制御します (ここでは Google カーネル ブラウザーに適応しています)。 

overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* 设置最高值，防止超出部分显示出来 */max-height: 30px;
ログイン後にコピー

2. ラベルの背景を透明にし、コンテンツを不透明にします: 

background: rgba(255,255,255,0.6)!important;
ログイン後にコピー

3. サーバー側のフォントを呼び出します: 

        @font-face{            font-family: "自定义字体名";            src:url('自定义字体名.ttf')format('opentype');            /* 指定自定义字体的格式 */        }        span{            font-family: "自定义字体名";            font-size: 36px;        }
ログイン後にコピー

4 . css3 を使用してグラデーションカラーを実現します (ここでは Google カーネル ブラウザに適応しています): 

.shade{        width: 300px;        height: 100px;        /* 对背景实现渐变 */        background:         -webkit-gradient(linear,0 0 ,0 100%,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5)));    }
ログイン後にコピー

5.css3 は画像の垂直方向と水平方向のセンタリングを実現します (ここでは Google および Firefox カーネル ブラウザに適応しています): 

<style type="text/css">    .content{        display: box;        display: -webkit-box;        display: -moz-box;        -webkit-box-pack:center;        -moz-box-pack:center;        -webkit-box-align:center;        -moz-box-align:center;        border: 1px solid red;        width: 600px;        height: 500px;    }</style><body>    <div class="content">        <img src="1.jpg" alt="">    </div></body>
ログイン後にコピー

関連ラベル：
前端开发中常用的小技巧整理
ソース：php.cn
前の記事：Ember-Data の機能を深く理解する (パート 2)_html/css_WEB-ITnose 次の記事：z-index スタッキングルール_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1903
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2075
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1746
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1647
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1656
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート