検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLとCSSを使って自分だけの温かい男「ダバイ」を作る_HTML/Xhtml_Webページ制作

HTMLとCSSを使って自分だけの温かい男「ダバイ」を作る_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:36:011257ブラウズ

仕上がりはこんな感じです、可愛いですね…

追伸: HTMLとCSSについてはある程度の理解があった方が良いですが、初心者でも大丈夫です。

1.準備

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

Baymax.html という名前 (他の名前も使用できますが、サフィックスは .html である必要があります):

gedit で開き、コードを編集する準備をします:

2. HTML の作成

次のコードを入力します:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <ヘッド><メタ charset="utf-8"><title>ベイマックスタイトル>頭>
  4. <ボディ>
  6. <div id="ベイマックス" >
  9. <div id="head" >
  10. <div id="目" >div>
  11. <div id="eye2" >div>
  12. <div id=「口」 >div>
  13. div>
  16. <div id="胴体" >
  17. <div id="ハート" >div>
  18. div>
  21. <div id="腹" >
  22. <div id="カバー" >div>
  23. div>
  26. <div id="left-腕「>
    27. 」
  27. <div id="l- bigfinger">div>
  28. <div id="l- smallfinger">div>
  29. div>
  32. <div id="そうです-腕「>
    33. 」
  33. <div id="r- bigfinger">div>
  34. <div id="r- smallfinger">div>
  35. div>
  38. <div id="left-脚">div>
  41. <div id="そうです-脚">div>
  43. div>
  44. ボディ>
  45. <html>

3. CSS スタイルを追加します

HTML を使用して「Dabai」の各要素を定義しましたが、今度は CSS を使用してそのスタイルの外観を描画する必要があります。

「だばい」は白いので、分かりやすいように背景を濃い色にしています。

次に、最初に頭:

