目次
ディスカッション(解決策)への返信
ホームページ ウェブフロントエンド htmlチュートリアル この種の設計図をスライスして構成する方法について助けを求めている初心者。 _html/css_WEB-ITnose

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

Jun 21, 2016 am 09:38 AM


こんな設計図。
透明度と光と影の効果を多用します。
ブロックに直接スライスし、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 は比較的小さいサイズで画像を保存できます。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles