1.?信件写信ż?htmlԴ??
2.设计网页有办法让输入一个邮箱地址,然后自动打开那个邮箱的主页然后自动填上邮箱

?ż?htmlԴ??

       马上就要5月号啦，准备好如何向心仪的源码她/他表白了嘛！特此出一篇告白小信件，信件写信效果图如下。源码纯html+css绘制，信件写信包含详细教程注释，源码刮刮卡+源码+刮开+兼容干货满满哦。信件写信

       一、源码叮咚！信件写信查收您的源码信件！

       信件页面主要由信封，信件写信卡片，源码以及卡片上的信件写信皮卡丘组成。接下来也将分三部分进行讲解。源码我们先创建envelope.html及envelope.css。信件写信

       1.envelope1.1 绘制信封主体

       envelope.html

       首先，绘制我们的信封，创建类名为container的元素及类名为envelope的元素。我们将信封，卡片，以及卡片上的皮卡丘放在一个container中，方便我们调适三者统一的位置。

       代码如下：

       envelope.css

       在最开始导入我们后面将会用到的字体样式。接着，重置浏览器样式，设置背景颜色，及信封颜色和大小。其中，蓝光机的源码container和envelope均设置为相对定位。

       绝对定位和相对定位，总结一下就是不希望影响到其他元素的就设置为绝对定位，反之，需要在页面中占有位置的就设置为相对定位。具体实例见此文对Absolute（绝对定位）与Relative（相对定位）的解析。

       代码如下：

       运行效果：

       1.2 绘制信封细节

       信封主要由上下左右四个颜色不同的三角形组成。我们加入一个新的元素命名为cover，在原先的信封上覆盖上该元素。并通过设置该元素前后伪元素的样式形成四个三角。

       加入该元素后的html代码如下：

       envelop.html

       envelop.css

       可以看到，信封有四个三角形组成。

       1.2.1 CSS绘制三角形—border法

       那么如何绘制出三角形呢？

       （会的看官可以直接往下）

       这里我们使用 CSS 盒模型中的 border（边框）即可实现。

       原理：

       首先来看在为元素添加 border 时，border 的样子。假设有如下代码（与本文所写项目无关）：

       效果图：

       这是我们平常使用 border 最普遍的情况——往往只给 border 一个较小的宽度（通常为 1 ~ 2px）；然而这样的日常用法就会容易让大家对 border 的形成方式产生误解，即认为元素的 border 是由四个矩形边框拼接而成。

       然而事实并不是这样。实际上，元素的 border 是由三角形组合而成，为了说明这个问题，我们可以增大 border 的宽度，并为各 border 边设置不同的颜色：

       效果图

       既然如此，那么更进一步，把元素的内容尺寸设置为 0 会发生什么情况呢？

       效果图

       我们将发现，此时元素由上下左右 4 个三角形“拼接”而成；那么，为了实现最终的cdf溯源码防伪效果，即保留最下方的三角形，还应该怎么做？很简单，我们只需要把其它border边的颜色设置为白色或透明色：

       效果图

       不过，被“隐藏”的上border仍然占据着空间，要想使得绘制出的三角形尺寸最小化，还需要将上border的宽度设置为0（其它情况同理）。

       1.2.2 绘制信封

       绘制我们的信件 相信看了上面的讲解，大家一定了解了如何绘制三角形了。接下来我们将cover即其前后伪元素绘制成如下三个三角形。完成我们信封的制作。 （不了解伪元素的可以看下这篇::before选择器和::after选择器）

       由于cover元素不应该影响envelope元素在页面中的位置，所以设置为绝对定位。但我们又需要该元素显示在envelope之上，我们通过修改元素的堆叠顺序，来实现该效果，即设置z-index: 3;代码如下：

       envelope.css

       最终效果如下：

       1.3 信封开合动画

       接着绘制信封开合的动画。信封的开合同样是一个三角形，绕信封顶部边缘旋转°实现的。我们先加入该三角形的元素命名为lib加入到envelope.html中。接着创建信件开合的动画，分别为open和open-rev。

       我们使用transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置参数rotate(angle) 定义 2D 旋转，在参数中规定角度。蓝易源码网在这里我们将angle分别设置为deg和-deg，从而实现三角形的旋转，呈现效果为信封的开合。

       动画定义代码如下：

       envelope.css

       接着，我们将该元素绘制为三角形，并通过transform-origin属性，设置旋转元素的基点位置。通过animation属性为该元素设置定义好的动画，及动画执行时间。当鼠标hover于信封时，信封打开，反之信封合上。

       代码如下： envelope.css

       至此，我们的信封就大功告成啦！运行效果如下：

       1.4 加入阴影

       这一步较为，简单，也可以省略该元素，加入显得稍有立体感。首先，在envelope.html中加入类名为shadow的元素。随后设置该元素的样式，为一个较窄的横向的椭圆。至此，我们的信封部分就完成了！运行效果如下：

       1.5 envelope全部代码

       envelope.html

       envelope.css

       二、加入卡片元素并设置其样式

       接着，就是传奇类外挂源码绘制卡片部分了，也较为简单，是一个长方形的白色卡片，设置其样式，并为其添加滑动的动画。首先，我们在container内添加元素并命名为card。为方便我们观察，先将关于信封的元素注释掉。代码如下:

       envelope.html

       接着，设置样式为白色背景的长方形。

       envelope.css

       运行效果：

       然后，我们加入鼠标hover于信封时，卡片执行划出动画。至此，我们的卡片就完成了。

       运行效果：

       三、绘制卡片上的内容

       由文本及可爱的皮卡丘组成。为了方便观察，我们还是注释掉信封元素。首先，我们从简单的开始，在card元素间，加入我们的文本元素，命名为message，大家可以写自己想说的话。加入文本后的代码：

       envelope.html

       然后,设置文本向上移。 envelope.css

       运行效果：

       接着，我们要开始绘制卡片上的皮卡丘了。首先，我们绘制躯干，耳朵，尾巴，手臂，嘴巴，以及捧着的小心心。我们一步步来，先绘制躯干。

       首先，在card元素内，加入命名为pikachu的div元素。接着，我们通过设置该元素及其前后伪元素的样式，来绘制躯干，眼睛，脸颊以及小脚丫。我们一步步来，先绘制躯干。代码如下：

       envelope.css

       运行效果：

       接下来，我们绘制皮卡丘的头部，眼睛，脸颊以及脚。代码如下：

       envelope.css

       运行效果：

       接着，我们绘制皮卡丘的耳朵及尾巴。代码如下：

       envelope.css

       运行效果：

       至此，皮卡丘的绘制就完成一大半啦！我们再绘制皮卡丘的心爱心以及手臂。代码如下：

       envelope.css

       运行效果：

       接着，我们绘制皮卡丘的嘴巴。代码如下：

       envelope.css

       运行效果：

       至此，我们的小爱心，也绘制完成了。至此，我们的信件部分就完成了。解开注释看看具体效果吧。全部代码如下：

       envelope.html

       envelope.css

       三、打开您的信件

       第二个页面，就是信件内容啦。其中元素与card上的元素基本相同。博主在这个页面重新绘制了一只皮卡丘，增加了些光影的细节及动画。当然，用之前那只也是可以的。新的这只长酱紫：

       pikachu.html

       pikachu.css

       三、联结两个页面

       我们在信件页面，使用JS添加点击事件即可实现。

       总结

       预祝大家快乐，愿你们今后每一个平凡的小普通，都是小牛马求而不得的心动QAQ。

       链接：pan.baidu.com/s/1VOcJvm...

       提取码：LDL6

