看看谷哥是如何做到的？

2023-02-21 19:12:01JavaScript09

看看谷哥是如何做到的？,第1张

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Google</TITLE>

<SCRIPT>var _IG_time_epoch = (new Date()).getTime()</SCRIPT>

<STYLE>.modbox .el {

}

.modbox .csl {

DISPLAY: none

}

.modbox .es {

DISPLAY: none

}

.modbox_e .el {

DISPLAY: none

}

.modbox_e .csl {

}

.modbox .es {

}

.dm {

WIDTH: 1pxPOSITION: relativeHEIGHT: 1px

}

.fres {

OVERFLOW: hiddenWIDTH: expression(_gel("ffresults").offsetWidth+"px")

}

.panelo {

}

.panelc {

}

.mod {

}

.unmod {

}

FORM {

DISPLAY: inline

}

.c {

CLEAR: both

}

BODY {

FONT-FAMILY: arial,sans-serif

}

TD {

FONT-FAMILY: arial,sans-serif

}

A {

FONT-FAMILY: arial,sans-serif

}

P {

FONT-FAMILY: arial,sans-serif

}

.h {

FONT-FAMILY: arial,sans-serif

}

A:link {

COLOR: #0000cc

}

A:visited {

COLOR: #551a8b

}

A:active {

COLOR: #ff0000

}

A.ab {

COLOR: #0000cc

}

.q {

COLOR: #00c

}

A.q {

COLOR: #00c

}

H2.modtitle {

FONT-WEIGHT: normalFONT-SIZE: 100%PADDING-BOTTOM: 0pxMARGIN: 0emWIDTH: 100%PADDING-TOP: 0px

}

.modbox {

MARGIN-BOTTOM: 20pxBACKGROUND-COLOR: white

}

.modbox_e {

MARGIN-BOTTOM: 20pxBACKGROUND-COLOR: white

}

.tlc {

TABLE-LAYOUT: fixedCURSOR: hand

}

.tlc COL {

FONT-SIZE: 82%

}

.tlc TD {

FONT-SIZE: 82%empty-cells: show

}

.tls {

OVERFLOW: hiddenWHITE-SPACE: nowrap

}

.tls A {

COLOR: blackTEXT-DECORATION: none

}

.tld {

WIDTH: 8exWHITE-SPACE: nowrapTEXT-ALIGN: right

}

.tlq {

OVERFLOW: hiddenWHITE-SPACE: nowrap

}

#t_1 {

TABLE-LAYOUT: fixed

}

#c_1 {

VERTICAL-ALIGN: topWIDTH: 32%

}

#c_2 {

VERTICAL-ALIGN: topWIDTH: 32%

}

#c_3 {

VERTICAL-ALIGN: topWIDTH: 32%

}

.mhdr {

PADDING-RIGHT: 0pxBORDER-TOP: #97acd4 1px solidPADDING-LEFT: 0pxFONT-SIZE: 82%PADDING-BOTTOM: 0pxMARGIN: 0pxWIDTH: 100%PADDING-TOP: 0px

}

.mehdr {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 82%PADDING-BOTTOM: 0pxMARGIN: 0pxWIDTH: 100%PADDING-TOP: 0px

}

.mmhdr {

PADDING-RIGHT: 0pxBORDER-TOP: #3366cc 1px solidPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0pxWIDTH: 167pxPADDING-TOP: 0px

}

.mttl {

PADDING-RIGHT: 5pxPADDING-LEFT: 2pxFONT-WEIGHT: boldFONT-SIZE: 122%WIDTH: 90%BACKGROUND-COLOR: #e5ecf9

}

.mmttl {

PADDING-LEFT: 2pxFONT-SIZE: 12pxWIDTH: 90%BACKGROUND-COLOR: #e5ecf9

}

.bbg {

BACKGROUND-COLOR: #e5ecf9

}

