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

推薦する

Linux Jenkins 構成スレーブノード実装プロセス図

序文： Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...

MySQL はどのようにしてマスターとスレーブの同期を実現するのでしょうか?

マスタースレーブ同期 (マスタースレーブレプリケーションとも呼ばれる) は、マスタースレーブデータの...

Vue3 の ref と toRef の違いを簡単に分析します

1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシ...

MySQL クエリ キャッシュとバッファ プール

1. キャッシュ - クエリキャッシュ次の図は、MySQL 公式サイトから提供されています: MyS...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

Maven モードで Tomcat ソースコードを実行する方法

序文最近、Tomcat の起動プロセスを分析していました。Tomcat のソース コードはアイデア次...

MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...

Windows10にMySQL5.6.35データベースを2つインストールする

次のように、Win10 での 2 つの MySQL5.6.35 データベースのインストールを記録しま...

Windows Server 2016 で Flash を有効にする方法

最近、VMware Horizo​​n を導入してテストしましたが、そのコンソールにはデフォルトで ...

Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成

1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...

Nginx プロキシ axios リクエストと注意事項

序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

docker を使用して hbase をデプロイする方法

スタンドアロンの hbase について、まずは説明しましょう。 Dockerをインストールするまず ...

JavaScript 改ざん防止オブジェクトの使用例

目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...