设计网页有办法让输入一个邮箱地址,然后自动打开那个邮箱的主页然后自动填上邮箱

       mailto是网页设计制作中的一个非常实用的html标签，许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址，这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后，就能自动打开当前计算机系统中默认的电子邮件客户端软件，例如OutLook Express以及Foxmail等。当然有关mailto标签的使用，并不仅仅就象上面所说的那样简单，它还有其他方面的应用。

        1、如果我们在网页中创建一个形如“mailto: aaa@cn.com”这样的超级连接时，用鼠标单击一下该超级连接的话，浏览器会自动调用系统默认的邮件客户端程序，同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址，而其他的内容都是空白，留给访问者自行填写；

        2、要是大家在单击电子邮件超级连接时，希望系统自动打开的电子邮件编辑窗口中，除了在收件人地址栏中自动填写上内容外，在抄送地址栏中也能自动填写上自己需要的电子邮件地址的话，就可以直接在网页的 html源代码中插入形如“mailto: aaa@cn.com?bbb@cn.com”这样的语句，其中aaa@cn.com将会自动出现在收件人地址栏中， bbb@cn.com则会自动出现在抄送地址栏中；

        3、如果大家希望在弹出的邮件编辑窗口中能自动将邮件的主题内容填上的话，可以使用形如“mailto: aaa@cn.com?subject='mailto'应用技巧拾零”这样的html语句，当浏览者用鼠标单击由该语句组成的电子邮件超级连接时，在随后打开的邮件编辑窗口的收件人地址栏中自动出现aaa@cn.com，主题设置栏中将自动出现“‘mailto'应用技巧拾零”这样的内容；

        4、如果想在收件人地址栏中同时输入多个电子邮件地址时，那么就可以使用形如“mailto: aaa@cn.com；bbb@cn.com”这样的语句，记住每个电子邮件之间用“；”隔开，这样当浏览者单击由该语句创建的电子邮件超级连接时，在弹出的邮件编辑窗口的收件人地址栏中同时会出现aaa@cn.com、bbb@cn.com这样的收件人地址，浏览者就能同时向这些人发送电子邮件；

        5、在网页中出现的邮件地址经常会被一些诸如“mail-robot”的自动搜索程序搜索到，这样其他人很容易利用搜索到的邮件地址来向你发送各种各样的垃圾邮件，为了能将这些垃圾邮件拒之于千里之外，我们可以将在网页上公开的邮件地址写成ASCII码形式，同时要记住每一个ASCII码前面都必须添加“”，例如我们在网页中使用“mailto: aaa@cn.com”这样的语句来创建电子邮件超级连接的话，单击该超级连接后，我们发现在随后打开的邮件收发窗口中，收件人地址栏中仍然会显示 aaa@cn.com这样的内容，而其他的各种邮件自动搜索工具都不能正确识别这样的ASCII代码，因此用户收到的各种来历不明的垃圾邮件就会大大减少；

        6、一般情况下，浏览者单击电子邮件超级连接时，系统在默认打开的邮件客户端软件中，只是自动在收件人地址栏处填上内容，而其他设置栏处仍然显示为空白，如果大家还希望自动把主题、抄送、暗送甚至内容都填写上的话，就可以使用形如“mailto: aaa@cn.com?cc=bbb@cn.com&bcc=ccc@cn.com&subject=‘mailto'应用技巧拾零&body=mailto标签的综合应用举例说明！”这样的语句，在这个语句中第一个功能以“?”开头，后面的每一个功能以 “&”开头；当用鼠标单击这个邮件地址时，在随后打开的邮件编辑窗口中，我们将看到在收件人地址栏中自动填写上了aaa@cn.com，在抄送地址栏中自动填写上了bbb@cn.com，在暗送地址栏中自动填写上了ccc@cn.com，在主题栏中自动填写上了“‘mailto'应用技巧拾零”，在信件的正文部分将自动出现“mailto标签的综合应用举例说明！”这样的文字。

        上面出现的 aaa@cn.com、bbb@cn.com、ccc@cn.com都是为方便说明，而随意设置的，大家可以根据自己的要求，用自己真实的邮件地址来代替他们；此外，如果要使用mailto同时实现多个功能的话，第一个功能必须以“?”开头，后面的每一个功能都以“&”开头；另外，cc后为抄送地址，bcc后为暗送地址，subject后为邮件的主题，body后为邮件的内容。