ミニ都市を造ること
11498 ワード
目的
HTMLとCSSはウェブサイトの仕組みについて学ぶ重要な部分です.あらゆるウェブサイトは、テキストまたはイメージのようなものをサイトに表示するために、HTMLを使います.HTMLとCSSのいくつかの概念をつかむことができることは、コンピュータサイエンスでより複雑な科目を学ぶことになると多くを助けることができます.このため、いくつかの経験を得ることが重要です!
このチュートリアルでは、クールなミニシティを構築する方法を学んでいる間、どのように特定のHTML機能の仕事と、なぜ彼らは重要なのチュートリアルを与える!
セットアップ
任意のHTML/CSSエディタを開きます.Here is a good browser-based editor .
このチュートリアルと一緒に従ってください、あなたはあなたの最初のミニシティを構築するために一歩一歩です!
ウォークスルー
このチュートリアルでは、ミニシティのHTMLとCSSの部分に移動します.あなたは、プロジェクト全体の基盤としてHTMLを考えることができます!我々が強い基盤を構築するために働くならば、我々のミニシティーは素晴らしく見えます!
HTMLを使用するときの最初のステップは、“doctype html”機能を確立することです.これは単に以下のコードの全てがHTMLドキュメントとしてレンダリングされることを意味します.
したがって、最初の行は次のようになります.
<!DOCTYPE html>
次に、実際にHTMLタグを作成しなければなりません.タグは本質的に私たちが編集しているHTMLのタイプをエディタに伝えるコマンドです.これは、私たちがHTMLコードを書き始めていることを意味しますが、まず最初に、私たちは、私たちがコンピュータでHTMLで書くことを伝えなければなりません.これを行うには、単にあなたの2行目に< HTML >を入力します.あなたのコードはこれまでのところです.
<!DOCTYPE html>
<html>
私たちの<ヘッド>タグを書いた後、我々はプロジェクトにタイトルを与えるべきだということを知っています.私のプロジェクト「私のミニシティー」としましょう.以下のようになります.
<!DOCTYPE html>
<html>
<head>
<title>My Mini City</title>
私たちの体のセクションを作成するには、単に次の行に体を入力します.
さあ、授業をしましょう!我々が我々の都市がどのように見えるかについて考えましょう.
我々は、我々が我々の都市で以下のオブジェクトが欲しいということを知っています:
地面
摩天楼
より小さい建物
道路
橋
海
滝
車
結局これらのオブジェクトを作成するために、それらのためにクラスを作らなければなりません.クラスは単にオブジェクトを作成するために使用する宣言です.その後、我々は実際にCSSでそれを作成!
< div >タグを使ってクラスを作成します.このように:
<body>
<div class = "ground">
私たちは他のすべてのオブジェクトと同じことを行います.終わったら、次のようになります.
<body>
<div class = "ground">
<div class = "bottomSide"></div>
<div class = "bottomFront"></div>
<div class = "building1">
<div class = "wall1"></div>
<div class = "wall2"></div>
<div class = "roof"></div>
<div class = "railing1"></div>
<div class = "railing2"></div>
</div>
<div class = "building2">
<div class = "wall3"></div>
<div class = "wall4"></div>
<div class = "roof2"></div>
</div>
<div class = "road1"></div>
<div class = "road2"></div>
</div>
<div class = "ocean"></div>
<div class = "ramp1"></div>
<div class = "ramp2"></div>
<div class = "bridge"></div>
<div class = "waterfall"></div>
<div class = "ground2">
<div class = "grassArea"> <!--GRASS AREA-->
<div class = "treeTrunks"></div>
<div class = "triangleTops"></div>
<div class = "circleTops"></div>
</div>
<div class = "bottomFront"></div>
</div>
<div class = "car">
<div></div>
<div></div>
</div>
<div class = "boat">
<div></div>
<div></div>
<div></div>
</div>
<div class = "sun"></div>
</body>
</html>
我々の都市のすべてのオブジェクトのために、我々はそれのためにDIVクラスをつくります.このようにして、CSSを使って編集することができます.CSSは私たちの塗料のようですが、HTMLは私たちのオブジェクトのすべてのキャンバスです!
時々、オブジェクトは「子供」を持ちます.たとえば、建物は地面に置かれているので、建物は地面の「子供」です.
“build 1”がコード内の“ground”タグ内に置かれているのを見ることができます.
私たちの“Building 1”も自分の子供を持っています.壁と屋根が建物の構成要素であるので、私たちは私たちの< buildingl >タグの中に置きます.コンポーネントが互いに属するときはいつでもこれを繰り返す.(また、草の木や木でこれを見ることもできます)
すべてのオブジェクトとその子を作成した後、私たちの体とHTMLタグを/body/htmlを使って閉じる時間です.
CSSでオブジェクトをデザインするときは、HTMLで作成した名前を使用しなければなりません.たとえば、私が私の都市の橋の色を変えたいならば、私は私のCSSでそれを「ブリッジ」と命名する必要があります.
次に、コードのCSS部分のエディタを用意しましょう.スタイルタグを設定することでこれを行います.CSSを使用するので、スタイルタグは次のようになります.
<!DOCTYPE html>
<html>
<head>
<title>Mini City Webinar</title>
<style TYPE="text/css">
我々のウェブページをスタイルするために、我々はCSS構文を学ぶ必要があります.CSSルール集合はセレクタと宣言ブロックからなる.
色とフォントサイズとは別に、これらはいくつかのあなたが始めるために必要なプロパティです.
変換:回転(20 deg);
変形:スキュー(30 deg、50 deg);
.ground{ /*foundation*/
position: absolute;
display: block;
/*purple*/
background-color: #D3D3D3;
width: 200px;
height: 148px;
transform: skew(60deg, -15deg);
top: 100px;
left: -150px;
z-index:-999;
}
.ground .bottomSide{
position: absolute;
display: block;
width: 16px;
height: 148px;
background-color: #C0C0C0;
transform: skew(0deg, -30deg);
top: 4px;
left: -16px;
z-index:-1001;
}
.ground .bottomFront{
position: absolute;
display: block;
width: 210px;
height: 9.5px;
background-color: #C0C0C0;
transform: skew(-60deg, 0deg);
top: 147px;
left: -8px;
z-index:-1001;
}
.ground .road1 {
position: absolute;
display: block;
background-color: #C0C0C0;
width: 20px;
height: 200px;
transform: rotateZ(90deg);
top: 18px;
left: 90px;
z-index:-998;
Reference
この問題について(ミニ都市を造ること), 我々は、より多くの情報をここで見つけました https://dev.to/bitproject/building-a-mini-city-html-portion-1meテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol