当前位置:首页 > 站长博客 > 正文

标准之路div+css网页版式宽度固定、自适应布局模板频道上线

作者:××× 来源:aa25.cn 【 】 浏览: 添加日期:2008-08-29 我要评论(74)     

为了使网页设计师省去每次构架整体布局的麻烦,标准之路经过长时间的积累总结,推出这一系列共50套的div+css网页标准版式布局。一方面可以下载直接使用,另外也可做为初学者循序渐进学习的实例教程。

本套模板分为两部分,一部分为固定宽度布局,即主体内容的左右侧宽度都固定;另外一部分为自适应宽度,可以适应浏览器的宽度。基本上涵盖了从一列到三列的所有常用版式布局,希望能给您的工作和学习带来事半功倍的效果。

本套模板全部为本人制作完成,由于本人水平有限,中间难免有不足或疏漏之处,请发现的朋友及时在此留言(留言时注明模板编号、出错地方),我会及时更正。同时,转载的朋友一定要保留本站的版权标识和链接,一方面是对读者的负责任,另外也是对作者的尊重,谢谢!

包含以下版式:访问地址:http://www.aa25.cn/layout/

  1. 1列固定宽度居中
  2. 1列固定宽度居中+头部
  3. 1列固定宽度居中+头部+尾部
  4. 1列固定宽度居中+头部+导航+尾部
  5. 2列固定宽度居中左窄右宽型
  6. 2列固定宽度居中右窄左宽型
  7. 2列固定宽度居中平分型
  8. 2列固定宽度左窄右宽型+头部
  9. 2列固定宽度右窄左宽型+头部
  10. 2列固定宽度左窄右宽型+头部+尾部
  11. 2列固定宽度右窄左宽型+头部+尾部
  12. 2列固定宽度左窄右宽型+头部+导航+尾部
  13. 2列固定宽度右窄左宽型+头部+导航+尾部
  14. 2列固定宽度左窄右宽型+头部+导航+尾部
  15. 2列固定宽度右窄左宽型+头部+导航+尾部
  16. 3列固定宽度居中
  17. 3列固定宽度居中+头部
  18. 3列固定宽度居中+头部+尾部
  19. 3列固定宽度居中+头部+导航
  20. 3列固定宽度居中+头部+导航+尾部
  21. 2列左窄右宽、高度自适应+头部+导航+尾部
  22. 2列右窄左宽、高度自适应+头部+导航+尾部
  23. 2列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部
  24. 2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部
  25. 1列自适应宽度
  26. 1列自适应宽度+头部
  27. 1列自适应宽度居中+头部+尾部
  28. 1列固定宽度居中+头部+导航+尾部
  29. 2列左侧固定,右侧自适应宽度,中间无缝型
  30. 2列右侧固定,左侧自适应宽度,中间无缝型
  31. 2列左侧固定,右侧自适应宽度
  32. 2列右侧固定,左侧自适应宽度
  33. 2列左侧百分比右侧自适应
  34. 2列左侧固定,右侧自适应宽度+头部
  35. 2列右侧固定左侧自适应宽度+头部
  36. 2列左侧固定右侧自适应宽度+头部+尾部
  37. 2列右侧固定,左侧自适应宽度+头部+尾部
  38. 2列左侧固定,右侧自适应宽度+头部+导航
  39. 2列右侧固定左侧自适应宽度+头部+导航
  40. 2列左侧固定右侧自适应宽度+头部+导航+尾部
  41. 2列右侧固定左侧自适应宽度+头部+导航+尾部
  42. 3列左右侧固定,中间列自适应居中
  43. 3列左右侧固定,中间列自适应居中+头部
  44. 3列左右侧固定,中间列自适应居中+头部+尾部
  45. 3列左右侧固定,中间列自适应居中+头部+导航
  46. 3列左右侧固定,中间列自适应居中+头部+导航+尾部
  47. 2列左侧固定右侧自适应宽度,未知高度+头部+导航+尾部
  48. 2列右侧固定左侧自适应宽度,未知高度+头部+导航+尾部
  49. 2列左侧固定右侧自适应宽度,未知高度且底部平齐+头部+导航+尾部
  50. 2列右侧固定左侧自适应宽度,未知高度且底部平齐+头部+导航+尾部
(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖站长博客〗Tags: 网页版式 div布局 css网页布局

更多评论(74)..会员评论

wuyuning(123.161.*.*) 发表于:2012-09-20 10:38:10
看了几个模版的源码之后,发现一个问题,为什么分列显示的时候都要使用#maincontent为父容器呢?直接用#sidebar,#content 不行吗?会出现什么问题吗
管理员回复:可以
yueyue2012(222.55.*.*) 发表于:2012-07-13 13:43:25
我喜欢这个网站!!!强力推荐!!!强力支持!!!1
管理员回复:谢谢,多推荐人来
she738392(117.32.*.*) 发表于:2012-07-10 08:45:06
老师怎样让我做的网页可以在大部分的浏览器下正常运行
管理员回复:把兼容问题搞好就可以
doocal(183.160.*.*) 发表于:2011-08-28 16:24:30
第24套模板,不能自动适应全屏高度。
管理员回复:是,就没做适应全屏高度
wonderful(121.12.*.*) 发表于:2011-08-01 10:10:33
自适应(弹性)宽度CSS版式布局 模板41为什么把HTML文件中sidebar与content位置对换一下,就错位了呢?
suoguocs(114.219.*.*) 发表于:2011-06-22 20:55:13
绝对好站
suifeng1201(112.241.*.*) 发表于:2011-01-27 15:01:30
老师好,有一个问题向你请教,我在排版的时候,内容栏设置了三列,左,中,右,类名分别为1,2,3 为他们设置了宽度,我已经注意到了关于宽度的问题,没有让他们超过容器的宽度,并且2的左右margin都设置恰当,我为1设置了left,height 3设置了right,height 2只设置了height,margin. 可是3却没有和1,2并列,跑到了下一行显示,我在容器中加入了清除浮动,可是没有任何的作用,请问这个问题怎样解决。
管理员回复:不清楚了,得看实例
lymekin(114.222.*.*) 发表于:2010-11-10 00:51:46
我就是在这里学会div css的,感觉很不错,现在遇到一个问题,我用的设计稿的头图是1280*350的,但是我在家用我的15寸笔记本布局时,页面下面出现滑块,或者是头图不能完全显示,怎么才能使这种图片对不同分辨率的屏幕自适应呢,我的意思就是如果是1280的屏幕,那么该图完全显示,如果是1024,那么该图等比缩到1024,始终保持满屏,还请赐教。。。
管理员回复:不太明白,如果单纯是一张图片可以设置宽度为百分比

出差旅游免费预订酒店

【视频教程】新手常见问题