整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
语 与流行的看法相反，CSS不仅仅是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有很多其他的事情，CSS也可以做的很好。由于它创建动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试
与流行的看法相反，CSS不仅仅是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有很多其他的事情，CSS也可以做的很好。由于它创建动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。
浏览器就像一个空的画布，WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子，从原始字符到有趣的动画，有很多激励你自己将时间花费在CSS上。
1. The Simpsons
Chris Pattle使用纯CSS创建了Simpsons家族。他把每个角色的脸部拆分成很小的形状，然后又拼接回去。他甚至给角色的眼睛添加了动画来赋予它们生命力
2. Minions With Pure CSS
如果你看过电影《Despicable Me(神偷奶爸)》，那你一定对其中的Minion(小黄人)印象深刻。Amr Zakaria用纯CSS实现了其中的几个Minion，它们会用闪烁的眼睛和友好的手势给你打招呼。
3. <a href="http://cssdeck.com/labs/neon-signs-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3" rel="external nofollow" target="_blank" title="\">Broken neon sign
这是用CSS的 text-shadow 实现破碎的霓虹灯效果的例子。把鼠标放到单词上，注意字母“c”、“n”和“i”的变化。
4. Mmm… Cheese
这是一块奶酪还是？Hugo Giraduel用CSS制作了这个3D的奶酪。我不知道你怎么认为，但是它看起来就像某种家居用品。
5. Single Element CSS character
Hugo Giraudel的另一个作品，这次，他只用一个元素实现了8位字符。
6. Viking Shield
这个一个由 LukyVj 创建的Viking盾牌。它做的太好了，以至于你很难看出它是用CSS而不是由图形编辑器做出来的。
7. Fluid menu with transparent icon
这是一个独特的透明颜色滑块菜单，当鼠标滑过的时候会有一个菜单图标。
8. CSS Creatures
CSS Creatures是由@bennettfeely制作的可以微笑、哭或者你想表达的其他表情。你可以选择牙齿、胡须、颜色、眼睛以及嘴巴来创建你自己。
9. Long Cat
调整您的浏览器窗口，猫的身体会根据浏览器窗口的宽度来拉伸或压缩。你觉得这个CSS-kitty拉伸或者压缩的的程度是多大呢？
10. Rolling coke Can
这是另一个非常有趣的。当你向右滑动滚动条的时候，看起来就像是可乐罐在滚动一样。一个纯CSS实现的很棒的效果。
11. <a href="http://thecodeplayer.com/walkthrough/javascript-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3-calculator" rel="external nofollow" target="_blank" title="\">Calculator
这个计算器的设计简单干净，但是如果结合JavaScript，它会给你带来更多的乐趣。
12. Grid Animation Effect
应用任何动画效果是很困难的，更不用说是通过纯CSS。但是这个网格动画效果实现的很漂亮。
13. Smooth iOS 7 toogle
这个由Dan Eden制作的切换按钮灵感来源于iOS 7。如果你尝试一下，你会看到它和原来的iOS7切换按钮是多么相似。
14. Animated checkmark button
Sascha Michael Trinkaus制作了这个由渐变颜色包围的复选框按钮。请特别注意当你点击它的时候的效果。
15. Minion
这是另一个由CSS实现的可爱风格的Minion 。
16. Menu toogle SVG animation
看动画的演示，您将看到菜单形状的平稳过渡到另一个形状。
17. Shape masking
<a href="http://cssdeck.com/user/%3Ca%20href=" http:="" www.aseoe.com="" tag-css-1.html"="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">CSSMuse" target="_blank" title="\">CSSMuse用CSS实现圆、五角形、六角形。
18. Loaders Kit
这些是用纯CSS实现的加载样式。如果你想减小带宽的使用，基于CSS的加载样式将会非常的好用。
<div>元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。
在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。
那时，大街小巷上有好多网吧。
那时，马云刚刚辞去工作准备创业。
那时，发送邮件的操作都会出现在计算机课程中。
那时，对页面还没有现在的跨平台要求。
那时，flashplayer大行其道。
那时，dreamwaver、flash、fireworks被称为网页三剑客！
那时，制作网页可以不用懂的html的写法！
第一次接触网页制作是在大学的专业课上，使用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何使用flash制作酷炫的交互动画上了。
那时，对html还没有深刻的认识，但是却对<table></table>这个标签有着极深的印象。
因为当时的dreamwaver通过非代码方式生成的页面都是使用<table>表格元素进行布局的！
也就是说，在移动智能设备诞生之前，在用户对页面还没有可以适应不同屏幕比例的要求前，<table>这个本来用来做表格的元素同时兼职了<div>的页面布局工作，而且把兼职干成了主业，让<div>这个专业的块元素闲置了好久。
直到智能手机，平板电脑产生后，由于对页面的跨平台显示的要求的出现（这类适应多平台的页面布局叫做响应式布局），<table>表格制作的页面在响应式布局大行其道的今天，用它布局的页面开始出现代码冗余，维护困难等诸多问题。手机端的浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。
从此，页面制作的世道变了，从不需要编程就能制作页面的三剑客，变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式，过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。
dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的方式。
这个故事在开始学习<div>和css布局之前我都会讲给学生（一群文科生）听，我只是想告诉大家，学习任何计算机技术，我们可以从简单易学的方式入手，但要有透过这种方式向下挖掘核心知识的决心和勇气！对于自己从事的工作我们不能满足于会做，还要尽量透析它的原理，这样才能在技术换代中不会被轻易淘汰。
在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技术概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。
从此我开始学习数学。因为老师的一句话：从2000年到现在（2014）虽然各种软件层出不穷，但是计算机图形学的核心算法却几乎没什么改变。
向下挖掘虽然很难，但是有必要！与各位共勉！
下面开始今天的内容。
首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把<body></body>中间的内容清空。
如图：
下面，我们在<body></body>中间添加<div></div>标签。示例代码如下：
<body><div></div></body>我们看看效果：
啦啦啦，什么都没有！
为了让大家可以看出来不同，我们为<div>添加边框属性！
我们使用style属性为<div>添加边框，style属性里的代码就是以后在CSS中使用的代码！实际上我们已经开始接触CSS的一些内容了。具体写法的讲解大家可以看这个教程，这里不再赘述。
示例代码如下：（通过style="border-style: solid;"可以为很多元素添加边框，就不需要大家记忆或查询不同元素的不同写法，是不是很方便！）
<div style="border-style: solid;">效果如图：
因为里面没有内容，所以<div>的宽度是0，因此显示的就是一条直线。下面我们向<div>中添加内容。
为了看起来花哨些，加张图片吧！
示例图片
示例代码如下：
<div style="border-style: solid;"><img src="img/示例图片/image4.jpg"/ style="width:50%；"></div>大家请按照<img>中的scr自行建立文件夹和命名吧！如果您看不懂请参照《HTML元素中的属性2（路径详解）——零基础自学网页制作》
效果如下：
其中，我们也是使用了style的方式为<img>设置的宽度，这个设置方法在<div>中一样使用！
代码示例：大家注意写法，不同的属性都添加到style的双引号中即可，同时使用；隔开！
<div style="border-style: solid; width:50%;">
<img src="img/示例图片/image4.jpg"/ style="width:50%;">
</div>效果如图：
整个边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。
为了方便观看，我们去掉div的width设置。同时在<div>中继续添加<div>标签。为了方便显示，我们在新的<div>中添加一段文字！
示例代码如下：
<div style="border-style: solid;">
<img src="img/示例图片/image4.jpg"/ style="width:50%;">
<div>
<p>学习网页制作非常有趣！</p>
</div>
</div>效果如下：
如果为了美观，我们让文字到图片右边的空间中怎么做呢？
示例代码如下：
<div style="float:right;"><p>学习网页制作非常有趣！</p></div>
我们通过为新的<div>标签中的style属性添加float（浮动）属性，同时设置为right（右）。
页面效果如图：
大家思考一下如何让图片与文字都靠在左边呢？
是不是为图片style添加float:left;同时把新<div>的float改为left？
我们试试看！
示例代码如下：
<div style="border-style: solid;">
<img src="img/示例图片/image4.jpg" style="width:50%; float:left;"/>
<div style="float:left;">
<p>学习网页制作非常有趣！</p>
</div>
</div>页面效果：
效果完全不对，图片和文字跑到外边来了。
这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改<img>属性也不是修改<div>属性，而是增加一组空的<div></div>标签！给这个新的空的<div>的style设置为"clear:both"即可修正。
示例代码如下：
<div style="border-style: solid;">
<img src="img/示例图片/image4.jpg" style="width:50%; float:left;"/>
<div style="float:left;">
<p>学习网页制作非常有趣！</p>
</div>
<div style="clear:both;"></div>
</div>页面效果如下：
值得注意的是，如果您不使用<div>的话直接使用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会出现上面的情况。
代码如下：
<body>
<img src="img/示例图片/image4.jpg" style="width:50%; float:left;"/>
<p style="float:left;">学习网页制作非常有趣！</p>
</body>页面显示效果如下：
大家观察一下，文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况，而且文字也变小的问题在以后的讲解中我们再深入探讨！
现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细说明。
疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
use-UI是基于 Vue2.0 的 Material Design UI 组件库
npm install muse-ui --save
import Vue from 'vue' import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' // 加载样式 Vue.use(MuseUI)
https://gitee.com/myronliu347/muse-ui
*请认真填写需求信息，我们会在24小时内与您取得联系。
