HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

最終結果はこんな感じです、かわいいでしょう…

PS: HTML と CSS の知識があればベストですが、初心者でも問題ありません。初心者が「初心者」に会うのも大丈夫です!

1. 準備

/home/shiyanlou/ ディレクトリに移動し、新しい空白のドキュメントを作成します。

名前を Baymax.html にします (他の名前でも問題ありませんが、サフィックスは .html にする必要があります)。

gedit を使用してコードを開き、編集する準備をします。

2. HTMLを書く

次のコードを入力してください:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >   
  2. <html>​​   
  3.     <ヘッド> <メタ  charset = "utf-8" > < title >ベイマックス</ title > </ head >   
  4. <本文>   
  5.   
  6.       < div   id = "ベイマックス" >   
  7.   
  8.          <!-- 2 つの目と口を含む頭を定義します -->   
  9.          < div   id = "ヘッド" >   
  10.              < div   id = "目" > </ div >   
  11.              < div   id = "eye2" > </ div >   
  12.              < div   id = "口" > </ div >   
  13.          </div>​​   
  14.   
  15.          <!-- 心臓を含む胴体を定義します -->   
  16.          < div   id = "胴体" >   
  17.              < div   id = "ハート" > </ div >   
  18.          </div>​​   
  19.   
  20.          <!-- カバー（胴体との接続部分）を含む腹部を定義します -->   
  21.          < div   id = "腹" >   
  22.              < div   id = "カバー" > </ div >   
  23.          </div>​​   
  24.   
  25.          <!-- 左腕を定義します。これには、大きい指 1 本と小さい指 1 本を含む -->   
  26.          < div   id = "左腕" >   
  27.              < div   id = "l-bigfinger" > </ div >   
  28.              < div   id = "l-smallfinger" > </ div >   
  29.          </div>​​   
  30.   
  31.          <!-- 右腕を定義します。これには、大きい指 1 本と小さい指 1 本を含む 2 本の指も含まれます -->   
  32.          < div   id = "右腕" >   
  33.              < div   id = "r-bigfinger" > </ div >   
  34.              < div   id = "r-smallfinger" > </ div >   
  35.          </div>​​   
  36.   
  37.          <!-- 左脚を定義します -->   
  38.          < div   id = "左足" > </ div >   
  39.   
  40.          <!-- 右脚を定義します -->   
  41.          < div   id = "右足" > </ div >   
  42.   
  43.      </div>​​   
  44. </本文>   
  45. <html>​​   
  46.   

3. CSSスタイルを追加する

HTML を使用して、「Dabai」のさまざまな要素を定義しました。次に、CSS を使用してスタイルの外観を描画する必要があります。

「Dabai」は白色なので、識別しやすいように背景を暗い色に設定しました。

まず頭から:

CSSコードコンテンツをクリップボードにコピー
  1. 体 {
  2.     背景: #595959 ;
  3. }
  4.   
  5. #ベイマックス{
  6.      /*中央に設定*/        
  7.     マージン:0自動;
  8.   
  9.      /*高い*/       
  10.     高さ: 600px ;
  11.   
  12.      /*オーバーフローを非表示*/        
  13.     オーバーフロー:非表示;
  14. }
  15.   
  16. ＃頭{
  17.     高さ: 64px ;
  18.     幅: 100px ;
  19.   
  20.      /*丸い角の形状をパーセンテージで定義します*/        
  21.     境界線の半径: 50%;
  22.   
  23.      /*背景*/        
  24.     背景: #fff ;
  25.     マージン:0自動;
  26.     下部マージン: - 20px ;
  27.   
  28.      /*下枠線のスタイルを設定する*/        
  29.     下ボーダー: 5px  固体  #e0e0e0 ;
  30.   
  31.      /*属性は要素の積み重ね順序を設定します。積み重ね順序が高い要素は常に積み重ね順序が低い要素の前に配置されます*/        
  32.      zインデックス: 100;
  33.   
  34.      /*相対的に配置された要素を生成する*/        
  35.     位置:相対的;
  36. }
  37.   

効果プレビュー:

目と口をつけましょう！

CSSコードコンテンツをクリップボードにコピー
  1. ＃目、
  2. #目2 {
  3.     幅: 11px ;
  4.     高さ: 13px ;
  5.     背景: #282828 ;
  6.     境界線の半径: 50%;
  7.     位置:相対的;
  8.     上: 30px ;
  9.     左: 27px ;
  10.   
  11.      /*要素を回転する*/        
  12. 変換: 回転(8度);
  13. }
  14.   
  15. #目2 {
  16.      /* 回転対称にする */        
  17. 変換: 回転(-8度);
  18.     左: 69px ;上: 17px ;
  19. }
  20.   
  21. ＃口{
  22.     幅: 38px ;
  23.     高さ: 1.5px ;
  24.     背景: #282828 ;
  25.     位置:相対的;
  26.     左: 34px ;
  27.     上: 10px ;
  28. }
  29.   

ミニ「ダバイ」が形を成す:

次は胴体と腹部です。

