HTML+CSS プロジェクト開発経験の概要-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

高洛峰

Feb 11, 2017 pm 02:31 PM

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

1. 技術的な概要

1. パブリックスタイルの設定

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

/*基本样式*/  
* {   
    margin:0;   
    padding:0;                   
}   
body {   
    font-family: "微软雅黑";   
}   
.clear {  /*清除两边浮动*/  
    clear: both;   
}   
.fl {  /*清除左浮动*/  
    float: left;   
}   
.fr {    /*清除右浮动*/  
    float: rightright;   
}   
  
a {  /*去掉链接的默认下划线*/  
    text-decoration: none;   
}   
li { /*去掉列表默认样式*/  
    list-style: none;   
}

ログイン後にコピー

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

<div class="div01 lf"></div>  
<div class="div02 clear"></div>

ログイン後にコピー

2.全体のレイアウト

プロジェクトプロセスを開発するときに、各ページのフレームワークが事前に構築されている場合、後の段階では、特定の内容を入力するだけです。そして、私はページ全体のレイアウトを実現するために次のフレームワークを使用することに慣れています:

<body>  
        <div id="header"></div><!--页面顶部内容-->  
        <div id="nav"></div><!--导航部分-->  
        <div id="content"></div><!--页面中间内容-->  
        <div id="footer"></div><!--页面底部-->  
</body>

ログイン後にコピー

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

3. 写真のカット要素

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

4. 命名とコード記述の標準

標準化された命名により、コードの可読性が向上します。インターネット上には関連する仕様が多数ありますので、ここでいくつかの点を簡単にリストします:

(1) 直感的な名前付け

Web ページをデザインして div を識別する必要がある場合、最も自然なアイデアは要素に名前を付けることです。ページ上の位置を説明する単語。

例: トップパネル

全体を通してs ' s ' through ' s ' through through through ‐ ‐ ‐‐‐‐‐ から

メンバーの命名規則

は、に基づいています。メンバーの命名規則とは、分類を通じてファイルとフォルダーの所属に応じて命名することを指します。これにより、ファイルの配置をより論理的にすることができます。

例: 画像ファイルの前に「」が付いています。マウスクリック「file_on」。クリック後の画像ファイルは「file_off」という名前になり、このカテゴリに従って名前が付けられます。より明確です。プロジェクト開発では、必然的に小さなアイコンや小さな画像が多数追加されます。 1つずつ切り出して保存すると操作が面倒になりますし、メモリも多く消費するのでページの読み込み速度も非常に遅くなります。これは良いことではなく、ユーザーエクスペリエンスを大幅に低下させます。そのため、あらかじめ小さい画像を切り取って同じページに配置しておき、開発時にその画像を導入するだけで済みます。次に、状況に応じて背景画像の位置を調整します。背景画像の位置は、background-position 属性を使用して設定できます。

6. 知識ポイントの明確さ

プロジェクトに取り組んでいるときに、特定の知識ポイントに十分に慣れておらず、それらを上手に活用できなかったため、開発速度が遅かった。知識ポイントを上手にマスターすると、対応する効果を達成するためのコードをすぐに書くことができます。このプロジェクトの開発プロセス中、私は主に次の知識点に精通していませんでした:

(1)、関係セレクターの使用

(2)、疑似クラスセレクターの使用

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

<div class="test">  
   <!-- <a href="#">测试</a> -->  
        <p>p标签</p>  
        <a href="#">a标签</a>  
        <a href="#">a标签</a>  
 </div>

ログイン後にコピー

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也可以做到此效果。下面是具体实现

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;               
            }

ログイン後にコピー

HTML代码：

<div class="div1">  
              请把鼠标放在这里   
               <div class="div2"></div>  
</div>

ログイン後にコピー

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

b、z-index

检索或设置对象的层叠顺序。

并级的对象，此属性参数值越大，则被层叠在最上面。

如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。

必须定position属性值为absolute、relative或fixed，此取值方可生效。

c、display

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：指定对象为内联元素。block：指定对象为块元素。

list-item：指定对象为列表项目。

inline-block：指定对象为内联块元素。（CSS2）

二、心态总结

经过这次的项目练习，我发现其实很多时候不是直接的能力问题，而是态度问题。一开始，十几个页面要赶在几天内完成，我对自己最后做出的结果是怀疑的。但我也想到，假如以后工作了，也避免不了会"高压"作业。也就是会可能在短时间内把工作任务完成到位。过程总是坚辛的，但往往别人看重的只有结果。结果没出来，就是工作没到位，虽然如此说来挺残酷的，但事实确实如此。这次的项目完成力度大概90%，还差一些效果没有实现。但后来发现还得做浏览器兼容，这确实是个头疼的问题。虽然麻烦，但这也是必不可少的一部分。针对这次的项目练习，我总结了以下几点，我认为自己可以提升的地方：

1、熟悉并熟练使用每个HTML便签和CSS属性。我认为导致开发速度慢的原因之一是因为自己对知识点的掌握不够。比如说，要实现某个效果，但却由于想不起来用到了哪些属性，或者忘记了属性名称，又得花时间去查找资料。无形中时间就耗掉了。

2、减少冗余，优化代码。可以省略的还是省略为好，因为代码多了占用内存，页面加载速度也会变慢。在写代码的过程中，也可以先思考一下有什么比较简洁的写法，提高代码书写速度。当然这也是一点点积累出来的，练习多了自然也会慢慢了解如何才会提高代码书写速度以及降低冗余。

3、切图速度。也许是比较少用设计工具，对软件界面的操作不太熟悉。但切图其实也不需要太高技术，但需注意的一点是准确性。同时也能提高专注度。

4、多思多练、不耻下问。在遇到一个技术难题时，我通常的做法是先自己想，实在想不出的可以百度，参考网上的，然后再实现自己的。若网上的资料不太清晰或者不太理解的情况下。我觉得还是问同学或老师，通过互相交流学习，其实是可以比较快速地了解知识点，并且发现自己不足之处。同时学习借鉴别人做的好的方面。

5、培养严谨的态度

关于细节性的问题，是很多人都比较容易忽略的。而我自己看来，我并不觉得自己是个严谨的人。有些时候还是因为自己的粗心而导致结果不佳。所以，在认识了这点之后，我会时时刻刻提醒自己。不能因为追求速度而忽略了一些看似无关紧要的东西。

以上这篇HTML+CSS プロジェクト開発経験の概要(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多HTML+CSS プロジェクト開発経験の概要相关文章请关注PHP中文网！

このウェブサイトの声明

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