HTML+CSSプロジェクト開発の概要

数日間ブログを更新していませんでしたが、簡単な HTML+CSS プロジェクトを完了しました。数日間調査した結果、多くの利点が見つかりました。以前は、実際にプロジェクトを実践することなく、デモを書いてナレッジポイントを読むだけでした。しかし、実際の戦闘を経て初めて、スキルをより良く向上させる方法がわかります。今回のプロジェクト開発にあたり、以下の内容をまとめました:

1. 技術概要

1.公開スタイルの設定

プロジェクトを開始する前に、まずフォントスタイル、段落構造、テキストサイズなど、プロジェクト内の各ページのコンテンツを一般的に理解することができます。これらのコンテンツに対して固定スタイル ファイルを設定できます。開発中に、CSS コードを繰り返し入力することなく、このファイルを直接導入できます。

リーリー

使用する必要がある場合は、クラス名の直後に使用したいクラス名を追加してください:

リーリー

2.全体のレイアウト

プロジェクトを開発する際、事前に各ページの枠組みを構築しておけば、後は具体的な内容を埋めていくだけで済みます。そして、私はページ全体のレイアウトを実現するために次のフレームワークを使用することに慣れています:

リーリー

一般的に、ページの大枠を決めた後は、残りを少しずつ埋めていくほうが、開発アイデアがより明確になり便利です。もちろん、対応する CSS スタイルを設定する必要もありますが、これはプロジェクトの特定の要件によって異なります。

3.要素のカット

大まかなレイアウトが完了したら、次のステップは写真のカットから始める必要がありますが、技術的な操作はそれほど多くありませんが、注意する必要があることがいくつかあります。たとえば、写真を切り取るときは、サイズに特別な注意を払う必要があります。細かい部分もありますが、忍耐が必要です。細かい問題が異なる結果をもたらすことがよくあるからです。実際、これでほぼ十分だとは考えないでください。効果が満足のいくものではない場合でも、最終的には時間をかけて修正する必要があります。さらに、カット画像を保存する場合、画像ファイルが自動的に生成されるため、自分で新しいディレクトリを作成する必要はなく、特定のディレクトリを入力する必要もありません。そうでない場合は、対応する場所に画像フォルダが表示されます。 。

4. 命名とコード記述基準

標準的な名前付けは、コードの可読性の向上に役立ちます。インターネット上には関連する仕様がたくさんありますが、ここではいくつかを簡単にリストします:

(1)、直感的なネーミング

Web ページを設計し、DIV を識別する必要がある場合、最も自然なアイデアは、要素を名前として説明できるページの場所を説明できる語彙を使用することです。

例：

トップパネル 水平ナビ

左側

(2)、構造化されたネーミング

サブナビ

in me in in me in ingot_ . 例：マウスクリック前の画像ファイルは「file_on」で、クリック後の画像ファイルは「file_off」になります。 " とこのカテゴリに従って名前が付けられています。晴れました。

5.「スプライトピクチャ」の作り方を学ぶ

プロジェクト開発中に小さなアイコンや画像を多数追加することは避けられません。 1つずつ切り出して保存すると操作が面倒になりますし、メモリも多く消費するのでページの読み込み速度も非常に遅くなります。これは良いことではなく、ユーザー エクスペリエンスを大幅に低下させます。そのため、あらかじめ小さい画像を切り取って同じページに配置しておき、開発時にその画像を導入するだけで済みます。次に、状況に応じて背景画像の位置を調整します。背景画像の位置は、background-position 属性を使用して設定できます。
6. 知識ポイントの明確さ

　　　　在做项目时，我由于对某些知识点不够熟悉，不能熟练运用，所以导致开发速度慢。当我们熟练掌握了一个知识点后，是可以快速地写出代码实现相应的效果。在这个项目开发过程中，我主要是对以下知识点不够熟悉：

　　　　（1）、关系选择符的使用

　　　　

　　　　（2）、伪类选择符的使用

　　　　

　　　　

　　　　特别是E:first-of-type与E：first-child 。其实它两最大的区别在于前者是父元素下的第一个结构标签，而后者不需要一定是第一个结构标签。如下例子：

<span style="font-family: 'Microsoft YaHei';"><span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test"</span><span style="color: #0000ff;">></span>
   <span style="color: #008000;"><!--</span><span style="color: #008000;"> <a href="#">测试</a> </span><span style="color: #008000;">--></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>p标签<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>a标签<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>a标签<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>　　　</span>　　</span></span></span></span></span>

             a:first-child是.test下的第一个结构标签，而且是a标签，不是则不起效果 。

　　　  a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可。

　　　　（3）、CSS属性之opacity、z-index 、display

