X
广告
首页 > 教程 > 关键词  > HTML代码最新资讯  > 正文

用符合标准的html代码编写专题的页头

2008-10-27 11:40 · 稿源:中国设计秀

以前拿到这种页头的时候,会在html里面插入图片,然后把有链接的地方用热区分割加链接,这样的写法不利于seo;

可以看到四个导航按钮的位置比较个性化,我用的方法是这张图作为背景,其他带链接的都绝对定位,在html代码里只看到精简的代码:

html代码:

以下为引用的内容:

<div id=”WishDream” class=”WishTop”>
<h1>爱有天意 under the love heaven</h1><!–主标题–>
<h2>在这里,写下你的个人梦想</h2><!–副标题–>
<ul>
<li class=”Index”><a href=”#” title=”许愿首页”>许愿首页</a></li>
<li class=”Love”><a href=”#” title=”爱情表白”>爱情表白</a></li>
<li class=”Dream”><a href=”#” title=”个人梦想”>个人梦想</a></li>
<li class=”Birth”><a href=”#” title=”生日祝福”>生日祝福</a></li>
</ul>
<div id=”SearchWish”>
<form>
<h3>搜搜看-找相同的愿望:</h3>
<input name=”" type=”text” />
<button><img src=”images/fenlei/button_go.gif” align=”absmiddle” /></button>
</form>
</div>
<a href=”#” target=”_blank” class=”WriteWish” title=”写纸条”>写纸条</a>
</div>

css部分:

以下为引用的内容:
.WishTop{
position:relative;
margin-top:-18px;
>margin-top:0;
height:220px;
}
#WishDream{background:url(../images/fenlei/top_dream.jpg) no-repeat;}/*把公用的WishTop和私有的WishDream分开,有助于扩展,下次需要新的许愿主题时,只要改私有的id就可以了*/
.WishTop h1,.WishTop h2{ text-indent:-100000px;}
.WishTop li a{
position:absolute;
display:block;
text-indent:-100000px;/*html代码里的文字都用这个方法让它们不显示出来*/
background:url(../images/fenlei/top_bgno.jpg);
}
.WishTop li.Index a{
top:25px;
left:15px;
width:70px;
height:35px;
}
.WishTop li.Love a{
top:50px;
left:135px;
width:99px;
height:46px;
}
.WishTop li.Dream a{
top:97px;
left:22px;
width:100px;
height:48px;
}
.WishTop li.Birth a{
top:150px;
left:163px;
width:100px;
height:48px;
}

/*搜索框css同理,略*/

