首先是用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. C#中的?操作符

    一.1个?的用法 1. 表示可空数据类型,如 int? bool? 2. 跟在对象后,如该对象为null,则不会触发空值异常,且整个表达式返回null,如: string kk = "123 ...

  2. 洛谷 1602 Sramoc问题

    Description 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐厅找来了资深顾问 ...

  3. H3C V.24接口线缆

  4. H3C DCC的特点

  5. 洛谷P2486 [SDOI2011]染色 题解 树链剖分+线段树

    题目链接:https://www.luogu.org/problem/P2486 首先这是一道树链剖分+线段树的题. 线段树部分和 codedecision P1112 区间连续段 一模一样,所以我们 ...

  6. SpringBoot2.0 使用AOP统一处理Web请求日志（完整版）

    一,加入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. dotnet core 添加 SublimeText 编译插件

    因为 SublimeText 有很多插件都是使用 Py 写的,而我想使用 dotnet core 给 SublimeText 写一个编译插件,也就是在我使用 Markdown 的时候可以点击编译,将 ...

  8. H5 数据存储localStorage

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SpringSecurity认证流程详解

    SpringSecurity基本原理 在之前的文章<SpringBoot + Spring Security 基本使用及个性化登录配置>中对SpringSecurity进行了简单的使用介绍 ...

  10. excel转换成实体

    package com.cinc.ecmp.utils; import java.io.IOException; import java.io.InputStream; import java.lan ...