.mbbg {

WHITE-SPACE: nowrapBACKGROUND-COLOR: #e5ecf9

}

.mttli {

OVERFLOW: hiddenCOLOR: #3366ccHEIGHT: 1.2em

}

.medit {

PADDING-RIGHT: 2pxWIDTH: 10%PADDING-TOP: 2pxWHITE-SPACE: nowrapBACKGROUND-COLOR: #e5ecf9TEXT-ALIGN: right

}

.meditbox {

BACKGROUND-COLOR: #e5ecf9

}

.meditbox_inner {

PADDING-RIGHT: 5pxPADDING-LEFT: 5pxPADDING-BOTTOM: 5pxPADDING-TOP: 5px

}

.medit A {

COLOR: #97acd4TEXT-DECORATION: none

}

.medit A:hover {

COLOR: #3366cc

}

.mttlz {

PADDING-RIGHT: 2pxBACKGROUND-COLOR: #e5ecf9

}

.mttld {

PADDING-RIGHT: 2pxBACKGROUND-COLOR: #e5ecf9

}

.medit {

VERTICAL-ALIGN: top

}

.mttlz {

VERTICAL-ALIGN: top

}

.mttld {

VERTICAL-ALIGN: top

}

.box {

MARGIN-TOP: 3pxDISPLAY: blockBACKGROUND-IMAGE: url(/ig/images/x.gif)OVERFLOW: hiddenWIDTH: 12pxCURSOR: pointerBACKGROUND-REPEAT: no-repeatHEIGHT: 12px

}

.delbox {

BACKGROUND-IMAGE: url(/ig/images/x_blue.gif)

}

.minbox {

BACKGROUND-IMAGE: url(/ig/images/min_blue.gif)

}

.maxbox {

BACKGROUND-IMAGE: url(/ig/images/max_blue.gif)

}

A.delbox:hover {

BACKGROUND-IMAGE: url(/ig/images/x_blue_highlight.gif)

}

A.minbox:hover {

BACKGROUND-IMAGE: url(/ig/images/min_blue_highlight.gif)

}

A.maxbox:hover {

BACKGROUND-IMAGE: url(/ig/images/max_blue_highlight.gif)

}

.tabdel {

MARGIN-TOP: 1pxMARGIN-LEFT: 2px

}

.mmdel {

BORDER-RIGHT: 0pxBORDER-TOP: 0pxMARGIN-TOP: 2pxVERTICAL-ALIGN: topBORDER-LEFT: 0pxBORDER-BOTTOM: 0px

}

.maddm {

BORDER-RIGHT: 0pxBORDER-TOP: 0pxMARGIN-TOP: 2pxVERTICAL-ALIGN: topBORDER-LEFT: 0pxBORDER-BOTTOM: 0px

}

.mmc {

FONT-SIZE: 82%PADDING-BOTTOM: 1pxWIDTH: 100%PADDING-TOP: 1px

}

.mc {

FONT-SIZE: 82%PADDING-BOTTOM: 4pxWIDTH: 100%PADDING-TOP: 4px

}

.mpromo {

BORDER-RIGHT: #3366cc 1px solidPADDING-RIGHT: 5pxBORDER-TOP: #3366cc 1px solidPADDING-LEFT: 5pxMARGIN-BOTTOM: 20pxPADDING-BOTTOM: 5pxVERTICAL-ALIGN: middleBORDER-LEFT: #3366cc 1px solidPADDING-TOP: 5pxBORDER-BOTTOM: #3366cc 1px solidBACKGROUND-COLOR: #e5ecf9TEXT-ALIGN: center

}

.mpromo_title {

PADDING-BOTTOM: 3px

}