CSSコードコンテンツをクリップボードにコピー
  1. #胴体、
  2. #腹{
  3.     マージン:0自動;
  4.     高さ: 200px ;
  5.     幅: 180px ;
  6.     背景: #fff ;
  7.     境界線の半径: 47%;
  8.   
  9.      /*境界線を設定する*/        
  10.     境界線: 5px  固体  #e0e0e0 ;
  11.     上境界線:なし;
  12.      zインデックス: 1;
  13. }
  14.   
  15. #腹{
  16.     高さ: 300px ;
  17.     幅: 245px ;
  18.     上マージン: -140px ;
  19.      zインデックス:5;
  20. }
  21.   
  22. ＃カバー{
  23.     幅: 190px ;
  24.     背景: #fff ;
  25.     高さ: 150px ;
  26.     マージン:0自動;
  27.     位置:相対的;
  28.     上: - 20px ;
  29.     境界線の半径: 50%;
  30. }
  31.   

「Dabai」に生命を象徴するハートを与えましょう。

CSSコードコンテンツをクリップボードにコピー
  1. ＃心臓{
  2.   幅: 25px ;
  3.   高さ: 25px ;
  4.   境界線-半径:50%;
  5.   位置:相対的;
  6.   
  7.    /*境界線の周りに影の効果を追加する*/   
  8. ボックスシャドウ: 2px   5ピクセル  2ピクセル  #ccc  インセット;
  9.   
  10.   右 右: - 115px ;
  11.   上: 40px ;
  12.    zインデックス:111;
  13.   境界線: 1ピクセル 固体  #ccc ;
  14. }
  15.   

現在、「Dabai」は次のようになります。

まだ手も足もないので、とてもかわいいです...「ダバイ」には暖かい腕が必要です：

CSSコードコンテンツをクリップボードにコピー
  1. #左腕、
  2. #右腕{
  3.     高さ: 270px ;
  4.     幅: 120px ;
  5.     境界線の半径: 50%;
  6.     背景: #fff ;
  7.     マージン:0自動;
  8.     位置:相対的;
  9.     上: -350px ;
  10.     左: - 100px ;
  11. 変換: 回転(20度);
  12.      zインデックス: -1;
  13. }
  14.   
  15. #右腕{
  16. 変換: 回転(-20度);
  17.     左: 100px ;
  18.     上: - 620px ;
  19. }
  20.   

まだ指がありません:

CSSコードコンテンツをクリップボードにコピー
  1. #l-ビッグフィンガー、
  2. #r-ビッグフィンガー{
  3.     高さ: 50px ;
  4.     幅: 20px ;
  5.     境界線の半径: 50%;
  6.     背景: #fff ;
  7.     位置:相対的;
  8.     上: 250px ;
  9.     左: 50px ;
  10. 変換: 回転(-50度);
  11. }
  12.   
  13. #r-ビッグフィンガー{
  14.     左: 50px ;
  15. 変換: 回転(50度);
  16. }
  17.   
  18. #l-小指、
  19. #r-小指{
  20.     高さ: 35px ;
  21.     幅: 15px ;
  22.     境界線の半径: 50%;
  23.     背景: #fff ;
  24.     位置:相対的;
  25.     上: 195px ;
  26.     左: 66px ;
  27. 変換: 回転(-40度);
  28. }
  29.   
  30. #r-小指{
  31.     背景: #fff ;
  32. 変換: 回転(40度);
  33.     上: 195px ;
  34.     左: 37px ;
  35. }
  36.   

ちょっと面白い:

「Dabai」に脚を追加するのが待ちきれませんか?

CSSコードコンテンツをクリップボードにコピー
  1. #左足、
  2. #右足{
  3.     高さ: 170px ;
  4.     幅: 90px ;
  5.     境界線-半径: 40% 30% 10px 45%;
  6.     背景: #fff ;
  7.     位置:相対的;
  8.     上: - 640px ;
  9.     左: - 45px ;
  10. 変換: 回転(-1度);
  11.      zインデックス: -2;
  12.     マージン:0自動;
  13. }
  14.   
  15. #右足{
  16.     背景: #fff ;
  17.     境界線-半径:30% 40% 45% 10px ;
  18.     マージン:0自動;
  19.     上: - 810px ;
  20.     左: 50px ;
  21. 変換: 回転(1度);
  22. }
  23.   

ドゥアン〜ドゥアン〜ドゥアン〜 スタント完了！

あなたの恋人ダバイがあなたのそばにいるから、安心しませんか？

<<:  Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

>>:  なぜCSSをヘッドタグに配置する必要があるのか

推薦する

td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...

JavaScriptのプリコンパイルを見てみましょう（概要）

JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...

docker compose helloworld を使い始めるための詳細なプロセス

前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...

nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング

パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

Linux サーバーの状態を監視する方法

私たち、特に Linux エンジニアは毎日 Linux サーバーを扱っています。サーバーのセキュリテ...

JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

目次forEach() (ES6) メソッドmap() (ES6) メソッドflatMap() メソ...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

Linux オペレーティング システムでよく使用される MySQL コマンドの概要

以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

Linuxのwatchコマンドの使用

1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...

コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?

無料ポイントインタビュアー：Linuxを使ったことはありますか？私：はいインタビュアー：メモリ使用量...

MySQL における datetime と timestamp の違いと選択

目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...