100%高度全屏自适应网页布局- 导航代码

当前位置: 首页 > 图文教程 > 网页特效 > 导航代码 > 100%高度全屏自适应网页布局

导航代码: 仿网易的滑动门导航效果代码(DIV+CSS); 网站导航文字按特殊的类型进行切换的特效; 一个比较有用的特殊选项卡特效代码; 效果不错的分页列表的网页特效代码; 网页特效代码：非常简洁的网页导航菜单; 网页特效：个性化的网页按钮; 网页设计中不错的二级导航菜单特效; 不错的翻页特效(CSS实现); 类似选项卡的切换效果; js:商品分类后有一个方框指向到搜索栏; 左侧菜单点击变色效果; XHTML+CSS制作的网站导航菜单; 特效代码:区别网页链接访问与未访问; 百度有啊商城CSS+XHTML实现的圆角; 树形导航特效,CSS特效代码; CSS制作带阴影的网站导航代码; 网页制作的网页下拉菜单（1）; 网页制作的网页下拉菜单（2）; 网页制作的网页下拉菜单（3）; 网页制作的网页下拉菜单（4）

No. « 1 2 › »

技术文章搜索

关键字

导航代码中的 100%高度全屏自适应网页布局

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 421 ::

收藏到网摘: n/a

CSS Sprite制作的鼠标感应网站导航条类似按钮效果的网站导航CSS代码

100%高度全屏自适应布局。

<!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=gb2312"/> <title>自适应满屏高度的布局-软晨学习网</title> <style type="text/css"> html {height:100%;max-height:100%;padding:0;margin:0;border:0;background:#fff;font-size:76%;font-family:georgia, palatino linotype, times new roman, serif,"宋体"; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } html { scrollbar-face-color:orange; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#c00; scrollbar-3dlight-color:#c00; scrollbar-arrow-color:#000; scrollbar-track-color:#c0c0c0; scrollbar-darkshadow-color:#fff; } body{height:100%;max-height:100%;overflow:hidden;padding:0;margin:0; border:0;} #content{overflow:auto; position:absolute; z-index:3; top:100px; width:96%;bottom:80px; left:2%; background:#666;} *html #content {top:0; left:2%; height:100%; max-height:100%; width:96%; overflow:auto;position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:80px solid #fff;} #head{position:absolute;margin:0;top:0;left:1px;display:block;width:100%;height:90px;background:orange;background-position:0 0; background-repeat:no-repeat;font-size:4em;z-index:5;overflow:hidden;color:#fff;border-bottom:1px #c0c0c0 solid;text-align:center;} #foot{position:absolute; margin:0;bottom:0;left:2%;display:block;width:96%;height:70px;font-size:1em;z-index:5;overflow:hidden;color:#fff;text-align:center;} #content p,h2{padding:10px;font-size:12px;color:#fff;} #content p.bold {font-size:1.2em; font-weight:bold;color:red;} #logo{height:75px;line-height:75px;text-align:center;display:block;} .footleft{width:20%;height:70px;line-height:70px;float:left;border:1px #c0c0c0 solid;background:blue;} .footmid{width:58%;height:70px;line-height:70px;margin-left:1%;float:left;border:1px #c0c0c0 solid;background:blue;} .footright{width:20%;height:70px;line-height:70px;float:right;border:1px #c0c0c0 solid;background:blue;} a:link,a:visited{color:#fff;} </style> </head> <body> <div id="head"> <span id="logo">100%高度全屏自适应布局</span> </div> <div id="foot"> <div class="footleft"><a href="http://www.ruanchen.com/"CURSOR: hand" onfocus="this.blur()" onclick="runEx('code')" type="button" value="运行代码" /> <input style="WIDTH: 95px; CURSOR: hand" onfocus="this.blur()" onclick="cycode(code)" type="button" name="Submit" value="复制到剪贴板" /> <input style="CURSOR: hand" onfocus="this.blur()" onclick="svcode(code)" type="button" value="另存代码" /> [ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]</p> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/36864/" title="CSS Sprite制作的鼠标感应网站导航条">CSS Sprite制作的鼠标感应网站导航条</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/88593/" title="类似按钮效果的网站导航CSS代码">类似按钮效果的网站导航CSS代码</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '36865'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('36865')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">

登陆还没注册？

导航代码 中的 100%高度全屏自适应网页布局

导航代码中的 100%高度全屏自适应网页布局