　　　    　a、opacity  

          在这次项目开发中，有一个效果是需要用到遮蔽层的效果。如下图。一开始我的做法是写两个div，然后将第二个div设置透明。然后再用hover后，将它透明度调回不透明。 同时也将第二个div定位，与第一个div重合。但我发现这样写下来代码多且容易乱。而参考了其他小伙伴的代码，发现其实灵活运用z-index也可以做到此效果。下面是具体实现    

 　

<span style="color: #000000; font-family: 'Microsoft YaHei';"><span style="font-size: 15px;">      CSS代码：
             .div1 {
                width: 200px;
                height: 200px;
                background-color: #ccc;            
                position: relative;    
                font-size: 20px;
                text-align: center;
                line-height: 200px;
            }
            .div2 {
                width: 200px;
                height: 200px;
                position: absolute;/*使其与父元素重合*/
                top:0;
                left:0;
                background: rgba(21,85,144,0.2);
                opacity: 0;/*先设置为透明*/
                transition: all 0.3s;/*过渡效果*/
                cursor: pointer;
                
            }
            .div2:hover {
                opacity: 1;            
            }     </span>                </span>

<span style="font-family: 'Microsoft YaHei'; font-size: 15px;"><span style="color: #000000;">HTML代码：
           </span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
              请把鼠标放在这里
               </span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

b、z-index

オブジェクトの重なり順を取得または設定します。



このプロパティに対して 2 つのオブジェクトが同じ値を持つ場合、それらは HTML 文書内で流れる順序に従ってカスケードされ、後に書かれたオブジェクトが前のオブジェクトを上書きします。

この値を有効にするには、position属性値を絶対、相対、または固定に設定する必要があります。

c、ディスプレイ

none: 隠しオブジェクト。可視性属性の非表示値とは異なり、非表示オブジェクト用に物理スペースを予約しません

inline: オブジェクトをinline要素として指定します。 block: オブジェクトをブロック要素として指定します。

list-item: 指定されたオブジェクトはリスト項目です。

inline-block: オブジェクトをインラインブロック要素として指定します。 (CSS2)

２．メンタルまとめ

このプロジェクト演習を経て、実は直接的な能力の問題ではなく、態度の問題であることが多いことが分かりました。当初は十数ページを数日で完成させなければならず、最終的な仕上がりに疑問を感じていました。でも、今後仕事をするなら、必ず「プレッシャーのかかる」仕事が来るだろうとも思っていました。つまり、短時間で作業を完了することができる。プロセスは常に困難ですが、多くの場合、他人が評価するのは結果だけです。仕事がきちんとできていないから結果が出なかったのです。言い方は悪いですが、それは事実です。今回のプロジェクトは9割程度完成しましたが、まだ未達成の部分もございます。しかし、後になって、ブラウザの互換性が依然として必要であることがわかり、これは本当に頭の痛い問題でした。面倒ではありますが、欠かせない部分でもあります。このプロジェクトの演習に関して、改善できると思われる点を以下にまとめました。

1. あらゆる HTML ノートと CSS 属性に精通し、上手に使いこなします。開発が遅い原因の一つは知識が足りないことだと思います。たとえば、特定の効果を実現したいが、どの属性が使用されたかを思い出せない場合、または属性名を忘れた場合、情報を探すのに時間を費やす必要があります。時間は実質的に無駄になります。

2. 冗長性を減らし、コードを最適化します。コードが多すぎるとメモリを占有し、ページの読み込み速度も遅くなるため、省略できるものは省略した方がよいでしょう。コードを記述するプロセスでは、コードの記述速度を向上させるために、より簡単な記述方法を最初に検討することもできます。もちろん、これは少しずつ蓄積され、練習を重ねることで、コードの記述速度を向上させ、冗長性を減らす方法が徐々に理解できるようになります。

3. 画像の切断速度。デザインツールをほとんど使わず、ソフトウェアインターフェースの操作に慣れていないからかもしれません。ただし、実際に写真をカットするのに高度な技術は必要ありませんが、注意する必要があるのは精度です。集中力を高めることもできます。

4. もっと考えて、もっと練習して、恥ずかしがらずに質問してください。技術的な問題に遭遇したとき、私はまず自分で考えて、どうしても思いつかない場合は、Baidu を使用したり、インターネットを参照したりして、自分で実装するのが私の通常のアプローチです。インターネット上の情報が不明確またはわかりにくい場合。クラスメートや先生に聞くと、相互に交流して学ぶことで、知識の理解が比較的早くなり、自分の欠点も発見できると思います。同時に、他の人がうまくやったことから学びましょう。

5. 厳格な態度を養う

細かいことに関しては、無視してしまう人が多いです。私自身に関して言えば、自分は厳密な人間ではないと思います。自分の不注意で結果が悪い場合もあります。だから、このことに気づいた後は、常に自分に言い聞かせます。スピードを追求するからといって、一見取るに足らないものを無視しないでください。