.apromo {

BORDER-RIGHT: #3366cc 1px solidPADDING-RIGHT: 5pxBORDER-TOP: #3366cc 1px solidPADDING-LEFT: 5pxFONT-SIZE: 82%PADDING-BOTTOM: 2pxBORDER-LEFT: #3366cc 1px solidCURSOR: pointerCOLOR: #0000ccPADDING-TOP: 2pxBORDER-BOTTOM: #3366cc 1px solidWHITE-SPACE: nowrapBACKGROUND-COLOR: #e5ecf9TEXT-DECORATION: underline

}

.cpromo {

}

.apromo {

FLOAT: left

}

.cpromo {

FLOAT: rightMARGIN: -1px -2px 0px 0px

}

#setupbox {

BORDER-RIGHT: #3366cc 1px solidBORDER-TOP: #3366cc 1px solidMARGIN-BOTTOM: 10pxBORDER-LEFT: #3366cc 1px solidWIDTH: 95%BORDER-BOTTOM: #3366cc 1px solid

}

#demobox {

BORDER-RIGHT: #3366cc 1px solidBORDER-TOP: #3366cc 1px solidMARGIN-BOTTOM: 10pxBORDER-LEFT: #3366cc 1px solidWIDTH: 95%BORDER-BOTTOM: #3366cc 1px solid

}

.bt {

FONT-WEIGHT: boldFONT-SIZE: 16pxMARGIN-BOTTOM: 5pxCOLOR: #3366cc

}

.setuptd {

PADDING-RIGHT: 25pxPADDING-LEFT: 25pxFONT-SIZE: smaller

}

.mg {

FONT-SIZE: smallerCOLOR: #676767

}

.mg A {

COLOR: #7777cc

}

.promobox {

BORDER-RIGHT: #3366cc 1px solidPADDING-RIGHT: 5pxBORDER-TOP: #3366cc 1px solidPADDING-LEFT: 5pxFONT-SIZE: smallerMARGIN-BOTTOM: 20pxPADDING-BOTTOM: 5pxVERTICAL-ALIGN: middleBORDER-LEFT: #3366cc 1px solidPADDING-TOP: 5pxBORDER-BOTTOM: #3366cc 1px solid

}

#ehdr_table {

PADDING-LEFT: 5pxPADDING-TOP: 8px

}

#msgs {

MARGIN-BOTTOM: 8pxBACKGROUND-COLOR: #ffff99

}

#undel_msg {

PADDING-RIGHT: 10pxPADDING-LEFT: 2pxPADDING-BOTTOM: 10pxPADDING-TOP: 2px

}

#undel_msg_del A {

FONT-WEIGHT: boldTEXT-DECORATION: none

}

#undel_msg TABLE {

BACKGROUND-COLOR: #ffff99

}

#no_script {

PADDING-RIGHT: 2pxPADDING-LEFT: 2pxPADDING-BOTTOM: 2pxPADDING-TOP: 2pxBACKGROUND-COLOR: #fad163

}

#tip {

FONT-SIZE: smallerPADDING-BOTTOM: 7pxCOLOR: #676767PADDING-TOP: 10pxTEXT-ALIGN: center

}

#regular_logo {

BORDER-RIGHT: 0pxBORDER-TOP: 0pxMARGIN-TOP: 10pxBORDER-LEFT: 0pxBORDER-BOTTOM: 0px

}

#featuretabs {

PADDING-RIGHT: 150pxZ-INDEX: 1000POSITION: relative

}

.tabspacer {

WIDTH: 4pxBORDER-BOTTOM: #97acd4 1px solid

}

.tab {

PADDING-RIGHT: 15pxPADDING-LEFT: 15pxFONT-SIZE: 82%PADDING-BOTTOM: 0pxCURSOR: handCOLOR: #676767PADDING-TOP: 0pxTEXT-ALIGN: centerTEXT-DECORATION: noneempty-cells: show

}

.selectedtab {

BORDER-RIGHT: #97acd4 1px solidBORDER-TOP: #97acd4 1px solidFONT-WEIGHT: boldBORDER-LEFT: #97acd4 1px solidCOLOR: #3366ccBORDER-BOTTOM: 0px

}

