首先是用html 语言来搭建框架

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Bymax</title>

	<link rel="stylesheet" href="dabai.css">

</head>

<body>

<div class="baymax">

<!-- 定义头部 -->

	<div class="head">

		<div class="eye"></div>

		<div class="eye2"></div>

		<div class="mouth"></div>

	</div>

	<!-- 定义驱干 -->

	<div class="torso">

		<div class="heart"> </div>

	</div>

	<!-- 心脏 -->

	<div class="belly">

		<div class="cover" =""></div>

	</div>

	<!-- 胳膊 -->

	<div class="left-arm">

		<div class="l-bigfinger"></div>

		<div class="l-smallfinger"></div>

	</div>

	<div class="right-arm">

		<div class="r-bigfinger" ></div>

		<div class="r-smallfinger"></div>

	</div>

	<!-- 腿 -->

	<div class="left-leg"></div>

	<div class="right-leg"></div>

</div>

</body>

</html>

如果你要构建一个页面，你首先要想好页面里面的内容有什么，它的组成，像画画一样一个一个去画

然后才是用css,排版出来，每一个css里面一般都是位置，大小，边框，效果，颜色。

如果你构建的是网站html 里面的html 标签就多，相对应的css ,就要考虑选择器，使用定义整体，再定义局部，我觉得对于一个网页来说，最重要的是在编码前对于页面整体的把握，之后去考虑细节的实现。如果以后我发现这一点不对，或者要补充，我会回来修改这篇博客。

css 来描绘图片样式：

body{

	background: red;

}

.baymax{

	margin: 200px auto 0px ;

	height: 500px;

	/*溢出部分隐藏*/

	overflow: hidden;

}

.head{

	height: 64px;

	width: 100px;

	border-radius: 50%;

	background: #fff;

	margin: 0 auto;

	margin-bottom: -20px;

	border-bottom: 5px solid #e0e0e0;

	z-index: 100;

	position: relative;

}

.eye,

.eye2{

	width: 11px;

	height: 13px;

	background: #282828;

	border-radius: 50px;

	position: relative;

	top: 30px;

	left: 27px;

	transform: rotate(8deg);

}

.eye2{

	transform: rotate(-8deg);

	left: 69px;

	top: 17px;

}

.mouth{

	width: 38px;

	height: 1.5px;

	background: #282828;

	position: relative;

	left: 34px;

	top: 10px;

}

.torso,.belly{

	margin: 0 auto;

	height: 200px;

	width: 180px;

	background: #fff;

	border-radius: 47%;

	border-bottom: 5px solid #e0e0e0;

	border-top: none;

	z-index: 1;

}

.belly{

	height: 300px;

	width: 245px;

	margin-top:-140px;

	z-index: 1;

}

.cover{

	width: 190px;

	background: #fff;

	height: 150px;

	margin: 0 auto;

	position: relative;

	top: -20px;

	border-radius: 50%;

}

.heart{

	width: 25px;

	height: 25px;

	border-radius: 50px ;

	position: relative;

	box-shadow: 2px 5px #ccc inset;

	right: -115px;

	top:40px;

	z-index: 111;

	border: 1px solid #ccc;

}

.left-arm,

.right-arm{

	height: 270px;

	width: 120px;

	border-radius: 50%;

	background: #fff;

	margin: 0 auto;

	position: relative;

	top: -350px;

	left: -100px;

	transform: rotate(20deg);

	z-index:-1;

}

.right-arm{

	transform: rotate(-20deg);

	left: 100px;

	top: -620px;

}

.l-bigfinger,

.r-bigfinger{

	height: 50px;

	width: 20px;

	border-radius: 50%;

	background: #fff;

	position: relative;

	top: 250px;

	left: 60px;

	transform:rotate(-50deg);

}

.r-bigfinger{

	background:#fff;

	transform:rotate(50deg);

	top: 248px;

	left: 40px;

}

.l-smallfinger,

.r-smallfinger{

	height: 35px;

	width: 15px;

	border-radius: 50%;

	background: #fff;

	position: relative;

	top: 195px;

	left: 76px;

	transform: rotate(-40deg);

}

.r-smallfinger{

	background: #fff;

	transform: rotate(40deg);

	top: 195px;

	left: 27px;

}

.left-leg,

.right-leg{

	height: 170px;

	width: 80px;

	border-radius: 30% 70%;

	background: #fff;

	position: relative;

	top: -640px;

	left:-50px;

	transform: rotate(-1deg);

	z-index: -2;

	margin: 0 auto;

}

.right-leg{

	border-radius: 70% 30%;

	margin: 0 auto;

	top: -810px;

	left: 45px ;

	transform: rotate(1deg);

}

纯css 实现大白的更多相关文章

  1. 用纯CSS画大白

    纯CSS打造网页大白知识点:      首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  4. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  5. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  6. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  7. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  9. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

随机推荐

  1. oracle函数 LOWER(c1)

    [功能]:将字符串全部转为小写 [参数]:c1,字符表达式 [返回]:字符型 [示例] SQL> select lower('AaBbCcDd')AaBbCcDd from dual; AABB ...

  2. 「BZOJ3694」「FJ2014集训」最短路

    「BZOJ3694」「FJ2014集训」最短路 首先树剖没得说了,这里说一下并查集的做法, 对于一条非树边,它会影响的点就只有u(i),v(i)到lca,对于lca-v的路径上所有点x,都可通过1-t ...

  3. linux服务器时间更新

    yum install ntpdate ntpdate ntp1.aliyun.com(阿里云服务器时间)

  4. Linux 运算符

    布尔运算符 下表列出了常用的布尔运算符,假定变量a为10 变量b为20: 运算符  说明 举例 ! 非运算 , 表达式为true 则返回false 否则返回true  [!false] 返回true. ...

  5. php parse_url linux 解析问题

    耕毅 解析url函数parse_url() (PHP 4, PHP 5, PHP 7) parse_url — 解析 URL,返回其组成部分 mixed parse_url ( string $url ...

  6. H3C 命令级别

  7. iptables禁止icmp端口

    除192.168.62.1外,禁止其它人ping我的主机 #iptables -A INPUT -i eth0 -s 192.168.62.1/32 -p icmp -m icmp --icmp-ty ...

  8. PHP程序员技术职业生涯，你是如何规划的？

    职业规划是这样的 看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些,然后就直接上手搭环境.做项目,中级就是 ...

  9. Python--day25--接口类多继承

  10. 给websocket加入心跳包防止自动断开连接

    var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当 ...