新闻中心

蓝色在线的网站建设,十年经验,打造满意,放心的网站建设服务!
您现在的位置:首页 > 新闻中心 > 网页设计
分享到:

网站建设观点

网页设计

最新公告

蓝色在线省钱计划

顶部和底部固定,中间网页自适应网页设计样式

时间:2013-04-03   作者:蓝色   来源:蓝色在线科技   

      网页设计的样式不断的在变化,看看现在的网页,再看看以前的网页,进步还是非常明显的,网页设计这一方面还是在牢牢的占据着潮流的前沿,我们今天来分享的就是顶部的底部固定,中间网页自适应网页设计样式

 

      适用范围:

      顾名思义,顶部导航和LOGO类的不动,底部版权类的不动,一直显示在你的屏幕顶和底,这样的样式不太适合小屏幕的用户使用,小屏幕的高度有限,中间的主要信息浏览的非常吃力。所以,你观察你网站统计的PC端的电脑分辨率是多少,低于1024的比例占到20%或以上的不建议采用本样式。

 

      复制下面的代码后,在本地新建一个HMTL文档,然后粘贴进去就可以打开来看到效果了!

<!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>Untitled Document</title>
  </head>
   
  <body style="height: 100%; margin: 0;">
   
  <div style="width: 100%; margin: 0 auto; text-align: center; background: #FF9400; height: 100px; position: absolute; top: 0; line-height: 100px;">head</div>
  <div style="width: 100%; margin: 0 auto; background: #eee; height: 100%;">
  </div>
  <div style="width: 100%; margin: 0 auto; text-align: center; background: #f00; height: 100px; position: absolute; bottom: 0; line-height: 100px;">foot</div>
   
  </body>
   
  </html>

 

上一篇:网页设计中非常有用的CSS
下一篇:网页设计色彩大全
网站首页 网站建设 手机WAP网站建设 APP客户端 网站案例 新闻中心 联系我们