.unselectedtab {

BORDER-RIGHT: #97acd4 1px solidBORDER-TOP: #97acd4 1px solidBORDER-LEFT: #97acd4 1px solidCOLOR: #000000BORDER-BOTTOM: #97acd4 1px solidBACKGROUND-COLOR: #e5ecf9

}

.tab_hover {

BORDER-LEFT-COLOR: #3366ccCOLOR: #ffffffBORDER-TOP-COLOR: #3366ccBACKGROUND-COLOR: #3366ccBORDER-RIGHT-COLOR: #3366cc

}

.edittab {

PADDING-RIGHT: 2pxPADDING-LEFT: 2px

}

.tablink {

PADDING-RIGHT: 2pxPADDING-LEFT: 7pxFONT-SIZE: 83%PADDING-BOTTOM: 2pxPADDING-TOP: 2pxBORDER-BOTTOM: #97acd4 1px solid

}

.addatab {

COLOR: #7777ccTEXT-ALIGN: left

}

.addatab A {

COLOR: #7777cc

}

.tabdirectorylink {

FONT-WEIGHT: boldTEXT-ALIGN: right

}

.tabdirectorylinkbottom {

PADDING-RIGHT: 2pxPADDING-LEFT: 7pxFONT-WEIGHT: boldFONT-SIZE: 83%PADDING-BOTTOM: 2pxPADDING-TOP: 2pxTEXT-ALIGN: right

}

.tabtitle {

FONT-WEIGHT: boldCOLOR: #3366cc

}

#footer_separator {

BORDER-TOP: #97acd4 1px solid

}

#footer_promos {

PADDING-TOP: 10px

}

#addcontent_button {

PADDING-RIGHT: 10pxPADDING-LEFT: 10pxFONT-WEIGHT: boldFONT-SIZE: 16pxPADDING-BOTTOM: 2pxCOLOR: #ffffffPADDING-TOP: 2pxBACKGROUND-COLOR: #3366cc

}

#tabs {

PADDING-BOTTOM: 9px

}

.hand {

CURSOR: hand

}

UNKNOWN {

BI_NEWLINE:

}

</STYLE>

<SCRIPT><!--

var domain = document.location.hostnamevar google_pos = domain.indexOf('.google.')if (google_pos >-1) {domain = domain.substring(google_pos)document.cookie = "TZ=" + (new Date()).getTimezoneOffset()+ 'path=/domain=' + domain}var igdnd=document.cookieif (igdnd.indexOf("IGDND=1")==-1) {if(igdnd.length>0) {window.location.reload()}} else {document.cookie="IGDND=0expires=Thu, 01-Jan-1970 00:00:00 GMT"}_et="0hZY-yo5"_source=""_uli=false_pnlo=false_mpnlo=false_pl=false_mod=false_pid=""_cbp=true_upc()// -->

</SCRIPT>

<SCRIPT><!--

function save_chkbox_value(hidden_elem_name, checked) {var hidden_elem = document.getElementById(hidden_elem_name)hidden_elem.value = checked ? "1" : "0"}function RemoteModule(spec_url, id, render_inline, base_iframe_url,caching_disabled) {this.spec_url = spec_urlthis.id = idthis.render_inline = render_inlinethis.base_iframe_url = base_iframe_urlthis.caching_disabled = caching_disabledthis.old_width = 0this.wants_scaling = false this.is_inlined = function() { return this.base_iframe_url == ""}}var remote_modules = []_IG_RegisterOnloadHandler(function() {for (var i=0i<remote_modules.lengthi++){var rm=remote_modules[i]var el=_gel("remote_iframe_"+rm.id)if(el){el.src=rm.base_iframe_url}}})function ifpc_resizeIframe(iframe_id, height) {var el = document.getElementById(iframe_id)if (el) {el.style.height = height + "px"}}_IFPC.registerService('resize_iframe', ifpc_resizeIframe)function ifpc_setPref(iframe_id, key, value) {var module_id = iframe_id.split("_")[2]var prefs = new _IG_Prefs(module_id)prefs.set(key, value)}_IFPC.registerService('set_pref', ifpc_setPref)// -->

