仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 870|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 给大家带来CSS结构自顺应高度办理办法

[复制链接]
愤怒的大鸟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:20:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
这是一个对照典范的三行二列结构,每列高度(事前其实不能断定哪列的高度)的不异,是每一个计划师寻求的方针,按一样平常的做法,年夜多接纳背景图添补、加JS剧本的办法使列的高度不异,本文要先容的是接纳容器溢出部分埋没和列的负底界限和正的内补钉相分离的办法来办理列高度不异的成绩。
先看代码:
#wrap{
overflow:hidden;
}
#sideleft,#sideright{
padding-bottom:32767px;
margin-bottom:-32767px;
}
完成道理:
块元素必需包括在一个容器里。
使用overflow:hidden到容器里的元素。
使用padding-bottom(充足年夜的值)到列的块元素。
使用margin-bottom(充足年夜的值)到列的块元素。
padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回究竟部入手下手的地位,同时,溢出部分埋没失落了。
兼容各扫瞄器
IEMac5
失掉高度准确,以是要过滤失落下面的代码。
/*/*/
#sideleft,#sideright{
padding-bottom:32767px;
margin-bottom:-32767px;
}
/**/
Opera
1.Opera7.0-7.2不克不及准确扫除溢出部分,以是要加:
/*easyclearing*/
#wrap:after
{
content:[DONOTLEAVEITISNOTREAL];
display:block;
height:0;
clear:both;
visibility:hidden;
}
#wrap
{
display:inline-block;
}
/*/*/
#wrap
{
display:block;
}
/*endeasyclearing*/
/*/*/
12下一页

2.Opera8处置overflow:hidden有个BUG,还得加上以下代码:
/*/*/
#sideleft,#sideright
{
padding-bottom:32767px!important;
margin-bottom:-32767px!important;
}
@mediaalland(min-width:0px){
#sideleft,#sideright
{
padding-bottom:0!important;
margin-bottom:0!important;
}
#sideleft:before,#sideright:before
{
content:[DONOTLEAVEITISNOTREAL];
display:block;
background:inherit;
padding-top:32767px!important;
margin-bottom:-32767px!important;
height:0;
}
}
/**/
3.Opera9的B2在修改8的bug.
测试情况:IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape7.2经由过程。上一页12

样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
再见西城 该用户已被删除
沙发
发表于 2015-1-18 06:05:18 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
第二个灵魂 该用户已被删除
板凳
发表于 2015-1-21 17:57:19 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
深爱那片海 该用户已被删除
地板
发表于 2015-1-30 21:42:09 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
柔情似水 该用户已被删除
5#
发表于 2015-2-6 16:13:37 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
再现理想 该用户已被删除
6#
发表于 2015-2-17 04:07:08 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
若天明 该用户已被删除
7#
发表于 2015-3-5 15:46:39 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
8#
发表于 2015-3-12 10:00:24 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小妖女 该用户已被删除
9#
发表于 2015-3-19 20:17:17 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-6-20 09:56

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表