这个写法不一定最好,有啥好建议都踩一下哦:)

  • 相关推荐
  • 大家在看
  • 亚马逊Twitch被黑客入侵 大量源代码和财务细节被公布

    据报道,整个Twitch的源代码、用户评论历史和详细的财务记录已被一名匿名黑客发布到网上。Twitch是亚马逊旗下的视频和游戏服务。现在,其服务的全部源代码,其移动、桌面和客户端应用程序,以及一个未发布的Steam商店竞争项目都被泄露了。据VGC报道,这些文件是由一个匿名黑客泄露给4chan的。这个人说,这次泄漏是为了"促进在线视频流媒体领域的更多破坏和竞争,[因为Twitch的]社区是一个令人作呕的有毒污水池"。VGC已经证实,黑客

  • 备受争议同时 《使命召唤》新反作弊系统Rocochet驱动代码外泄

    昨晚,动视宣布为《使命召唤》系列多款游戏启动全新的反作弊解决方案,该方案在《使命召唤:战区》上线之后随后在《使命召唤:先锋》上线。这套新反作弊方案名为“Rocochet”,是由动视自己设计的,重点是遏制猖獗的游戏作弊行为。“Ricochet”是一个将获得核心权限 (Kernel) 的反作弊软件,这意味着动视将能够访问电脑上所有的内容,以及后台的数据。不过动视承诺,支持 Ricochet 的内核级驱动程序只在《使命召唤:战地》游戏中

  • 开源趣闻:AMDGPU驱动调用了Linux内核中的Intel新伙伴分配器代码

    Phoronix 报道称:作为改善视频内存管理工作的一部分,负责开发 AMDGPU 内核图形驱动程序的工程师们,现正希望利用英特尔在 i915 更新中引入的伙伴系统内存分配器(Buddy Allocator)代码。据悉,后者是英特尔为其专用 GPU 提供设备本地内存支持工作的一部分,其中包含了内存区域和其它概念变动。Phoronix 指出,Buddy Allocator 用于将系统内存资源执行等分操作,直到满足内存请求的需求为止。而本文提到的新伙伴分配器代码,正是

  • 代码风起,平台化和生态化支撑厂商规模化发展

    摘要:在云计算和移动互联网的助推下,企业数字化转型加快,软件应用开发的需求激增,低代码平台应势崛起。从发展路径看,中国低代码平台厂商大致可分为两类:应用衍生类厂商和原生低代码厂商。低代码厂商最终发展趋势将是平台化和生态化,通过联合第三方开发商等合作伙伴,打造生态,为探索更具规模化能力的商业模式打下基础。当前,企业数字化转型不断深入,快速、敏捷地开发数字化应用成为了实现业务数字化的关键。不过,企业却

  • 代码平台三大关键能力,破局应用开发难题

    数字化时代的到来,用户需求不断飙升,专业开发人员缺口问题显著,方便高效的低代码开发技术革命悄然开始,并不断渗透到各行各业。企业的数字化转型涉及多个方面,而低代码开发平台强悍的关键技术能力,能够突破技术及实现手段上的瓶颈,减免决策者的后顾之忧,因此"低代码技术"作为解决企业数字化转型以及增强企业复原力的有力手段,得到越来越多的关注。早在 2019 年,全球知名研究机构Gartner 就对企业级低代码开发平

  • X-Live 讲师 Jenny:从工程师到架构师,我在融云的代码人生

    “直播的时候我应该看哪里?要不要跟观众互动?互动放在什么环节?”面对自己的第一场 X-Live 直播,Jenny 的问题连珠炮般发出。她是小红薯忠实用户,平常最爱看博主的穿搭直播,而自己当“主播”的首秀,是一场 “基于融云 IM+RTC 的国际化适配” 的纯技术分享。分享内容,完全基于她在融云六年的实践历炼展开。从传统到创新,从“提要求”到“做服务”2014 年,Jenny 的人生打开了一个新脚本。她结束了传统通信行业的职业旅程,?

  • 代码网站GitLab上市首日大涨35% 市值达149亿美元

    美国当地时间周四,代码共享平台GitLab在纳斯达克上市,上市首日大涨35%,市值达149亿美元。

  • 代码托管平台GitLab登陆纳斯达克 首日大涨近35%

    凤凰网科技讯 北京时间10月15日消息,GitLab当地时间星期四登陆纳斯达克股票交易所,发行价为77美元,估值约为110亿美元。常规交易中GitLab股价上涨26.89美元,涨幅为34.92%,报收于103.89美元,市值达到149亿美元。盘后交易中GitLab股价一度上涨1.96美元,暂报105.85美元。GitLab创办于约10年前,一直在挑战GitHub。微软2018年斥资75亿美元收购了GitHub,此后,作为唯一的大型独立源代码托管平台,GitLab增长非常迅速。GitLab第二

  • 相机App代码揭示了Pixel 6智能机的诸多功能特性

    在宣传预热数月后,谷歌即将推出搭载定制 Tensor 芯片的 Pixel 6 和 Pixel 6 Pro 智能机。尽管有关该机的外形和部分规格已经揭晓,但 XDA-Developers 还是进一步分享了有关 相机硬件的一些细节。比如 Pixel 6 将采用前置 12MP 自拍摄像头,以及 50MP 的三星 GN1 主传感器 + 12MP 超广角镜头,而 Pixel 6 Pro 更是增加了一枚支持 4X 变焦的 48MP 潜望式镜头。功能方面,得益于定制芯片,Pixel 6 新机将能够结合软硬件优势来提升图像

  • 得帆信息完成A轮融资,构建“低代码+AI”PaaS平台数字化新浪潮

    近日,得帆信息正式对外宣布完成A轮数千万人民币融资。本轮融资由百度风投领投,微村智科(由SaaS行业龙头微盟集团联合业内知名投资机构一村资本共同出资设立)跟投。华兴Alpha任此次融资的独家财务顾问。本轮融资将用于产品和技术的研发创新,布局全新营销体系,加速建立完善的生态合作圈层,深化核心行业解决方案,为更多企业快速实现数字化转型升级。得帆信息定位于低代码PaaS平台提供商,专注于企业级软件高生产力PaaS领域,致

这篇文章对你有价值吗?

  • 热门标签