</SCRIPT>

<TBODY>

<TR>

<DIV style="PADDING-BOTTOM: 4px" align=right noWrap width="100%"><FONT

size=-1><A

href="http://www.google.com/url?sa=p&pref=ig&pval=1&q=/webhp">常规主页</A> | <A

href="https://www.google.com/accounts/ServiceLogin?service=ig&passive=true&continue=http://www.google.com/ig%3Fhl%3Dzh-CN&followup=http://www.google.com/ig%3Fhl%3Dzh-CN&cd=US&hl=zh-CN&nui=1&ltmpl=default">登录</A></FONT></DIV></DIV></TD></TR></TBODY></TABLE>

<SCRIPT><!--

function qs(el) {if (window.RegExp &&window.encodeURIComponent) {var qe=encodeURIComponent(document.f.q.value)if (el.href.indexOf("q=")!=-1) {el.href=el.href.replace(new RegExp("q=[^&$]*"),"q="+qe)} else {el.href+="&q="+qe}}return 1}

// -->

</SCRIPT>

<TBODY>

<TR>

<DIV id=logo><IMG id=regular_logo height=55 alt=Google

src="Google.files/logo_sm.gif" width=150></DIV></TD>

<TBODY>

<TR>

<SCRIPT><!--

function qs(el) {if (window.RegExp &&window.encodeURIComponent) {var ue=el.hrefvar qe=encodeURIComponent(document.f.q.value)if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe)}else{el.href=ue+"&q="+qe}}return 1}

// -->

</SCRIPT>

<TBODY>

<TR>

<TD noWrap><FONT size=-1><B>网页</B> <A

class=q onclick="return qs(this)"

href="http://www.google.com/imghp?hl=zh-CN&tab=wi">图片</A> <A

class=q onclick="return qs(this)"

href="http://news.google.com/nwshp?hl=zh-CN&tab=wn">资讯</A> <A

class=q onclick="return qs(this)"

href="http://groups.google.com/grphp?hl=zh-CN&tab=wg">论坛</A> <B><A

class=q

href="http://www.google.com/intl/zh-CN/options/">更多 »</A></B></FONT></TD></TR></TBODY></TABLE></DIV></TD></TR>

<TR>

<DIV id=sbox><INPUT id=hl type=hidden value=zh-CN name=hl><INPUT

id=q maxLength=2048 size=55 name=q></DIV>

<DIV id=as> <A

href="http://www.google.com/advanced_search?hl=zh-CN">高级搜索</A></DIV>

<DIV id=prefs> <A

href="http://www.google.com/preferences?hl=zh-CN">使用偏好</A></DIV>

<DIV id=lgt> <A

href="http://www.google.com/language_tools?hl=zh-CN">语言工具</A></DIV></FONT></TD></TR></TBODY></TABLE></TD>

<TR>

<TD align=middle colSpan=3><FONT size=-1><INPUT id=all type=radio CHECKED

value="" name=lr><LABEL for=all>搜索所有网页</LABEL><INPUT id=ch type=radio

value=lang_zh-CN|lang_zh-TW name=lr><LABEL for=ch>搜索所有中文网页</LABEL><INPUT

id=il type=radio value=lang_zh-CN name=lr><LABEL

for=il>搜索简体中文网页</LABEL></FONT></TD></TR></TBODY></TABLE>

<SCRIPT><!--

if (document.all) {_IG_AddEventHandler("focus",function() {_gel("q").focus()window.onfocus = null})} else {_gel("q").focus()}// -->

</SCRIPT>

</DIV>

<TBODY>

<TR>

