当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS布局的一些小经验

时间:2013-03-02 03:45来源:未知 作者:admin 点击:

标签:CSS布局的一些小经验 些小(2)教训(8)布局(72)经验(30)CSS(655)网站建设(1202)
--> [网站建设之]CSS布局的一些小教训 1.在一个div内嵌套两个div. div id=1 div id=2/div div id=3/div /div css #1 { width:100%;background:blue, CSS布局口诀 ;} #2 { width:100%;background:red;} #3 { width:100%, CSS属性选择器的四种格式 ;background:
CSS布局的一些小经验》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023335R013.htm
--> [网站建设之]CSS布局的一些小教训

1.在一个div内嵌套两个div.
<div id="1">
<div id="2"></div>
<div id="3"></div>
</div>

css
#1 { width:100%;background:blue,CSS布局口诀;}
#2 { width:100%;background:red;}
#3 { width:100%,CSS属性选择器的四种格式;background:green;}

当div2,3里面不异样的内容的时候,显示所有畸形,然而当Div3里放一个超过屏幕宽度的图片时,CSS属性选择器制作个性化链接样式,div1会主动扩大,但是div2不会,CSS属性的缩写。这就使得显示很丢脸。假如用表格,div2跟div3分辨是两个tr,那么不存在这个问题。
这个问题怎么解决?

2. 左中右三个div
<div id="left "><,CSS属性Vertical Align使用方法讲解;/div>
<div id="right "></div>
<div id="center "></div>,CSS将图像设置为背景;

css
#left {float:left; position:relative; width:200px; left:0px,CSS实用表格示例(带注释);background: red;}
#right {float:right; position:relative; width:200px; right:0px;background: green;}

#center{margin-left:200px,CSS实用技巧18招; margin-right:200px; position:relative; display:block; height:1%;background: blue;}
这是一个很简略的左右侧固定中间自适应布局。
但是同样,你在center div里放一个超大的图片,看看会怎么样?中间一片白,centerdiv被挤到下面去了
用table,一行3个td就解决了这个问题。右侧的td会被挤到屏幕外面,但是总体布局不会乱

用div+css布局确实好,我减少了我的网站至少60%的html。
但是div在自适应和异常处理上面,我没找到好的的办法。

当然,有的人可能说,为什么要放一个超大的图片?我的答复是,这是用户输入。我是做程序出生,对软件来说,你永远也设想不到用户会输入什么样的数据.....所以咱们的软件/页面的容错性必需要好。Table,就我目前看来,css实现鼠标经过图片显示边框的代码,在容错这个问题上,远好于div
愿望有高人能解决我这个问题。
在这个问题上,我盼望到达的后果就是,当旁边列超宽的时候,能把右列挤到屏幕以外去,但依然坚持程度的布局关联,不要错开。

问题3:高度的自适应
仍是三列(或两列)的布局。在不斟酌有什么超大的图片的情形下。是比拟轻易实现宽度自适应的布局的。但是如果左/中/右的背风景不一样怎么办?如何实现看起来各栏的高度是一样的?当然,有解决方式,我会,CSS实现鼠标滑过表格变色,但是,如果不是背景色,是垂直平铺的背景图片怎么办?如何实现三栏(或两栏)的背景高度看起来是一致的?

请别探讨在后盾怎么处置的问题了,我想晓得的就是,这多少个问题,在不必表格布局的条件下,用Div+CSS能不能实现,而且至少要保障IE+FF的兼容性(能够是不同的CSS文件)。 Tag:CSS布局   经验   CSS布局   经验  
(责任编辑:网站建设)
CSS布局的一些小经验相关文章
上一篇:CSS布局口诀 下一篇:CSS布局的登录表单
回到顶部