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

推薦する

Vue で rem 適応を使用する方法

1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード

1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...

MySQL 5.7 のパフォーマンスと sys スキーマの監視パラメータの説明 (推奨)

1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...

MySQL でのバイナリ型操作

この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...

Linux での MongoDB のインストールと設定のチュートリアル

MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...

MySQL の自己結合重複排除に関する注意事項

機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...

Nofollowタグの書き方と使い方

「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...

WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...

Zabbix による SQL Server の監視プロセスの詳細な説明

Zabbix による SQL Server の監視を見てみましょう。まずfreetdsをダウンロード...

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...

Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル

1. Navicat for MySQL 15をダウンロードするhttps://www.navica...

VS2019をMySQLデータベースに接続するプロセスと一般的な問題の概要

今日の午後からVS2019をMySQLで使えるのではないかと思い、いろいろ環境構築を始めました。プロ...

JSでよく使われるデータ処理方法

目次DOM処理配列方法要約するDOM処理DOM はドキュメントの構造化された表現を提供し、スクリプト...

nginx-ingress-controller ログ永続化ソリューションのソリューション

最近、nginx-ingress-controller のアプリケーションについて説明した公開アカウ...