CSS が十分に強力である場合でも、CSS の既存の機能を実現するためにプログラミングを使用しますか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:39:17
オリジナル
812 人が閲覧しました

CSS3 が登場しましたが、実は私は諸事情により CSS2 でサポートされている一部のスタイルを使ったことがありません。私は本当に落ち着いてそれらのことを見つめ、これまで無視されてきたものを見つめる必要があると感じています。 今日はプログラミングでよく使う以下の3つを中心にお話します。

1. 順序付きリストのシリアル番号

a. アプリケーションシナリオ

ユーザーが現在のリスト内のレコードの数を知ることができるように、リストを表示する必要があります。レコードを削除すると、シリアル番号が並べ替えられます。

b. 感想

これまで知らなかった通常の方法は、表示時にインデックス + 1 を介してリスト情報を現在のレコードのシリアル番号に変更することでした。ただし、レコードが任意に削除されると面倒になります。jquery を使用して現在のレコードを削除することは、一見すると面倒です。実際、慣れてしまえばそれほど難しいことではありません。$.each() を使用し、その中のインデックスを使用して効果を実現します。しかし、私たちプログラマーは、最も強力な機能を実現するために最も簡単な方法を使用したいと考えています。このようにして、システムのビジネス ロジックに集中できる時間が増えます。

c. 勉強

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

d. 注意事項

結局のところ、CSS は外国人、中国人 1 人、2 人によって作られています。 . このようなシリアル番号はこの方法では実現できません

e. 凡例

2. トリミングされたテキストを表す楕円を表示します

a. このシナリオは、説明する必要はないと思います。誰もが知っていることですが、表示するコンテンツが多い場合、トリミングしないとページが変形してしまうことがあります。

b. 思考

実際、私たちはプログラムを使用して文字列を切り詰め、楕円をつなぎ合わせて表示するのが好きでした。通常、この方法では基本的に望む結果が得られます。しかし、幅 100px の div で、文字列が漢字 10 文字しか表示できないと仮定して、プログラムを実装するときに、漢字 9 文字 + "..." をインターセプトして表示することを考えたことはありますか。 . 実際に表示してみると 文字列は漢字10文字を超えず、まだ「…」を繋ぐことはできません。これまでのロジックをプログラミングで扱うのは面倒だと思いませんか?さらに厄介なのは、div の幅を 200px に調整すると、漢字 19 文字をインターセプトするようにプログラムを修正することです。急にちょっとイライラしませんか?ここで最も厄介な状況は、英語の文字「I」と「M」です。10 個の「I」と 10 個の「M」が占める幅は大きく異なります。これ以上説明しませんが、この英語のアルファベットについて話すことで私が言いたいことは信じています。

c. 学習

http://www.w3school.com.cn/cssref/pr_text-overflow.asp

d. 注

インターセプト効果を実現するには、現在のラベルの幅を固定する必要があります。剪定効果が得られない場合があります。

e. 凡例

3. バックエンド

a. アプリケーションシナリオ

ここでは、あまり説明せずに画像を使用します。

b. 思考

通常、これは中国語の文字で発生することは比較的まれですが、上の 2 行目と同様に、システムは単語として認識するため、Give は強制されません。改行。しかし、これは私たちが望む美しいスタイルとは程遠いものです。

c. 勉強する

http://www.w3school.com.cn/cssref/pr_word-break.asp

d. 注

中国語では基本的にこの問題を考慮する必要はありません。長すぎるとこのような問題が発生します。この質問は、皆さんに気づいていただきたいと考えて、テスト部門が提起したものです。

e. イラスト

概要: このトピックは主に 2 つの目的があります。まず、私が何かを見逃していたか、または当時十分に理解していなかったのかを振り返っていただければと思います。 ? 次に、元のぎこちない実装を置き換えるより良い方法があるかどうかを皆さんに楽しみにしてもらいたいと思います。上記に書かれていることは実際には古いものですが、多くの Siege Lion はまだ古い方法で実装しています。これはほんの紹介ですが、皆さんも古い知識に代わる新しい知識を習得し、同時に過去を振り返ることができるようになることを願っています。

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