CSS コードコンテンツをクリップボードにコピーします
  1. ボディ {
  2. 背景: #595959;
    3. }
  5. #ベイマックス{
  6. /*中央に設定*/
  7. マージン: 0 自動;
    9. /*身長*/
    10. 高さ
  10. : 600px;
  11. /*オーバーフローを非表示*/
  12. オーバーフロー
    13. :
  13. 非表示; }
    15. #head
  15. {
  16. 高さ:
    17. 64px
  17. ; 幅: 100px
    18. ;
  18. /*フィレットの形状をパーセンテージで定義します*/
    20. 境界
  20. -半径: 50%;
  21. /*背景*/
    23. 背景
  23. : #fff;
  24. マージン: 0 自動;
    25. margin-bottom
  25. : -20px;
  26. /*下枠のスタイルを設定*/ ボーダーボトム
    27. :
  27. 5px
  28. solid #e0e0e0
    29. ;
  29. /*属性は要素の重なり順を設定します。重なり順が高い要素は常に、重なり順が低い要素の前に配置されます*/ z-index: 100;
  31. /*相対的に配置された要素を生成します*/
  32. 位置: 相対
    33. ;
  33. }

  34. 効果のプレビュー:

    急いで目と口を追加してください!

    CSS コードコンテンツをクリップボードにコピーします
    1. #eye、
    2. #eye2{
    3. 幅: 11px;
    4. 高さ: 13px;
      5. 背景
    5. : #282828; 境界
      6. -半径: 50%;
    6. 位置
      7. :
    7. 相対; トップ:
      8. 30px
    8. ; 左: 27px
      9. ;
    9. /*要素を回転*/
    10. 変換: 回転(8 度)
    11. }
      13. #eye2
    13. {
      15. /*回転対称にする*/
    15. 変換: 回転(-8 度);
    16. 左: 69px
      17. ;
    17. 上
      18. :
    18. 17px; } #mouth{
      20. 幅
    20. :
      21. 38px
    21. ; 高さ
      22. : 1.
    22. 5px; 背景:
      23. #282828
    23. ; 位置: 相対
      24. ;
    24. 左: 34px;
    25. 上: 10px; }
    26. ミニ「ベイマックス」のプロトタイプが登場:
    27. 次は胴体と腹部です: CSS コードコンテンツをクリップボードにコピーします
      1. #torso、
      2. #お腹{
      3. マージン: 0 自動;   
      4. 高さ: 200px;   
      5. 幅: 180px;   
      6. 背景: #fff;   
      7. 境界-半径: 47%;   
      9. /*设置边框*/
      10. ボーダー: 5px solid #e0e0e0;   
      11. ボーダートップ: なし;   
      12. z-index: 1;   
      13. }
      15. #お腹{
      16. 高さ: 300px;   
      17. 幅: 245px;   
      18. マージントップ: -140px;   
      19. z-index: 5;   
      20. }
      22. #cover{
      23. 幅: 190px;   
      24. 背景: #fff;   
      25. 高さ: 150px;   
      26. マージン: 0 自動;   
      27. 位置: 相対;   
      28. トップ: -20px;   
      29. 境界線-半径: 50%;   
      30. }

    赋予「大白」象征生命的心脏：

    CSS コード剪定板への复制コンテンツ
    1. #heart{
    2. 幅:25px;
    3. 高さ:25px;
      4. ボーダー
    4. -半径:50%; 位置
      5. :
    5. 相対;
      6. /*境界線の周りに影効果を追加*/
    7. box-shadow:2px
      8. 5px
    8. 2px #ccc 挿入; 右
      9. 右
    9. :-
      10. 115px
    10. ; トップ:40px;
    11. z-index:111; ボーダー:
      12. 1px
    12. ソリッド
      13. #ccc
    13. ; } これが現在の「ベイマックス」です: 彼にはまだ手も足もありませんが、とてもかわいいです...「ベイマックス」には暖かい腕が必要です:
    14. CSS コード
    15. コンテンツをクリップボードにコピーします
      1. #left-腕、
      2. #right-arm{
      3. 高さ: 270px;   
      4. 幅: 120px;   
      5. 境界線-半径: 50%;   
      6. 背景: #fff;   
      7. マージン: 0 自動;   
      8. 位置: 相対;   
      9. トップ: -350px;   
      10. 左: -100px;   
      11. transform: 回転(20度);   
      12. z-index: -1;   
      13. }
      15. #right-arm{
      16. 変換: 回転(-20度);   
      17. 左: 100px;   
      18. トップ: -620px;   
      19. }

    还没有手指头呢：

    CSS コード剪定板への复制コンテンツ
    1. #l-bigfinger、
    2. #r-bigfinger{
    3. 高さ: 50px;   
    4. 幅: 20px;   
    5. 境界線-半径: 50%;   
    6. 背景: #fff;   
    7. 位置: 相対;   
    8. トップ: 250px;   
    9. 左: 50px;   
    10. 変換: 回転(-50度);   
    11. }
    13. #r-bigfinger{
    14. 左: 50px;   
    15. 変換: 回転(50 度);   
    16. }
    18. #l-スモールフィンガー、
    19. #r-smallfinger{
    20. 高さ: 35px;   
    21. 幅: 15px;   
    22. 境界線-半径: 50%;   
    23. 背景: #fff;   
    24. 位置: 相対;   
    25. トップ: 195px;   
    26. 左: 66px;   
    27. 変換: 回転(-40度);   
    28. }
    30. #r-smallfinger{
    31. 背景: #fff;   
    32. 変換: 回転(40度);   
    33. トップ: 195px;   
    34. 左: 37px;   
    35. }

    有点意思決定：

    迫不及待機要给「大白」加上腿了吧：

    CSS コード剪定板への复制コンテンツ
    1. #left-脚、
    2. #right-脚{
    3. 高さ: 170px;   
    4. 幅: 90px;   
    5. 境界線-半径: 40% 30% 10px 45%;   
    6. 背景: #fff;   
    7. 位置: 相対;   
    8. トップ: -640px;   
    9. 左: -45px;   
    10. transform: rotate(-1deg);   
    11. z-index: -2;   
    12. マージン: 0 自動;   
    13. }
    15. #right-脚{
    16. 背景: #fff;   
    17. ボーダー-半径:30% 40% 45% 10px;   
    18. マージン: 0 自動;   
    19. トップ: -810px;   
    20. 左: 50px;   
    21. transform: rotate(1deg);   
    22. }

    duang~ duang~ duang~ 特技完成！

    你的暖男大白来到了你的身边，是不是特別安全感哦！

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML9マスレイアウトの実装方法_HTML/Xhtml_Webページ制作次の記事：HTML9マスレイアウトの実装方法_HTML/Xhtml_Webページ制作

関連記事

続きを見る