有哪些信誉好的足球投注网站- 1、本文档共10页，可阅读全部内容。
- 2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
注：该效果可以在Safari,Chrome,Firefox和Opera在看到效果，IE上由于对HTML5的支持不完全，所以看不出效果。
第一步：创建基本HTML和正方形
首先添加基本的HTML结构以及构建基本的正方形，代码如下：
XML/HTMLCode复制内容到剪贴板
ul??
lia?href=”#”??
h2Dudu：/h2??
p最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!/p??
/a/li??
lia?href=”#”??
h2汤姆大叔：/h2??
pTeam的一个成员去了Microsoft做SDE3，又得hire?new?member了/p??
/a/li??
lia?href=”#”??
h2技术弟弟：/h2??
pO2DS和我翻译的书是一样，我一定要比他翻得快,?晚上加班翻,fast!?fast!?fast!/p??
/a/li??
lia?href=”#”??
h2Artech：/h2??
pWCF的帖子真是少，看来我得多发点帖子让大家学习呢/p??
/a/li??
lia?href=”#”??
h2吉日嘎拉：/h2??
p将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情/p??
/a/li??
lia?href=”#”??
h2某武林高手：/h2??
p低于25000块的面试再也不去了，它grandma的/p??
/a/li??
/ul??
每个note都加一个href连接，主要是为了支持键盘访问，CSS代码如下：
查看原始代码
?
CSSCode复制内容到剪贴板
*{??
margin:0;??
padding:0;??
}??
body{??
font-family:arial,sans-serif;??
font-size:100%;??
margin:3em;??
background:#666??;??
color:#fff??;??
}??
h2,p{??
font-size:100%;??
font-weight:normal;??
}??
ul,li{??
list-style:none;??
}??
ul{??
overflow:hidden;??
padding:3em;??
}??
ul?li?a{??
text-decoration:none;??
color:#000??;??
background:#ffc??;??
display:block;??
height:10em;??
width:10em;??
padding:1em;??
}??
ul?li{??
margin:1em;??
float:left;??
}??
效果如下：
?
第二步：阴影和手写草体字
这一步，是我们要实现正方形的阴影效果，并且将字体改为草体(仅限英文)，由于google提供了FontAPI的支持，所以我们可以直接使用了，首先添加对GoogleAPI的调用：
查看原始代码
XML/HTMLCode复制内容到剪贴板
link?href=”/css?family=Reenie+Beanie:regular”?rel=”stylesheet”?type=”text/css”??
然后设置引用这个字体：
查看原始代码
XML/HTMLCode复制内容到剪贴板
ul?li?h2??
{??
font-size:?140%;??
font-weight:?bold;??
padding-bottom:?10px;??
}??
ul?li?p??
{??
font-family:?“Reenie?Beanie”?,arial,sans-serif,微软雅黑;??
font-size:?110%;??
}??
关于阴影，由于各个\o浏览器浏览器还都不完全支持，所以需要分别处理，代码如下：
查看原始代码
XML/HTMLCode复制内容到剪贴板
ul?li?a??
{??
text-decoration:?none;??
color:?#000??;??
background:?#ffc??;??
display:?block;??
height:?10em;??
width:?10em;??
padding:?1em;?/*?Firefox?*/??
-moz-box-shadow:?5px?5px?7px?rgba(33,33,33,1)??;?/*?Safari+Chrome?*/??
-webkit-box-shadow:?5px?5px?7px?rgba(33,33,33,.7)??;?/*?Opera?*/??
box-shadow:?5px?5px?7px?rgba(33,33,33,.7)??;?
文档评论（0）