当前位置: 网站建设 > 网页设计 > 建站经验 >

HTML+CSS网页制作实例 制作联系人网页表单

时间:2013-03-02 03:48来源:未知 作者:admin 点击:

标签:HTML+CSS网页制作实例 制作联系人网页表单 表单(17)制作(46)联系人(1)网页制作(31)实例(55)HTML+CSS(1)网页(168)
自动扩展文本域 导出图片时要留神,所有图片都保留为背景透明的PNG-24,这是为了让图片完善叠加在背景上。 CSS文件开始会进行简略重置,肃清掉所有阅读器的默认样式,然后把整个页面的样式增添到body之中。ID为container的div层加上蓝色背景图片(lines.png
HTML+CSS网页制作实例 制作联系人网页表单》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335432013.htm

自动扩展文本域

 

导出图片时要留神,所有图片都保留为背景透明的PNG-24,这是为了让图片完善叠加在背景上。

 

CSS文件开始会进行简略重置,肃清掉所有阅读器的默认样式,然后把整个页面的样式增添到body之中。ID为container的div层加上蓝色背景图片(lines.png)就变成了信纸。然后将投影图片(shadow,Google谷歌Logo的CSS前景图片合并技术.png)添加到:before的挑选器中,相对定位可使投影向信纸下居左显示,这样就信纸的投影效果就实现了。

破洛洛文章简介:在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格。

应用常见字体写上信纸的印书体题目等内容。确保所有的文本内容与信纸的蓝色基线对齐。

输入域的外观使用之前点线状横线(dot.png)取代常用的空心矩形,google Sitemaps网站地图相关知识,高和宽使用指定的值,Google Analytics(分析)能为网站带来什么。图片中的空白使得输入和文本区域的元素可以扩展任意大小。从Google网络字体页面找到Shadows Into Light,获取代码放在CSS样式当中,它可以讲输入文本转换成手写风格,然后调剂边距,使输入文本的底部与点状线在统一直线。

用Photoshop笔刷在信纸上绘制一个与传统手写书信风格有关的邮戳作为发送按钮。

在信纸的下面图层绘制一个玄色矩形。这是用来实现信纸的卷曲投影后果的。

 

表单域的字体样式采用手写字体,给大家一种传统的纸笔书信的风格。我们会在CSS代码中使用Google字体(Google Fonts)来实现,因此,当初要在文本中粘贴一些占位符。

用Photoshop制作素材图片

 ,Google Analytics 网站点击分布图;

Tag:接洽人   网页   制作   实例   网页制造    

首先为页面创建整体格局。全新的HTML5type=“email”属性能够放在第二个表单域,但除此之外,其它的语法仍是基础的HTML语言。确保每个输入区域的标签(label)与其ID绝对应。

--> [网站建设之]HTML+CSS网页制作实例:制作联系人网页表单

 

 

翻开Adobe Illustrator创建点状线效果。调节Illustrator中描边工具(Stroke Tool)的虚线(Dash)和圆端(Round cap)值,可以很便利地创建一系列的轮回点。

 

破洛洛文章简介:在本文中,咱们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技巧来创立信纸的外观,Google Adsense提高收入核心技巧揭秘,而后使用CSS的@font-face属性将数码文字转换成手写风格。

James Seymour-Lock在Twitter上倡议,文本区域应当依据用户输入的文本主动扩大,这样可以暗藏丑恶的转动条。

 

确保白色空缺区域也被包括在点状图片当中,当图片反复时,仍然还能保持间距和线高。(译者注:作者制作了单一的点状图,在后文中链入CSS样式表中,多个点状图排成一排就会构成图中所示的输入区域)

为矩形利用高斯含混(Gaussian Blur),使用CMD+T(译者注:苹果电脑的键盘才有CMD键,其它键盘可使用Ctrl+T)对图像进行自在变换,鼠标右击抉择扭曲(Distort)隐蔽矩形底部的角。

 

CSS样式

 

至此手写信纸作风的联系人表单终于功败垂成了。蓝色现状背景图片和卷曲投影的组合浮现出了实在纸张的效果,而点状线跟手写字体款式则再现了事实中填写印制表格的真实效果。

最后,我们进行发送按钮的CSS样式设计。目前,输入元素采取的是通用的CSS输出申明,font-family 中文字体的英文名称小结,因而一些属性须要还原。否则主图片会被作为背景图片,全部元素会被移动到带有边距的位置。

 

PSD做好之后,导出图片,留待HTML/CSS布局中使用。接下来绘制一个选区,创建重复的背景纹理和图案样本。

HTML结构

在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格,float闭合(清除浮动)和CSS HACK。盼望本教程对你有所辅助。

下降投影(shadow)的不透明度(opacity)实现信纸的卷曲效果。

将制作好的点状线粘贴在Photoshop的文档中,并与信纸的蓝色基线网格重合。

按住ALT键,Firefox 将支持 css calc() 属性,同时按住鼠标左键进行复制,然后按住Shift键,挪动复制4次,这样的信纸的纹理就做好了。

终极效果

我们创建的表单使用了线条纹理作为背景,投影的奇妙使用使得纸张破体感强,让人印象深入。标题和表单区域的内容仍旧使用数码文字,然而,我们用点状线代替常用的矩形表单区域,这些地位的文字选用草书字体,给大家出现出手写的书信风格。

 

这个很酷的功效在jQuery插件的赞助下容易就能实现。这款名为jQuery.fn.autoResize的插件所供给的效果恰是我们所需要的。把脚本文件添加在HTML文件的投标,启用即可。

 

破洛洛文章简介:在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格。

接下来,为数码文字进行样式设计。body的声明中已经使用了字体(Helvetica字体)和色彩的使用。为配合Photoshop中的图片设计,剩下的工作就是进行字体的大小设置,和字母间距调节。为保障所有元素与蓝色基准线排在同始终线,调整顶部下方的边距,em和strong的区别,labels使用指定的宽度值。这样,他们会在溢出时向右对齐,DreamWeaver中编写CSS的一些习惯建议

在画布中心绘制一个白色矩形,在上面画一条1像素的程度线,并用浅蓝色填充,作为信纸的背景纹理。

 

 

创建一个新的HTML文档,输入HTML5页面的文档类型(Doctype),页面标题,链接到CSS样式表以及存储表单的容器div层等根本构造。

在开端写代码之前,使用Photoshop来创作后面所需的素材图片。首先为背景增加杂色,数目设为:2%,取舍随机和单色。

 


(责任编辑:网站建设)
HTML+CSS网页制作实例 制作联系人网页表单相关文章
上一篇:Google谷歌Logo的CSS前景图片合并技术 下一篇:HTML5+CSS3 实现未来的网页设计
回到顶部