ホームページ > ウェブフロントエンド > htmlチュートリアル > この種の設計図をスライスして構成する方法について助けを求めている初心者。 _html/css_WEB-ITnose

この種の設計図をスライスして構成する方法について助けを求めている初心者。 _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:38:20
オリジナル
951 人が閲覧しました

こんな設計図。
透明度と光と影の効果を多用します。
ブロックに直接スライスし、DIV を強制的に配置して接続しようとしましたが、効果は理想的ではなく、多くの場所で明らかな継ぎ目が見られました。
ただし、レイヤーごとにカットする場合、GIF は透明度をサポートしていません。PNG を使用する場合、IE6 は png の透明度をサポートしていないようです。

初心者さん、アドバイスをお願いします。

PS: ご協力いただけるのであれば、QQ に PM していただければ PSD 図面をお送りします (ポイントを獲得できます)。

ディスカッション(解決策)への返信

明らかにスタイルが適切に調整されていないことだと思います。
さまざまなブラウザーの CSS 互換性は本当に面倒です。しばらくお待ちください (笑)

明らかな継ぎ目が見られる場合は、スタイルが適切に調整されていないと思います。
さまざまなブラウザーの CSS 互換性は本当に面倒です。しばらくお待ちください (笑)

明らかな継ぎ目が見られる場合は、スタイルが適切に調整されていないためだと思います。
さまざまなブラウザの CSS 互換性は本当に面倒です。しばらくお待ちください(笑)

スタイルが適切に調整されていないわけではありません。私が話している継ぎ目は、2 つの写真の接合部で肉眼で見える色の違いを指します。これは、スライスするときに発生するはずです

自動スライスには時々問題が発生します。そのため、多くのアーティストは自動スライス機能を使用せず、自分で手動でカット、つまりピクセル単位で位置を合わせてスライスしています。

レイヤーをプレスするのは面倒です。
ブロックを押すだけなので、実はとても簡単な構造です。アートチュートリアルをチェックしてください。

また、このページのビジュアルデザインには非常に問題がありますが、実際には上司もディレクターも話しやすいようです。

自動スライスには時々問題が発生することがあります。そのため、多くのアーティストは自動スライス機能を使用せず、自分で手動でカット、つまりピクセル単位で位置を合わせてスライスしています。

レイヤーをプレスするのは面倒です。
ブロックを押すだけなので、実はとても簡単な構造です。アートチュートリアルをチェックしてください。

また、このページのビジュアルデザインには非常に問題がありますが、実際には上司もディレクターも話しやすいようです。

位置をピクセル単位で手動で調整するだけです。 -
また。 。このページを改善するにはどうすればよいですか?
合格した理由は、会社全体が電気系で、企画から設計、開発、テスト、運用までを私一人で担当しているためです。 。 。

IE6 は諦めろ、これは扱いが難しすぎる

IE6 は諦めろ、これは扱いが難しすぎる

この Web サイトを読んでいる人は主に電気分野の人です。コンピュータや会社のコンピュータなどを探してください。その多くは IE6 なので、考慮しないわけにはいきません。

後の段階でのスタイルの変更を考慮しない場合は、画像全体を背景として直接使用するなどの絶対的な配置も検討できます

http://download.csdn.net/detail/stongyann/4172822また、PNGも加工可能です。これを広告と考えることもできますが、効果はあります。私自身もテストしてみました。

後段のスタイル変更を考慮すると、画像全体を背景として直接使用するなどの絶対的な配置も検討できます

画像全体を背景として使用すると、読み込み速度が非常に遅くなりますか?

合格した理由は、会社全体が電気系の仕事をしていて、WEBのことは私一人で企画から設計、開発、テスト運用まで担当しているからです。 。 。
それなら自分で迷惑をかける必要はありません。理論的には、技術者はより良くできる場合はより良くする必要がありますが、実際には相対的に見なければなりません。まずは簡単なことをやってみましょう。しかし、後で上司が「自分は他の人と少し違う」と感じて、別の人を置き換えたいと思うことを防ぐために、時間があるときにより良い計画を作成し、上司が違うことに気づいたときに最初にそれを見せることができます。あなたの能力が常に向上していることを彼に見せてください。そうすれば、彼は将来安心するでしょう。一気に「数年以内にトップクラスの品質」を達成しようとすると、仕事がなくなって困るのは自分自身です。ただ、彼らのWEB経験やビジョンに比べれば、あなたの能力はまだまだだと思います。

6 階の返信からの引用:
IE6 はもうやめよう、これは難しすぎる

この Web サイトを読んでいる人は主に電気分野の人です。コンピュータや会社のコンピュータなどを探してください。その多くは IE6 なので、考慮しないわけにはいきません。
はは、私は以前この分野で働いたことがあり、IE6 が管理されるだけでなく、主なターゲットになる必要があることを知っています。

