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をヘッドタグに配置する必要があるのか

推薦する

Windows10システムにスーパーセットをインストールする手順

Superset は、エレガントなインターフェースとデータ テーブルに基づく動的なデータ生成を主な機...

CSSは解析プロセスでさまざまな読み込み効果を実装します

html <div class="スピナー"></div&g...

js における浅いコピーと深いコピーの詳細な説明

目次1. jsメモリ2. 譲渡3. 浅いコピー4. ディープコピー序文：以下の記事を読む前に、記憶に...

MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)

1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...

divは、自動入力スタイルをブロックする入力ボックスとして入力を使用せずにコンテンツを入力できます。

今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...

Linux プロセスの CPU 使用率が 700% に達し、終了できない場合の解決策

目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...

Nginx ロードバランシング クラスタの実装

（１）実験環境youxi1 192.168.5.101 ロードバランサーyouxi2 192.168...

MySQLのスケジュールタスクが正常に実行できない原因の分析と解決

目次序文原因分析と解決策スケジュールされたタスクを迅速に実行する要約する序文データベースのスケジュー...

フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします...

JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....

MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...

Vue+js はビデオのフェードインとフェードアウト効果を実現します

Vue+jsはビデオのフェードインとフェードアウトを実現します。参考までに、具体的な内容は次のとおり...

Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています

1. まずリクエスト設定ファイルを見て、axios.createメソッドを見てください。baseUR...

Docker-compose を使用して GitLab をデプロイする方法

Docker-compose は GitLab をデプロイします1. Dockerをインストールする...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...