网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

css固定顶部不随滚动条滚动

关注我吧
 2012/12/1 15:33:10 阅读次数:3801

 CSS div 层固定在网页顶部代码,固定在网页顶部的层,可以是活动的,即可以使用开关,很多微博上都有这个应用,是一个不错的用户体验。

实际上细心的朋友会发现,这个顶部的工具条实则是一个平铺的背景色,CSS起到固定背景的作用,也算是一种独特的实现方法。

本实例 兼容 Mozilla Opera Netscape Firefox IE6等主流浏览器

效果图如下:

css固定顶部不随滚动条滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position-固定用法。</title>
<style type="text/css">
body {margin:0; padding:0 10px 0 10px; border:0;height:100%; overflow:auto;}
.content{padding-top:70px;width:300px;margin:0 auto;line-height:30px;font-size:12px;}
#menu {right:0; top:0; width:100%;position:fixed;height:70px;line-height:70px;text-align:center; font-weight:bold; background:#000;color:#fff;}
* html #menu {position:absolute;right:16px;left:0;width:100%;}/*only for ie*/
</style>
</head>
<body>
<div id="menu">Mozilla Opera Netscape Firefox IE6 CSS</div>
<div class="content">
  <p>1看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</p>
    <p><a href="http://www.ok22.org/art_detail.aspx?id=485" title="如何在网页中嵌入自己想要的字体(实例下载)">如何在网页中嵌入自己想要的字体(实例下载)</a>2012-12-1 10:17:02</p>
    <a href="http://www.ok22.org/s.aspx?tag=%E5%AD%97%E4%BD%93">字体</a>\<a href="http://www.ok22.org/s.aspx?tag=%E7%BD%91%E9%A1%B5">网页</a>\<a href="http://www.ok22.org/s.aspx?tag=font">font</a><br />
	本文主要介绍如何在网页上使用自己想要而网页中没有的字体。文章底部有下载地址跟预览地址!字体使用是网页设计中不可或缺的一部分。网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:一、不可能大范围的使用该字体;二、图片内容相对使用文字不易修改;三、不利于网站SEO。网络上有一些使用sIFR技术、或javascript/fl...<a title="阅读全文" href="http://www.ok22.org/art_detail.aspx?id=485">未完,继续阅读→</a>
    <p>阅读(37)条评论(0)条</p>
    <p><a href="http://www.ok22.org/art_detail.aspx?id=484" title="IE6bug绝对定位及其解决办法">IE6bug绝对定位及其解决办法</a>2012-11-30 16:52:41</p>
    <a href="http://www.ok22.org/s.aspx?tag=ie">ie</a><br />
    <a href="http://www.ok22.org/s.aspx?tag=bug">bug</a><br />
    <a href="http://www.ok22.org/s.aspx?tag=%E5%AE%9A%E4%BD%8D">定位</a><br />
    IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:字体。文章底部有下载地址跟预览地址!字体使用是网页设计中不可或缺的一部分。网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做...<a title="阅读全文" href="http://www.ok22.org/art_detail.aspx?id=484">未完,继续阅读→</a>
	<p>看右上角的内容,不论浏览器怎么滚动,到底了!</p>
</div>
</body>
</html>

好了,还有什么问题可以留言。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