継ぎ目の色の違いの問題は、依然として写真をカットする経験的な方法に関連しています。どのように分割するかによって、カットする際に注意したり、必要な加工を状況に応じて行うことができます。

さらに、CSS ボックス モデルの違いによって生じる小さなギャップを排除するために、
* {padding:0;margin:0;}
に追加する必要があります。または外部CSS。

9階からの返信引用:

後期の作風の変化を考慮すると、画像全体を直接背景として使用することや、その他の絶対的な配置も考えられます


画像全体を背景として使用する場合、読み込み速度が非常に遅くなりますか? たとえば、GIF は比較的小さいサイズで画像を保存できます。

このページ素敵ですね〜〜〜〜
フフ

投稿者であるあなたも一人の人間です、会社の責任は私一人で全てやっています。質問:そこにアーティストがいるはずです。やりましょう。アーティストは最初に背景画像を作成する必要があります。ホームページ、ログイン、中央アナウンスについては、背景を変更しないでください。スクリーンショットを撮り直してください...後でアーティストがあなたのために写真を作成します...

さて、ところで、互換性の問題もあります: ie 6 上記のヒーローはテストを諦めるのが正しいです。私も ...作成したウェブサイトがie6に対応していません。 i7 以降と Firefox と Google をテストしてください...

どうしても IE 6 が必要な場合は、CSS ハックを使用できますが、少し面倒です

投稿者であるあなたも一人の人間であり、私も会社の責任も私一人で全部やります…上の質問について:そこにアーティストがいるはずです。アーティストは最初に背景画像を作成する必要があります。ホームページ、ログイン、中央アナウンスについては、背景を変更しないでください。スクリーンショットを撮り直します... 後で、写真を作成してくれるアーティストが必要になります...
明らかに、投稿者はあなたよりも劣っていますが、そのアーティストは WEB アーティストが何をすべきかを理解していない単なるソフトウェア アーティストです。そして、写真を切り取ることは依然として困難です。経験的なことの中には、表面的に見えるほど単純ではないものもあります。

IE6 を無視することはできませんが、特に慣れていない場合は、CSS ハックをするのに苦労する必要はありません。既製の CSS/JS フレームワークや JQUI、EXTJS などのインターフェイス ライブラリを使用できます。 、そしてYUI。

CSS フレームワークの特徴
1. よく使われる CSS スタイルを抽象化し、再利用性が高く、移植性が高い
2. 固有の定義があり、詳細なドキュメントと開発機能を備えている
3. 互換性が高く、一般的なブラウザと互換性がある
4. CSS がメインだが、必ずしもすべての CSS ではなく、ブラウザーとの互換性のためにいくつかの js (またはその他) スクリプトが存在する可能性があります

一般的に使用される CSS フレームワーク:
1. 960g
2. YUI 2: Grids CSS
3 . Blueprint
4. BlueTrip
5. Elastic CSS
6. Easy
7. EZ-CSS
8. Tripoli
9. CleverCSS
10. SenCSS

ありがとう 私も一人です 会社も一人で責任を負います。 ...上記の質問について: そこにアーティストがいるはずです。アーティストは最初に背景画像を作成する必要があります。ホームページ、ログイン、中央アナウンスについては、背景を変更しないでください。スクリーンショットを撮り直してください.... 後でアーティストに自分で写真を作成してもらう必要があります....

とても残念です。 。 。私はあなたよりもひどい状態です。この設計図も私が描いたものです。 。 。アーティストがいる場合は、ここで尋ねる必要はありません。

15 階の回答からの引用:
投稿者であるあなたも一人の人間です。私は一人ですべてをやっています。上記の質問について: そこにはアーティストがいるはずです。このバーのように。アーティストは最初に背景画像を作成する必要があります。ホームページ、ログイン、中央アナウンスについては、背景を変更しないでください。スクリーンショットを撮り直します... 後で、あなたのために写真を作成してくれるアーティストが必要になります...

明らかに、投稿者はあなたよりも悪いです、アーティストは、WEBアーティストが何をすべきかを理解していない単なるソフトウェアアーティストです。表面的なものではなく、経験的なものもいくつかあります...

ご提案ありがとうございます。
また、別の質問があります。

スライスを分割して絶対配置すればまとめられるのですが、ブラウザの解像度が1024*768を超えるとページ全体が中央に表示されません。ただし、私はテーブルまたは div を最外層として使用し、それを中央に配置します。そうすると、他の div が相対的に配置され、画像を結合できなくなります。

この状況を解決する方法。

11階さんの返信より引用:

9階さんの返信より引用:

後のスタイル変更を考慮しないのであれば、画像全体を直接背景として使用するなどの絶対的な配置も考えられます


画像全体を背景として使用すると、読み込み速度が遅くなりますか?
たとえば、GIF は比較的小さいサイズで画像を保存できます。

この写真を最小の形式で保存すると、効果はひどいものになります。

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