<TD noWrap align=middle><FONT size=-1> <B><SPAN

id=undel_title></SPAN>部分已删除。<A

href="javascript:void(_undel())">取消</A></B> </FONT></TD>

<TD><A onclick="_gel('undel_msg').style.display='none'"

href="javascript:void(0)"><IMG alt="" src="Google.files/x3.gif"

border=0></A></TD></TR></TBODY></TABLE></DIV><NOSCRIPT>

<CENTER><BR><SPAN id=no_script>您需要启动JavaScript

才能使用本网页，</SPAN><BR></CENTER></NOSCRIPT>

<SCRIPT>_IG_time.stop("parse_header")</SCRIPT>

<DIV align=center>欢迎光临 Google 主页。 <A

href="javascript:_dlsetp('ss=2')">请将其个性化</A>。</DIV><BR>

<TBODY>

<TR>

<TBODY>

<TR>

<TD class=mttl id=m_1_h><A class=mttli id=m_1_url

href="http://book.sina.com.cn/booknews.html">读书新闻-文化新闻</A> </TD>

<TD class=medit id=m_1_e><A class=el

onclick="return _edit('1',null)" href="javascript:void(0)">编辑</A><A

class=csl onclick="return _cedit('1')"

href="javascript:void(0)">取消</A></TD>

<TD class=mttlz><A class="box minbox" id=m_1_zippy

onclick="this.blur()return _zm('1', '25')"

href="javascript:void(0)"></A></TD>

<TD class=mttld><A class="box delbox"

onclick="return _del('1',25,'url=http://rss.sina.com.cn/book/culture10.xml')"

href="javascript:void(0)"></A></TD></TR></TBODY></TABLE>

<TBODY>

<DIV style="WHITE-SPACE: nowrap">显示 <SELECT

onchange="_uhc('1','val',this.value)"><OPTION value=1>1<OPTION

value=2>2<OPTION value=3 selected>3<OPTION value=4>4<OPTION

value=5>5<OPTION value=6>6<OPTION value=7>7<OPTION

value=8>8<OPTION value=9>9</OPTION></SELECT>项 <INPUT class=submitbtn type=submit value=保存></DIV></DIV></FORM></TD></TR></TBODY></TABLE></H2>

<DIV class=mc><A

href="http://book.sina.com.cn/news/c/2006-10-11/1435205330.shtml">书商跟风炮制《黄金甲》

专家认为误导读者</A></DIV>

<DIV class=mc><A

href="http://book.sina.com.cn/news/c/2006-10-11/1428205329.shtml">《黄金甲》出版方回应质疑

称五代题材该热</A></DIV>

<DIV class=mc><A

href="http://book.sina.com.cn/news/c/2006-10-11/1226205328.shtml">散文诗学会群攻赵丽华：梨花诗与当街撒尿何异</A></DIV></DIV></DIV>

<TBODY>

<TR>

<TD class=mttl id=m_3_h><A class=mttli id=m_3_url

href="http://news.sina.com.cn/iframe/o/allnews/input/index.htm">新闻中心-新闻要闻</A> </TD>

<TD class=medit id=m_3_e><A class=el

onclick="return _edit('3',null)" href="javascript:void(0)">编辑</A><A

class=csl onclick="return _cedit('3')"

href="javascript:void(0)">取消</A></TD>

<TD class=mttlz><A class="box minbox" id=m_3_zippy

onclick="this.blur()return _zm('3', '25')"

href="javascript:void(0)"></A></TD>

<TD class=mttld><A class="box delbox"

onclick="return _del('3',25,'url=http://rss.sina.com.cn/news/marquee/ddt.xml')"

href="javascript:void(0)"></A></TD></TR></TBODY></TABLE>

<TBODY>

<DIV style="WHITE-SPACE: nowrap">显示 <SELECT

onchange="_uhc('3','val',this.value)"><OPTION value=1>1<OPTION

