用HTML和CSS打造屬于自己的暖男“大白”

2020-03-24 16:27:03

字體：大中小

來源：轉載

供稿：網友

PS：您最好對 HTML 和 CSS 有一定的了解，但如果你是小白也沒關系，小白見「大白」也是可以的！一、準備工作進入到 /home/shiyanlou/ 目錄下，新建空白文檔：命名為 Baymax.html （其它名字也可以，但后綴名必須是 .html）：使用 gedit 打開，準備編輯代碼：二、編寫 HTML填寫以下代碼：
XML/HTML Code復制內容到剪貼板
!--定義頭部，包括兩個眼睛、嘴-- divid= head divid= eye /div divid= eye2 /div divid= mouth /div /div !--定義軀干，包括心臟-- divid= torso divid= heart /div /div !--定義肚子腹部，包括cover（和軀干的連接處）-- divid= belly divid= cover /div /div !--定義左臂，包括一大一小兩個手指-- divid= left-arm divid= l-bigfinger /div divid= l-smallfinger /div /div !--定義右臂，同樣包括一大一小兩個手指-- divid= right-arm divid= r-bigfinger /div divid= r-smallfinger /div /div !--定義左腿-- divid= left-leg /div !--定義右腿-- divid= right-leg /div /div /body html
三、添加 CSS 樣式我們已經使用 HTML 定義好「大白」的各個元素，現在就需要利用到 CSS 來繪制它的樣式外表。由于「大白」是白色的，為了更容易辨識，我們把背景設為深色。然后首先是頭部：CSS Code復制內容到剪貼板
/*設置下邊框的樣式*/ border-bottom:5pxsolid#e0e0e0; /*屬性設置元素的堆疊順序；擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面*/ z-index:100; /*生成相對定位的元素*/ position:relative; }
transform:rotate(-8deg); left:69px;top:17px; } #mouth{ width:38px; height:1.5px; background:#282828; position:relative; left:34px; top:10px; }
/*設置邊框*/ border:5pxsolid#e0e0e0; border-top:none; z-index:1; } #belly{ height:300px; width:245px; margin-top:-140px; z-index:5; } #cover{ width:190px; background:#fff; height:150px; margin:0auto; position:relative; top:-20px; border-radius:50%; }
/*向邊框四周添加陰影效果*/ box-shadow:2px5px2px#cccinset; rightright:-115px; top:40px; z-index:111; border:1pxsolid#ccc; }
width:90px; border-radius:40%30%10px45%; background:#fff; position:relative; top:-640px; left:-45px; transform:rotate(-1deg); z-index:-2; margin:0auto; } #right-leg{ background:#fff; border-radius:30%40%45%10px; margin:0auto; top:-810px; left:50px; transform:rotate(1deg); }html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用CSS控制網頁總體風格

下一篇：s基礎：CSS的位置問題