首先是用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. SVN的使用与教程

    1.先下载SVN安装包 SVN安装教程

  2. SVN更换新的svn链接

    输入新的SVN地址即可:

  3. mysql数据库之存储引擎

    mysql存储引擎概述 什么是存储引擎?                                                               MYSQL中的数据用各不相同的技术 ...

  4. LRJ-Example-06-04-Uva11988

    单向链表的元素存放在数组s[]中,next指针存放在数组next[]中. 链表初始为空,next[0] == 0 代表链表结尾,类似NULL指针,在最后打印链表的时候作为for循环结束的条件. 依次插 ...

  5. H3C 路由器的特点

  6. Pytorch | BERT模型实现，提供转换脚本【横扫NLP】

    <谷歌终于开源BERT代码:3 亿参数量,机器之心全面解读>,上周推送的这篇文章,全面解读基于TensorFlow实现的BERT代码.现在,PyTorch用户的福利来了:一个名为Huggi ...

  7. Python--day20--序列化模块

    序列化:转向一个字符串数据类型 序列   ———— 字符串 序列化和反序列化的概念: 序列化三种方法:json pickle shelve json模块:json模块提供了四个方法dumps和load ...

  8. HDU 1754线段树基本操作，建树，更新，查询

    代码线段树入门整理中有介绍. #include<cstdio> #include<algorithm> #include<cstring> #include< ...

  9. [转]来自后端的逆袭 blazor简介 全栈的福音

    背景 什么是SPA 什么是MPA MPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计,早期的网站都是这样的设计,所之称为「网页设计」.使用 MPA ...

  10. 第一种方式：cookie的优化与购物车实例

    一 Cookie 的优化 1.1 一般而言,我们设置cookie是在php中设置 例如: <?php setcookie('testKey1','hello world',0,'/'); //# ...