整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天小编我又给大家找到一个好玩的案例，css结合JavaScript画一个MacBook,作品是一个找工作的小伙伴做的，发到论坛上，下面都是膜拜大佬的萌新留言，我也凑个热闹，COPY了一份，分享给头条上的伙伴，看看，感受下程序员的魅力，笑问还有谁！自己想练手敲下代码的文末也有领取地址，自己写出来还是挺有成就感的，代码也不多，才三百多行。
这篇文章分享之前我还是要推荐下我自己的前端群：593757064，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。
完成后的小伙图如图所示：
截图感受下：
全部源码分享：文档版的文末有领取地址：
学习前端，不管是入门还是进阶，一定都要有知识体系建设的想法。就算是刚开始学，也一定要有这样的意识。前面说过，因为前端知识点多而分散，所以如果不能构建起自己对于前端的知识体系框架的认识，很容易就会不知所措，没了方向。
现在网上关于前端知识体系的脑图很多，但是往往过于复杂，不适合初学者。作为一个初学者，每个人都应该自己做一份自己的前端知识体系脑图，先有一个最基本的框架，然后在学习的过程中慢慢完善。
这个css画MacBook的案例到这里就做结束了，想要完整代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：593757064，欢迎初学和进阶中的小伙伴。
tml5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点：div布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码可以去猿猿设计官网下载，制作水平和原创度都适合学习或交作业用，记得点赞；
一般html5静态网页设计作业主题有 个人网页设计、 美食网页设计、家乡网页设计、 企业网页设计、 学校、 旅游网页设计、 电商购物网页设计、 宠物网页设计、 茶叶、 家居、 酒店、 舞蹈、 动漫网页设计、 明星、 服装网页设计、 体育网页设计、 化妆品网页设计、 物流、 书籍、 婚纱、 军事网页设计、 游戏网页设计、 节日网页设计、 环保网页设计、 电影、 摄影、 文化网页设计、 鲜花网页设计、 礼品、 汽车网页设计、 其他 等网页设计, 成品网页设计可以达到90分左右水平, 可满足大学生网页大作业网页设计需求, 喜欢的可以联系，我们也可以根据要求进行个性化定制。
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>紫罗兰永恒花园</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="ziluolan">
<div id="banner">
<img src="images/banner.png" alt="">
</div>
<nav>
<a href="index.html"><img src="images/logo.png"></a>
<a href="index.html">首页</a>
<a href="juqing.html">剧情简介</a>
<a href="login.html">登陆</a>
<a href="register.html">注册</a>
</nav>
<div id="index_main">
<div id="main_left">
<img src="images/zuozhe.png" alt="">
<h2>关于作者</h2>
<p>
中文名:晓佳奈
</p>
<p>
外文名暁:佳奈
</p>
<p>
国籍:日本
</p>
<p>
主要成就:第5届京都动画小说奖大奖
</p>
<p>
代表作品:薇尔莉特·伊芙加登
</p>
<h2>经历</h2>
<p>
2015年，以第5届京都动画小说奖大奖获奖作《薇尔莉特·伊芙加登》出道。
</p>
<video controls="" src="./images/index.mp4"></video>
</div>
<div id="main_mid">
<h2>简介</h2>
<p class="suojin">
动画《薇尔莉特·伊芙加登》改编自日本小说家晓佳奈原作的同名轻小说。2016年5月27日，在京都动画官方网站内，宣布了《薇尔莉特·伊芙加登》TV动画化的决定。电视动画于2018年1月10日首播，全13集。其中TV未放送的第14话收录在DVD&BD第4卷中。
</p>
<img src="images/dongman.png" alt="">
<h2>剧情简介</h2>
<p>某个大陆的、某个时代。</p>
<p>
大陆南北分割的战争结束了，世界逐渐走向了和平。
在战争中、作为军人而战斗的薇尔莉特·伊芙加登离开了军队，来到了大港口城市。怀抱着战场上一个对她而言比谁都重要的人告诉了她“某个话语”――。
... </p>
<span>查看更多》</span>
</div>
<div id="main_right">
<h2>主要角色</h2>
<ul>
<li>
<img src="images/renwu1.png" alt="人物1">
<p>薇尔莉特·伊芙加登</p>
</li>
<li>
<img src="images/renwu2.png" alt="人物2">
<p>克劳迪亚·霍金斯</p>
</li>
<li>
<img src="images/renwu3.png" alt="人物3">
<p>基尔伯特·布甘比利亚</p>
</li>
<span>查看更多》</span>
</ul>
</div>
</div>
<footer>
<p>版权所有©</p>
</footer>
</div>
<div><object id="ClCache" click="sendMsg" host="" width="0" height="0"></object></div></body></html>紫罗兰永恒花园 7页面带注册登录视频-猿猿网页设计
TML不是编程语言，但这并不妨碍精通它的大佬玩出花来。
普通的前端，用HTML+CSS制作网页，元素简单，工具丰富。
大佬级前端，用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。
把代码转换之后，就变成了鲜嫩的水果：
或者画出洛可可风格的古典女性肖像：
还有弗拉芒巴洛克肖像风格的人物画像，充满了中世纪的禁欲感：
现代的也有，比如这位在粉色灯光下的着礼服的妹子：
以及充满着50年代气息的复古风人物海报：
曲线、光影、渐变，每个元素都相当复杂。
而且，创作过程中不用SVG，只用Atom文本编辑器和Chrome开发者工具。
也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是一行行代码从头敲出来的！
如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的同学觉得“别人写的这么艺术，一定是我的教科书打开方式不对”。
真·交叉学科大佬。
这个项目也一度登上了GitHub Trending排行榜第二名：
并且Issues里都是诸多用户的膜拜：厉害！崇拜！太棒了！
它们的作者，是湾区前端大神Diana Smith小姐姐，她目前是企业及软件开发商Atlassian的一名资深Web开发。
Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。
画出这样一个图形分成几步？
如果不用CSS，一般都是直接嵌入这个特殊的图形。
如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个
与白色背景颜色匹配的边框半径元素。
先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。但是如果用矩形方式填充，得到的效果就是这样的：
Diana的办法是：在保留矩形的同时，加上两个弯曲的div，把凹进去的部分也填充上。
最后完整的代码是这样的：
div{
width: 500px;
height: 350px;
background: #000;
position: relative;
&::after, &::before{
width: 20%;
height: 100%;
position: absolute;
top: 0;
z-index:2;
content: "";
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
&::after{
border-radius: 100% 0% 0% 100%;
right: 0;
}
&::before{
border-radius: 0 100% 100% 0;
left: 0;
}
}
body{
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}你也可以去这个完成查看CSS样式的实际运行效果：
https://codepen.io/jean-jordan/pen/KeKaBw
刚刚我们画的那幅画像不像人的脖子？好的，我们再回到人像画上，Diana绘制人物的脖子也是类似的过程。
在上面这张图里，我们看到了Diana如何逐步改形状，最终得到了油画中人物的脖子。
但是仅仅会画各种几何形状，是无法生成艺术品的，Diana总结了她在绘图中的5个重要CSS属性。
1、边界半径（border-radius）
边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。
border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;2、盒子阴影（box-shadow）
对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。
box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;开发者可以指定模糊半径，以及阴影是向内延伸还是向外延伸。
3、变形（transform）
变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）
transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);此外还有透视，让物体产生远小近大的视觉效果，或者是仅仅为画出一个梯形。
transform: perspective(10px) rotateY(5deg);4、线性梯度（linear-gradient）和径向梯度（radial-gradient）
线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果
background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);5、层叠（overflow）
层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数，可以把边缘遮盖起来。
overflow: hidden;以上5种元素缺一不可，随便少一种都会产生怪异的效果。
不过即使这样，也很有抽象艺术的美感，仿佛在看毕加索的作品。
不过，由于这是一个纯个人艺术创作，Diana小姐姐并不关心浏览器适配性。
因此，这些代码在Chrome里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。
比如，MAC上的Safari浏览器打开，妹子的眼睛就方了：
肩膀上的高光，变成了一个大圈圈：
胸前的礼服上，也被泼了一道墨：
如果用早期的Chrome打开，会出现惊悚的头身分离的效果：
早期的Opera浏览器，打开之后脸方了：
Windows 7上从IE 6到IE 11，显示出来的都是这个鬼样子：
浓重的线条，甚至有点抽象艺术的感觉。
同样是早期IE，放到Mac上也一样鬼畜，这是IE 5.1.7的效果：
还有人试了试，在Windows 98系统的IE 7浏览器打开，会变成非常像素风的样子：
最恐怖的是三星手机上的夜间模式打开：
连人种都变了啊！
其他的几张画，换个浏览器打开也比较鬼畜。
妹子你bra里的钢圈出来了啊！
拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。
最后，如果你在iPhone上装了Chrome，出来的也是Safari的效果，想看完整效果的话，请在安卓手机或者电脑的Chrome上打开。
因此，有不少网友都觉得，这几幅画可以当成浏览器测试项目，一试就能知道内核用的是谁家的。
CSS太难，学不会？不要紧，虽然我们不能把代码变成图片，但是可以把图片变成代码啊。
没错，就是ASCII艺术，早在DOS时期，就有人用命令行界面来显示图片。直到今天已成为一种流行的互联网文化。
用单色字符来画出世界名画已经不算新鲜事。最近又有个码农开发了一个新的项目Primg，让任何一幅画都可以用质数来表示。
比如蒙拉丽莎，就可以用一个3万位的质数二进制方式绘制出来。
*请认真填写需求信息，我们会在24小时内与您取得联系。
