我自己写了个简单的模板是这样的
<!DOCTYPE html> <html> <head> <style> div { width:230px; height:230px; margin:10px; /* div间距 */ text-align:center; /*文字水平居中*/ vertical-align: middle; line-height:230px; /*line-height must be equal to height 文字垂直居中，与上一行配合与整体高度配合，垂直居中*/ float:left; /*div水平分布排列、浮动靠左排列 */ } div:hover/*鼠标指针响应事件*/ { animation:myfirst 5s; /* 动画开启、时间为5秒 */ -webkit-animation:myfirst 5s; /* Safari 和 Chrome */ } @-webkit-keyframes myfirst /* Safari and Chrome *//*动画流程*/ { from {background:red; -webkit-transform: rotateY(180deg);} /*红色、围绕y轴旋转180度 */ to {background:yellow; -webkit-transform: rotateY(360deg);} } </style> </head> <body> <div style="background-color:#FF8F59;onclick="window.open"> <a href="http://www.baidu.com" target="_blank">双重定义打开超链接，为什么？ </a> </div> <div style="background-color:#6FB7B7;onclick="window.open('www.baidu.com')"> <a href="http://www.baidu.com" target="_blank">百度</a> </div> <div style="background-color:#8600FF;onclick="window.open"> <a href="http://www.baidu.com" target="_blank">百度</a> </div> <div style="background-color:#FFFF93 ;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> <div style="background-color:#FFD2D2;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> <div style="background-color:#E0E0E0;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> <div style="background-color:#FAF4FF;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> <div style="background-color:#E8E8D0;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> <div style="background-color:#EBD3E8;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> <div style="background-color:#CEFFCE;onclick="window.open"> <p><a href="http://v.youku.com/">初级教程</p> </div> </body> </html>