value=2>2<OPTION value=3>3<OPTION value=4>4<OPTION value=5

selected>5<OPTION value=6>6<OPTION value=7>7<OPTION

value=8>8<OPTION value=9>9</OPTION></SELECT>项 <INPUT class=submitbtn type=submit value=保存></DIV></DIV></FORM></TD></TR></TBODY></TABLE></H2>

<DIV class=mc><A

href="http://news.sina.com.cn/w/2006-11-08/174510446700s.shtml">巴基耶夫称颜色革命不会在吉尔吉斯重演</A></DIV>

<DIV class=mc><A

href="http://news.sina.com.cn/w/2006-11-08/165210446583s.shtml">以军炮击加沙

模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式。通过模态窗口，可以提高网站的可用性。正好项目的需要，有个客户想要模态弹出的窗体来提交网站的反馈，经过一番测试实现了，我使用jQuery fancybox插件来创建一个漂亮的模态窗体，提交表单的数据在服务器端实现Ajax调用。你可以在你的邮件里收到用户发送的反馈消息

html代码

header部分主要的JS文件如下引入jquery代码和fancybox代码

复制代码代码如下:

演示

首先，从官网下载最新的Fancybox，并解压缩。核心的HTML页面代码是非常简单的，这里有一个隐藏的DIV，当用户单击href链接时候，打开一个模态窗口。

复制代码代码如下:

Send us feedback from the modal window.

<a class="modalbox" href="#inline">有本事你点我</a></div>

<h2>发送消息给我们</h2>

<label for="msg">你想要对我们说</label>

CSS样式表

设置文本框的颜色，大小，获得焦点下的样式等等，使用:hover和:active 来显示状态。

复制代码代码如下:

.txt {

display: inline-block

color: #676767

width: 420px

font-family: Arial, Tahoma, sans-serif

margin-bottom: 10px

border: 1px dotted #ccc

padding: 5px 9px

font-size: 1.2em

line-height: 1.4em

}

.txtarea {

display: block

resize: none

color: #676767

font-family: Arial, Tahoma, sans-serif

margin-bottom: 10px

width: 500px

height: 150px

border: 1px dotted #ccc

padding: 5px 9px

font-size: 1.2em

line-height: 1.4em

}

.txt:focus,

.txtarea:focus {

border-style: solid

border-color: #bababa

color: #444

}

input.error,

textarea.error {

border-color: #973d3d

border-style: solid

background: #f0bebe

color: #a35959

}

input.error:focus,

textarea.error:focus {

border-color: #973d3d

color: #a35959

}

我定义了一个错误的css类，结合jquery用来检测用户输入的数据是否正确，输入错误数据会使字段文字，边框和背景变成深色。直到用户输入有效的数据字段颜色将恢复正常。

复制代码代码如下:

#send {

color: #dee5f0

display: block

cursor: pointer

padding: 5px 11px

font-size: 1.2em

border: solid 1px #224983

border-radius: 5px

background: #1e4c99

background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d))

background: -moz-linear-gradient(top, #2f52b7, #0e3a7d)

background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d)

background: -o-linear-gradient(top, #2f52b7, #0e3a7d)

background: -ms-linear-gradient(top, #2f52b7, #0e3a7d)

background: linear-gradient(top, #2f52b7, #0e3a7d)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d')

}

#send:hover {

background: #183d80

background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b))

