实战之杂七杂八

百度动态获得地图

http://api.map.baidu.com/lbsapi/creatmap/index.html

Search语句乱码转码问题

searchcond=WebTools.converStr(searchcond);

request.getSession().setAttribute("searchcond",searchcond);

搜索输入框提示字点击消失

<input type=”text” name=”keyword” class=”keyword”οnfοcus="this.value=(this.value=='请输入关键词')?'':this.value"οnblur="this.value=(this.value=='')?'请输入关键词':this.value" value="请输入关键词">

消除浮动

<div style="clear: both;"></div>这个的意思是，消除浮动，之后的html代码不会受到之前的float的影响了。

$('红').mouseenter(function(){xxx}).mouseleave(function(){xxx})

超链接A标签

a  标签对是一个网站的一条信息链接定义的，

a:link {}     /* 未访问的链接 */
a:visited {}  /* 已访问的链接 */
a:hover {}    /* 当有鼠标悬停在链接上 */
a:active {}   /* 被选择的链接*/

浏览器兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge">加在所有的页面，使IE也兼容

<meta name="renderer"content="webkit">  360浏览器兼容

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

#example:before {

content: "#";

color: red;

}

#example:after {

content: "$";

color: red;

}

这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下:

#Here is the example content$

需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。

#example:before {

content:"";

display: block;

width: 100px;

height: 100px;

}

伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

除了插入文字内容，还可以指定其他内容：

p:before {

content: url('img.jpg');

}

a:after {

content: attr(href);

}

attr()函数会返回指定元素对应属性的值。

最后，奉上最惦记的浏览器支持情况

Ÿ  Chrome 2+,

Ÿ  Firefox 3.5+ (3.0 had partialsupport),

Ÿ  Safari 1.3+,

Ÿ  Opera 9.2+,

Ÿ  IE8+ (with some minor bugs),

Ÿ  Pretty much all mobilebrowsers.

放在伪类元素里面的内容一般都只是装饰性的，所以即便是IE6/7不支持也应该能降级到正常显示主体内容。

 

:before和:after的一些惊人用法

>. clearfix hack

如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS，所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现：(viaNicolasGallagher)

/* For modern browsers */

.clearfix:before,

.clearfix:after {

   content:"";

   display:table;

}

.clearfix:after {

   clear:both;

}

/* For IE 6/7 (trigger hasLayout) */

.clearfix {

   zoom:1;

}

>. CSS实现的八卦图案

#yin-yang {

   width: 96px;

   height: 48px;

   background: #eee;

   border-color: red;

   border-style: solid;

   border-width: 2px 2px 50px 2px;

   border-radius: 100%;

   position: relative;

}

#yin-yang:before {

    content: "";

   position: absolute;

   top: 50%;

   left: 0;

   background: #eee;

   border: 18px solid red;

   border-radius: 100%;

   width: 12px;

   height: 12px;

}

#yin-yang:after {

   content: "";

   position: absolute;

   top: 50%;

   left: 50%;

   background: red;

   border: 18px solid #eee;

   border-radius:100%;

   width: 12px;

   height: 12px;

}

前台页面转化为动态效果

先在jsp页面添加头文件

<%@pagelanguage="java"contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>

<%@taglibprefix="s"uri="/struts-tags"%>

<%@tagliburi="http://www.extremecomponents.org"prefix="ec"%>

<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>

<%@tagliburi="http://java.sun.com/jsp/jstl/fmt"prefix="fmt"%>

然后导入你所需要的数据

<s:actionname="portal_index"namespace="/app/portalcontent"id="maindata"executeResult="false"></s:action>

在正文部分这样动态调用后台的数据

<s:iteratorvalue="%{#maindata.session.societylist }"id="b"status="status">

    <li><ahref='work-detail.action?id=<s:propertyvalue="id"/>'><s:propertyvalue="title"/><divclass="m-date">[<s:propertyvalue="title"/>]</div></a></li>

</s:iterator>

循环输出固定的几个数据

<ul class="index">   <!-- 输出前5个数据 -->

<s:iterator value="%{#hydhdata.datalist}"id="b" status="status">

<s:if test="%{#status.index<5}">

<li>

<a href="member-dh-detail.action?id=<s:propertyvalue="id"/>">

<s:property value="companyName"/>

</a>

</li>

</s:if>

</s:iterator>

</ul>

<ul class="index"><!-- 输出6-10这5个数据 -->

<s:if test="%{#hydhdata.datalist.size>=5}">

<s:iterator value="%{#hydhdata.datalist}"id="b" status="status">

<s:if test="%{#status.index>=5 &&#status.index<10}">

<li>

<a href="member-dh-detail.action?id=<s:propertyvalue="id"/>">

<s:property value="companyName"/>

</a>

</li>

</s:if>

</s:iterator>

</s:if>

</ul>

天气预报显示

<iframe src="http://cache.xixik.com.cn/1/wuxi/"width="330" height="35" frameborder="0"marginwidth="0" marginheight="0"scrolling="no"></iframe>

如果想换城市，直接把wuxi换了就行了

http://cache.xixik.com.cn/1/wuxi/

http://tianqi.xixik.com/code/wuxi/

http://news.sina.com.cn/iframe/weather/320201.html

文档格式转换

先在tomcat里面将start.bat编辑修改一下D:\workspace\shetuan365\war\WEB-INF\classes

HTML5上下标

下标_0.65    上标^0.65

返回顶部

οnclick="javascript:document.documentElement.scrollTop= document.body.scrollTop =0;"

鼠标触碰图片切换变化

<img src="img/ico_top1.png" alt="返回顶部"onMouseOver="old=this.src;this.src='img/ico_top.png';"onMouseOut="this.src=old;">

根据域名标题动态化

<s:actionname="portal_getPortalInfo"namespace="/app/portalcontent"id="maindata"executeResult="false"></s:action>

<metaname="keywords"content='<s:propertyvalue="#maindata.portalmap.meta"/>社团管理'/>

<metaname="description"content='<s:propertyvalue="#maindata.portalmap.companyscript"/>社团管理'/>

<title><s:propertyvalue="#maindata.portalmap.titlename"/></title>

<s:propertyvalue="#maindata.portalmap.titlename"/>

<s:propertyvalue="#portaldata.portalmap.titlename"/>

去除js的validate验证：

最近我的Eclipse一直经常效验javascript我已经在builder和preference中取消了javascript validate可还是一直在不停的效验，我疯了校验了一个多小时还是在验。我只能在项目的.project文件中：

去掉.project文件中的以下部分，项目Build终于回复正常了。

<buildCommand>

    <name>org.eclipse.wst.jsdt.core.javascriptValidator</name>

    <arguments></arguments>

< /buildCommand>

< nature>org.eclipse.wst.jsdt.core.jsNature</nature>

保存然后重启Eclipse，哇。。整个世界清静了。