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

推薦する

docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...

Kubernetes ポッドオーケストレーションとライフサイクルの詳細な説明

目次K8Sマスター基本アーキテクチャポッドオーケストレーションコンセプトPod オブジェクトのプロパ...

ウェブページコンテンツの閲覧設計手法に関する議論

<br />コンテンツ ページの記事の場合、記事が長すぎる場合やカテゴリ (ランキング)...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...

Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)

前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

MySQLクエリが遅い場合の理由と解決策

Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...

JavaScriptで計算機機能を実現するプロセスの詳細な説明

目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

MySQL ツリー構造テーブルの設計と最適化に関する簡単な説明

序文多くの管理・オフィスシステムでは、ツリー構造がいたるところで見られます。たとえば、「部門」や「機...

vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

目次序文： 1. vue-cliでプロジェクトを作成する2. ルーターをインストールする3. ディレ...

MySQL 起動エラー InnoDB: ロックできません/ibdata1 エラー

OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...

MySQLでBLOBデータを処理する方法

具体的なコードは次のとおりです。 パッケージ epoint.mppdb_01.h3c; java.i...

Dockerを使用してElasticsearchクラスターを素早くデプロイする方法

この記事では、 Dockerコンテナ ( docker-composeを使用してオーケストレーション...