Home > 前端开发 > 三列布局且能自适应高度完美解决方案

三列布局且能自适应高度完美解决方案

/ 前端开发 / , , / 25 Views
0

近段时间本人在不断学习web2.0标准，学习到了许多东西，也遇到了许多问题。

如何完美布局多行多列是我们设计时常见的问题，下面我把自己的个人心得贴出来，与大家分享，希望能对正被此问题困扰的朋友有所帮助。

1、标准页面，请另存为index.html










网站首页 ｜ 企业** ｜ 产品展厅 ｜ 博客之家 ｜ 行业论坛 ｜ 意见反馈 ｜ 广告服务 ｜　联系我们


广告位


右侧
中间
左侧


欢迎你再次光临本网站，请记住本站永久域名




友情链接
·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化

·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化 ·WEB2.0-SEO优化

网站简介｜帮助中心｜广告服务｜建站套餐｜企业服务｜联系我们｜会员注册｜免责声明｜网站地图｜友情链接

CopyRight ? 2007 WEB2.0-SEO优化 豫ICP备案号：07006296






2、css文件，请保存后与index.htm放在同一目录下。

head.css

/* common*/
html,body { margin:0; padding:0; border:0; font-size:12px; color:#30449d; background:#fff;}

a:link { text-decoration:underline; color:#30449d; }
a:visited { text-decoration:underline; color:#30449d; }
a:hover, a:active { text-decoration:underline; color:#f00; }

form,input,textarea { margin:0; padding:0; }
input { border:1px solid #a5cdf0;}
.bw { color:#fff; font-weight:bold; font-size:14px;}
.bigdiv { width:978px; margin:5px auto; border:1px solid #a5cdf0; overflow:hidden; }
.longdiv { width:978px; margin:5px auto; border:1px solid #f7d164; overflow:hidden; }
.maindiv { width:980px; margin:5px auto; overflow:hidden; }
.border { border:1px solid #a5cdf0; }


/* head */
.headtop { width:958px; height:26px; padding-right:20px; margin:auto; border-left:1px solid #a5cdf0; border-bottom:1px solid #a5cdf0; border-right:1px solid #a5cdf0; text-align:right; line-height:26px; background:url(head/menu-bg.jpg) repeat-x;}

.nav { width:980px; height:60px; margin:auto; padding-top:5px; padding-bottom:5px; overflow:hidden;}
.navlogo { width:210px; height:60px; float:left; background:url(head/logo.jpg) center no-repeat;}
.navadv { width:490px; float:right; margin:auto 5px; text-align:center; background:#ffffce; }
.navtext { width:268px; height:58px; float:right; }

.menu { width:980px; height:74px; overflow:hidden; margin:auto;text-align:center; background:url(head/menu-navbg.jpg) repeat-x; }
.menuleft { width:25px; height:74px; float:left; background:url(head/menu-navleft.jpg) no-repeat; }
.menumid { float:right; width:930px; height:98%; background:#00f; color:#fff; }
.menuright { float:right; width:25px; height:74px; background:url(head/menu-navright.jpg) no-repeat; }

/* search */
.search { height:30px; background:#ffffce url(head/resource.jpg) 10px 7px no-repeat; text-align:left; line-height:30px; }
.searchtext { float:left; width:600px; padding-left:50px; }

/* foot */
.link { height:90px; }
.linkpic { width:950px; height:30px; float:left; text-align:left; background:#d3e5fd url(foot/link.gif) no-repeat left; padding-left:28px; line-height:30px;}
.linktext { height:30px; line-height:30px; text-align:left; padding:0 10px; }
.foot { height:70px; clear:both; text-align:center; line-height:35px; background:url(foot/footbg.jpg) repeat-x; }


3、相关文件在附件中，请下载后学习。

4、版权声明：此为作者原创，欢迎转载，并请保留作者的信息 （Daniel原创）
点击下载此文件

发表评论

*