background: -moz-linear-gradient(top, #284f9d, #0c2b6b)

background: -webkit-linear-gradient(top, #284f9d, #0c2b6b)

background: -o-linear-gradient(top, #284f9d, #0c2b6b)

background: -ms-linear-gradient(top, #284f9d, #0c2b6b)

background: linear-gradient(top, #284f9d, #0c2b6b)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b')

}

#send:active {

color: #8c9dc0

background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7))

background: -moz-linear-gradient(top, #0e387d, #2f55b7)

background: -webkit-linear-gradient(top, #0e387d, #2f55b7)

background: -o-linear-gradient(top, #0e387d, #2f55b7)

background: -ms-linear-gradient(top, #0e387d, #2f55b7)

background: linear-gradient(top, #0e387d, #2f55b7)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7')

}

CSS 按钮我使用 CSS3来创建线型渐变，代码如上

使用 Fancybox

页面加载元素完成之后，调用Fancybox默认代码

复制代码代码如下:

$(document).ready(function() {

$(".modalbox").fancybox()

$("#contact").submit(function() { return false})//禁用默认的窗体提交

代码的第二行禁用默认的联系人表单提交动作。为什么呢？因此这样我们可以处理自己的单击事件，并通过 Ajax 传递数据。在用户提交表单后，我们需要得到（电子邮件和消息）两个字段的当前值。我们还想要检查电子邮件地址是否有效和消息长度是否超过规定的长度值

复制代码代码如下:

$("#send").on("click", function(){

var emailval = $("#email").val()

var msgval = $("#msg").val()

var msglen = msgval.length

var mailvalid = validateEmail(emailval)

if(mailvalid == false) {

$("#email").addClass("error")

}

else if(mailvalid == true){

$("#email").removeClass("error")

}

if(msglen <4) {

$("#msg").addClass("error")

}

else if(msglen >= 4){

$("#msg").removeClass("error")

}

上面jquery代码使用一些逻辑语句。直到电子邮件有效和消息的长度超过 4 个字母，才会提交表单。

发送Ajax 请求通过上面的onclick事件，需要将表单数据发送到 PHP。，我们将在我们的收件箱中收到电子邮件。复制代码代码如下:

// 如果两个字段验证通过接下来发送消息

//点击发送按钮之后，按钮被替换成“发送中”这样的文字提示，目的是为了防止用户在点击提交，提示也更人性化

$("#send").replaceWith("<em>发送中...</em>")

$.ajax({

type: 'POST',

url: 'sendmessage.php',

data: $("#contact").serialize(),

success: function(data) {

if(data == "true") {

$("#contact").fadeOut("fast", function(){

$(this).before("<p><strong>提交成功! 您的留言已经发送, 谢谢 :)</strong></p>")

setTimeout("$.fancybox.close()", 1000)

})

}

})

}

})

这里使用serialize(),方法来序列化提交的ajax数据，使得生成标准的URL编码

服务器响应成功之后，隐藏弹出的窗体，并显示一条成功消息。我使用 setTimeout() 方法来关闭 fancybox ，这里我设置一秒钟后隐藏窗体。要执行此操作的 JS 代码是 $.fancybox.close()。

使用 PHP发送邮件 sendmessage.php 接受用户输入的变量。然后调用mail尝试发送它，发送成功返回"true"否则返回false

复制代码代码如下:

$sendto = "2495371937@qq.com"//定义邮件的接收者

$usermail = $_POST['email']//获取电子邮件

$content = nl2br($_POST['msg'])//获取消息

$subject = "你有新的消息"

$headers = "来自: " . strip_tags($usermail) . "\r\n"

$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"

$headers .= "MIME-Version: 1.0\r\aan"

$headers .= "Content-Type: text/htmlcharset=utf-8 \r\n"

$msg = ""

$msg .= "<h2 style="font-weight: boldborder-bottom: 1px dotted #ccc">你有新的消息</h2>\r\n"

$msg .= "<strong>来自:</strong>".$usermail."\r\n"

$msg .= "<strong>内容:</strong>".$content."\r\n"

$msg .= ""

if(@mail($sendto, $subject, $msg, $headers)) {

echo "true"

} else {

echo "false"

}

演示

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何用JS或CSS制作网站导航条

# 下一篇：CSS里的定位主要有几种方法？

推荐阅读

热门文章

最新发布

标签列表

看看谷哥是如何做到的？

给您推荐相同类型的内容：