以下是小编为大家准备的5个CSS布局的常见问题及解决方法网页设计(共含10篇),仅供参考,大家一起来看看吧。同时,但愿您也能像本文投稿人“曙光在前”一样,积极向本站投稿分享好文章。
总结了5个关于css布局的常见问题,并附有解决方法,供参考,
float的3像素问题及解决办法
当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,可以在float浮动容器样式里加针对IE6的属性”_margin-right”和”*html”,如:
#sidebar{ float:left; width:200px; _margin-right:-3px;}
或者
#sidebar{ float:left; width:200px;}
*html #sidebar{ margin-right:-3px;}
上边容器浮动后,下边的容器跟着浮动,造成页面错乱
如图中布局所示:footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱。解决办法是在maincontent和footer之间插入一个容器,设置样式
clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使页面正常
IE6下float浮动导致双倍边距的bug
当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况,
如外边距设置为10px,而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug
当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?
这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS
HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持
css布局的相对定位与绝对定位
规划页面时,许多时候需要用到相对定位或绝对定位,这里边有个css技巧,掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后,此时子元素再使用绝对定位,位置是相对于父元素。如果父元素没有定位,那么子元素的绝对定位是相对于浏览器。
本文链接: 5个css布局的常见问题及解决方法 本文作者:Mars Lau
最先起草本文时,命的名字叫:“谈谈网页布局中表单元素的几宗罪”接下来的内容如下:
当您看到这个标题时,可能会觉得有点夸大其词了吧!表单为我们和服务器交互提供了很好的接口,怎么说是有罪呢?
当然,表单的强大功能我们不可否认,但它在布局上的棘手问题也是让许多人头疼的,尤其是新手,
网页布局中表单常见问题及解决办法
。看看论坛上的提问,与表单相关的举不胜举。后来觉得这个名字不太太明了,所以就改为“网页布局中表单常见问题及解决办法”。下面我就网页布局中常用表单及常见问题总结一下:1、form如果您需要提交数据,那个form标签是必不可少的。它标记了数据提交的方式及处理页面。但form默认外补丁的问题也使许多人找不着北了。如下图,在IE6和IE7下,默认form是有上下外补丁的。这样就造成了本来想和上下内容贴近显示的,结果却离的很远,有可能造成页面错乱。而在火狐下却没有外补丁的。解决的办法是在样式表中加入form. {margin:0px;},这样在IE和火狐下显示都一致了。
标准之路www.aa25.cn 提示:可以先修改部分代码后再运行
2、宽度当用css定义文本框和下拉列表框的宽度相同时,文本框的宽度更大一些。
标准之路www.aa25.cn 提示:可以先修改部分代码后再运行
目前,本人的解决办法是把select的宽度定义大一样,一点一点调整至一样为止,
如果您还有什么更好的办法,欢迎贴出来。
另外一个问题就是按钮的宽度在IE和火狐下显示一样,解决这个办法就是用css定义按钮的宽度。
3、美化和层级这个主要针对常用的select。当用css对表单进行美化时,select对边框和高度设置不起作用,这也是select让人头疼的一个地方。要想美化select,只能用其它办法,高度可以采用把字体变大变小的方法来实现。不过可以参考本站的div css模拟美化的Select样式,超经典这篇文章,可以把select美化成任何你想要的样式。
层级问题是select是让人更头疼的一个地方。指的是当有div设置居于其上时,在IE6下不能将其遮挡,select还显示在最上层,这个问题的解决办法其一就是采用此例div css模拟美化的Select样式,超经典美化后即可(它采用隐藏真实select,用div模拟成的)。还有就是采用iframe方法。在IE6看来,如果只有div和select,无论你的z-index怎么设置,div的层永远被会被select标签踩在脚底,而iframe则可以爬到select头上,所以,下面的方法之所以能解决问题,是因为iframe在select上方,而div搭着iframe的顺风车也爬到了select的头上。这个问题可以详细参考如何让层盖住下拉列表框? 问题解决方案
4、表单和文字间的换行此问题出现在源代码方面,当表单后来跟的文字和表单的源代码不在一行时,预览时表单和文字中间会有个空格,不换行时没有空格。但用dreamweaver默认的代码格式是分行显示的,这也是出现表单和文字挨不着的原因。
标准之路www.aa25.cn 提示:可以先修改部分代码后再运行
5、文件域按钮没法美化文件域在前台制作时比较少用,在后台制作时较长用。它的美化也是难点,因为它是一个文本框和按钮的组合。在设置背景时能同时应用到文本框和按钮上,边框也是同时应用。其它的倒没法设置,本人暂时没有其它设置的办法,期待高人解决提供方法。
本站更多和表单相关的文章
DIV层被Flash或表单遮盖的解决方法
div css表单布局的五个小技巧
JS表单提交验证类
有图片预览功能的上传表单
怎么把表单内输入的中文逗号自动转换为英文逗号?
超强大的JS表单验证及使用方法教程(我是佛山人)
让文本框textarea自动适应内容的高度
文本框提示样式,鼠标点击获得焦点时提示内容消失
只有下边框的文本输入框样式
如何垂直居中对齐文本与文本输入框
绿色下载站用div模拟select下拉菜单美化效果实例
一个不错的带下拉菜单的DIV搜索条
本人用css制作的一组立体感很强的按钮样式
按钮onClick事件新窗口打开和在本窗口打开的方法
表格复选和复选变色效果
这个技术变得越来越流行,因为许多人现在转而使用像 Firefox 和 Safari 等更可靠并且(我敢说)兼容性更好的浏览器。
CSS
div.rounded{-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px;border:3pxsolid#f3ddac;background:#fff3d8;}
HTML
This is text within the DIV. This is just random meaningless stuff to make this DIV look like it contains something, thus making it a more aesthetic example rather than using a completely empty DIV to demonstrate this technique.Note:Only Firefox or Safari users will notice rounded edges on this DIV. If the corners of this DIV are square in your browser, I recommenddownloading Firefox.
效果:
当我学会这个技术时,我真想能早点知道它。它肯定能减少我因为试图把元素正确排列 而拿头撞桌子的痛苦。(可怜的桌子啊! - 糖伴西红柿)
在页面上创建一个元素的时候,它被默认地设置为postion: static;,正常情况下这挺好。 但是,当你试图用position: absolute;来定位包含在其中的元素时,它却不会 相对于它的父元素绝对定位。它反而会相对于页面绝对定位。下面给出两个可视图表。
静态定位的父元素(默认)
相对定位的父元素
下面的代码帮助你理解怎么使用这个技术:
< !DOCTYPE HTML PUBLIC“-//W3C//DTD HTML 4.01//EN”“www.w3.org/TR/html4/strict.dtd”>
创建半透明层时,很多人就被难倒了。貌似大多数人认为,使用 CSS 调整 div 透明度 时,只有背景会受到影响。这是不对的。以如下代码段为例:
CSS
.transparent{padding:10px;color:#000;background:#cb0000;height:200px;width:250px;opacity:0.4;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;}
HTML
Most people think this text should be fully opaque rather than dimming with the background...
效果:
像你所看到的,应用 CSS 透明的元素,其里面包含的文本也同样受到影响。当然, 也可以用一点 CSS 和另一个容器来覆盖掉:
CSS
.transparent{position:absolute;top:0;left:0;padding:10px;background:#cb0000;height:200px;width:250px;opacity:0.4;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;}.text{position:absolute;top:0;left:0;padding:10px;color:#000;height:200px;width:250px;}
This is an example of fully opaque text overlain on a semi-transparent background DIV
效果:
这个技术越来越普遍,因为它不仅可以用来增强网站的美感,而且,如果使用正确, 理论上来说还可有助于页面上的 SEO。下面是一个快速创建链接块的指南:
CSS
CSS
a.blocklink{display:block;width:160px;background:#f0f0f0;color:#999;font-family:corbel,verdana,sans-serif;padding:4px;text-decoration:none;font-weight:normal;font-size:0.72em;border:1pxsolid#dadada;}a.blocklinkstrong{font-family:georgia,helvetica,sans-serif;display:block;color:#656565;font-weight:bold;font-size:1em;margin:003px0;font-style:italic;}a.blocklink:hover{background:#dcdcdc;color:#303030;border:1pxsolid#adadad;}a.blocklink:hoverstrong{color:#cb0000;}
HTML
Link Block HeadingThis is the text contained within the link block... It has no real meaning. It“s just here to make it look pretty...
效果:
糖伴西红柿说:
如文章所说,这些技术都已经流传好久了,现在都不新鲜了。不过也算得上一个很好的总结,这篇文章比较 细致地讲了各种技术的实现方法,看起来很理论,其实很实用。
原文:eight7teen.com/articles/5-css-techniques-you-should-know
译文出自:www.qianduan.net/?p=5707
这个技术已经出现很久了,但是还是有很多人不知道怎么用 CSS 实现这个效果,
因此,我打算详细阐述下这个技术并给出一些进一步展示页面元素美感的例子。
例一:
这个例子简单地在图片周围加了一像素的边框。通过 CSS 设置的 background-color 和 padding 使图片看起来有了多个边框。
CSS
img.demo1{padding:2px;border:1pxsolid#ababab;background:#dcdcdc;}
HTML
例二: 这个例子使用较小的 padding 和 较大的 border-width,并且用较淡的背景色和 较深的边框色来反转了上个例子的效果。CSS
img.demo2{padding:1px;border:2pxsolid#dcdcdc;background:#ababab;}
HTML
例三:
这个例子展示了利用上例中同样的技术和一点点想象力能实现的效果。我们只给图片 的两个边设置 padding 和 border,这就实现了阴影效果。
CSS
img.demo3{padding:02px2px0;border:0;border-right:2pxsolid#eee;border-bottom:2pxsolid#eee;background:#d1d1d1;}
HTML
从以上可以看出,这次的XHTML部分的代码横向代码略有不同,我们没有继续使用ul和li标签,其实继续使用ul元素也能完好的实现纵向导航系统,但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉,开拓更多的设计思想。
这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题,h2来做二级分类下面的细节内容。在XHTML的讲法意义中,h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义,直接使用h1,h2来表示层级关系,相对于在标签中加入id或class来做层级的标记更为简单和直观,在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计:
#nav { width:100px; border-color:#c5c6c4; border-style.:solid; border-width:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}
本css代码部分采用了简化写法,如果哪句意思看不懂,您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了,相信经过这样几次练习,这些代码您已经能完全看懂了,说明您离高手又近了一步了,
大家可能已经注意到了,#nav的边框本例中只设置了左右下和一像素,而没有上,而在h1的样式里设置了上部的上像素?这是为什么呢?因为h1的样式上部都有一条横线,如果nav上部再有一条横线的话成长两条了,结果显示出来就是两像素的高度了。
好了,完整的效果可以预览一下:
九宫格是一种比较古老的设计,它最基本的表现其实就像是一个三行三列的表格,其实它最初是在window的c/s结构中用得比较多,比如我们经常看到软件中的一个窗体,其实就是一个九宫格的典型应用,因为窗体需要在八个方向拉伸,所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会,这种布局逐渐被一些网页设计师运用在网页中去,用得最多的就是在圆角框布局中应用。
下图演示了九宫格的基本布局:
从上图可以看出,每一行包括三列,其中蓝色方块是顶角,这四个块是宽高固定的区域,而黄色的四个区域分别是四条边,这些都是要水平或垂直平铺的,而中间的橙色区域是装载内容的主要区域。
这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高,这种结构也是网页设计师是最想要的一种布局结构,它灵动而从容。
下面我们就来实现它:
结构层:
因为它要适应八个方向的伸展,所以每个方向都用一个div来实现,少一个则灵活性就不足,
那么根据这个原理,我们可以得到如下的结构:
样式层:
根据结构,我们可以写出基本的样式。基本实现原理,是利用将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除,并将其里面的八个方向的div设为绝对定位,并将它们的z-index设置为2,然后将四个角容器分别设置到四个角落上。
.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position:absolute;z-index:2;}
内容区
★ 网页设计论文
★ 网页设计心得体会
★ 网页设计求职信
★ 网页设计心得体会
★ 笔试网页设计