首先是用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. TensorFlow 中的卷积网络

    TensorFlow 中的卷积网络 是时候看一下 TensorFlow 中的卷积神经网络的例子了. 网络的结构跟经典的 CNNs 结构一样,是卷积层,最大池化层和全链接层的混合. 这里你看到的代码与你 ...

  2. Python深入：修改Python搜索路径

    当Python执行import语句时,它会在一些路径中搜索Python模块和扩展模块.可以通过sys.path查看这些路径,比如: >>> import sys >>&g ...

  3. Laravel如何引用第三方（自定义）库

    想做一个网页抓取的功能,底层使用php的laravel框架. 这里使用phpQuery库来实现网页抓取,这里不做介绍. 需要了解的可以百度,或者等我填坑. 下载最新版本可以前往https://code ...

  4. 利用伪类选择器与better-scroll的on事件所完成的上拉加载

    之前给大家分享过一篇上拉加载 利用了better-scroll的pullUpDown 和DOM元素的删除添加  感觉那样不太好 今天给大家分享一个不同的上拉加载思想 代码如下 class List { ...

  5. 中国剩余定理（SCAUOJ 1077）

    1077 韩信点兵 时间限制:500MS  内存限制:65536K提交次数:1103 通过次数:99 题型: 编程题   语言: 无限制 Description 相传汉高祖刘邦问大将军韩信统御兵士多少 ...

  6. 一文告诉你Adam、AdamW、Amsgrad区别和联系 重点

    **序言:**Adam自2014年出现之后,一直是受人追捧的参数训练神器,但最近越来越多的文章指出:Adam存在很多问题,效果甚至没有简单的SGD + Momentum好.因此,出现了很多改进的版本, ...

  7. hdu 1289 Hat’s IEEE

    Problem - 1289 好题.其实就是模拟IEEE754的格式,不过要注意的是,这里用的32位是float,用double就不对了. 代码如下: #include <cstdio> ...

  8. SuperSocket命令程序集定义

    是的,SuperSocket是用反射来查找哪些公开的类实现了基本的命令接口,但是它只在你的AppServer类定义的程序集中查找. 举例来说, 你的 AppServer 定义在程序集 GameServ ...

  9. 【原生JS】键盘事件

    视频播放器音量调节效果. 效果图:“我很丑!~可是我有音乐和啤酒!~” HTML: <!DOCTYPE html> <html> <head> <meta c ...

  10. HTML静态网页--框架

    框架: 1.frameset frameset最外层的去掉body,直接用frameset 在超级链接指定目标页面显示在哪个框架窗口中 第一步:给要显示内容的目标frame设置name属性 第二步:给 ...