注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

友情链接html代码  

2013-03-24 17:15:53|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图:(上下各放一个占位方框)
友情链接html代码 - 盛世广告 - 盛世广告
 


完整代码:(打开记事本,复制粘贴后另存为XX.html,双击打开即可查看)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>友情链接html代码</title>

<style>
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p {
    margin: 0;
    padding: 0;
}

.links-box {
font: 12px/1.5 宋体,Arial,sans-serif;
color: #616161;
    line-height: 39px;
background: #333333;
TEXT-ALIGN: center;
margin-top:10px;
}

.links-box .text, .links-box a, .links-box a:visited {  color: #DDDDDD;}
.links-box .text, .links-box a {    padding: 0 5px;}
.links-box a:hover{ color:#ba2636; text-decoration:none;}
.links-box .text{ font-weight:bold}

.links {
    height: 39px;
    margin:0 auto;
display:inline;
}




.wjl{/*这是占位符,使用时请删除*/
height:100px; 
border:#f00 solid 1px;  
margin:10px 0; 
background:rgba(200,200,50,0.4);
}

</style>


</head>
<body>
<div class=wjl></div>






<div class="links-box">
<div class="links">
     <span class="text">
<span class="en-code" style="font-family: arial;font-size: 14px;">@</span>
友情链接:</span>
 
<a target="_new" href="http://www.fda.gov/">FDA</a>|
<a target="_new" href="http://www.sda.gov.cn/">SFDA</a>|
<a target="_new" href="http://www.life.tsinghua.edu.cn/">清华生科院</a>|
<a target="_new" href="http://www.bio.pku.edu.cn/">北大生科院</a>|
<a target="_new" href="http://www.bioon.com/">生物谷</a>|
<a target="_new" href="http://www.google.com.hk/">Google</a>|
<a target="_new" href="http://tigomall.blog.163.com/blog/static/21277807920132411377365/">核酸&蛋白序列分析</a>|
<a target="_new" href="http://www.clfangzhi.com/">长联纺织</a>|

<a target="_new" href="http://emarketing.biz.163.com/">广告服务</a>|
<a target="_new" href="http://www.cnzz.com/">站长统计</a>|
<a target="_new" href="http://t.163.com/zt/feedback">意见反馈</a>|
<a target="_new" href="http://www.bjjubao.org/index.htm">不良信息举报</a>
</div>
</div>


<div class=wjl></div>
</body>
</html>




经验:

1) 要使一个div中的文字垂直居中,可在其样式表中设置  {  margin:0 auto;  /*也就是上下0,左右自动调整*/  }
    同时在其父标签样式表中设置{ TEXT-ALIGN: center; }。

2)firbug很给力!


---------------------------------------------
注释:以上代码摘抄自页面http://www.tigobiosciences.com/,仅供学习,版权归原作者所有。
参考:网易主页

  评论这张
 
阅读(4086)| 评论(4)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018