用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的位置问题