首先是用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. php 位运算 3<<2;

  2. APICloud原生APP中ajax需要用api.ajax

    报错截屏: APICloud原生APP中ajax请求需要用api.ajax(api对象的ajax方法来替代),否则会将引起请求失败. APICloud api.ajax

  3. Android教程-02 在程序中输出Log

    视频教程,建议采用超清模式观看 在Android中一般都用Log输出日志,常见的有5个不同的级别 Log.v() Log.d() Log.i() Log.w() Log.e() 当然很多程序员还比较习 ...

  4. Ext--Layout(布局)

    EXT中的布局,常用的有border.column.fit.form.tabel这几种. Fit布局,子元素将自动填满整个父容器(对元素设置宽度无效),如果容器组件中有多个子元素,则只会显示第一个子元 ...

  5. 横向tab计算滚动位置

    React横向滚动计算 class Footer extends React.Component { handleClick(e) { const offset = 150; // 指定偏移量 thi ...

  6. 本地安装配置redis

    Windows中redis的下载及安装.设置   本文是转载自:https://www.cnblogs.com/jylee/p/9844965.html 下载地址: https://github.co ...

  7. H3C DHCP中继基本配置

  8. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  9. js三大框架出现的意义

    解决了原始html,css,js的UI与数据状态之间同步的难题,避免了大量的操作DOM代码. 使用了React,Angular和Vue,我们只需要定义一次 UI 界面,不再需要为每个操作编写特定的 U ...

  10. C语言 屏幕截图 (GDI)

    截取全屏幕 #include <windows.h>   void echo(CHAR *str); int CaptureImage(HWND hWnd, CHAR *dirPath, ...