![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Div+CSS
codeshark
心静 思远 志在千里
展开
-
用CSS设计横向标签式导航菜单
XHTML中元素间的CSS属性继承:继承指的是每个元素可以有多个样式设计,在通常情况下,它遵循的是最外层的样式设计原则,如果遇到对其自身的样式设计,它将在继承最外层样式设计的基础之上,优先考虑自身的样式设计。用CSS设计横向标签式导航#nav{height:26px;border-bottom:2px solid #2788da;}#na原创 2008-07-12 15:50:00 · 1998 阅读 · 0 评论 -
二列右列宽度自适应布局
说明:有些单用户博客系统就是采用“二列右列宽度自适应布局”,也就是固定左栏,右栏根据浏览器窗口大小自适应。方法:左栏设置固定width值,右栏不浮动也不设置宽度值即可。二列右列宽度自适应布局#left{background-color:#cccccc;border:2px solid #333333;width:110px;height:30原创 2008-07-09 00:35:00 · 826 阅读 · 0 评论 -
二列宽度自适应布局
从“一列宽度自适应布局”我们可以知道,设定自适应主要是通过宽度的百分比值来实现,因此在“二列宽度自适应布局”中,同样是采用百分比来指派。二列宽度自适应布局#left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}#r原创 2008-07-09 00:30:00 · 694 阅读 · 0 评论 -
二列固定宽度
目标:让两个DIV在水平行中并排显示,从而形成二列式布局。说明:float属性用于控制对象的浮动布局,有三个值:none,left,right。使用none表示对象不浮动,使用left,表示对象将向左浮动,使用right,表示对象向右浮动。注意:在CSS中,包括div在内的任何元素都可以浮动的方式进行显示,浮动可以改变页面中对象的前后流动方式。有利于排版页面。原创 2008-07-09 00:22:00 · 780 阅读 · 0 评论 -
一列固定宽度居中
说明一:页面居中是常用的网页设计表现形式之一,传统的表格式布局中,用align="center"属性来实现表格居中显示。但是div本身也支持align="center"属性,同样可以实现居中,但是WEB标准化时代,这个不是我们想要的结果。因为不能实现表现与内容的分离。align对齐属性是一种样式代码,书写在div属性中,有违于分离原则。说明二:margin属性用于控制对象的上、右、下、左四个方原创 2008-07-09 00:10:00 · 1063 阅读 · 0 评论 -
一列宽度自适应
说明一:自适应布局的最大好就是能够浏览器的大小,自动改变其高度或宽度值。因此都不同分辨率的显示器来说,使用自适应大小能够提供比较好的显示效果。说明二:默认状态下div将占据整行空间,即宽度为100%的自适应大小,一列自适应布局需要改变这个值。其方法是:将width的固定像素值改成百分比即可完成。1列宽度自适应#layout{backgroun原创 2008-07-08 23:50:00 · 752 阅读 · 0 评论 -
一列固定宽度
一列固定宽度#layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;}/*width:300px;将当前宽度界定在300px以内,这样就形成了一个固定宽度的布局。如果设置为width:auto;将占据整行空间。*/原创 2008-07-08 23:33:00 · 709 阅读 · 0 评论 -
浅谈绝对定位与相对定位
绝对定位:position:absolute;主要是通过设置对象的top,right,bottom,left四个方向的边距值来实现。一旦对象采用了绝对定位,它就完全摆脱了文档流与浮动模型,独立存在。绝对定位#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;hei原创 2008-07-12 13:07:00 · 2214 阅读 · 2 评论 -
三列浮动中间列宽度自适应
要求:3列布局,左栏要求固定宽度并且居左显示;右栏要求固定宽度并居右显示;而中间栏要求根据左右栏间距自适应居中显示。说明:浮动定位:主要由浏览器根据对象的内容自动进行浮动方向的调整。当这种方式不能满足定位需求时,就需要用到绝对定位position属性来实现。有三个值position:static:默认属性值;position:absolute,对象将根据整个页面的位置进行重新定位,当使用次属性原创 2008-07-09 01:05:00 · 1333 阅读 · 0 评论 -
深入理解浮动定位(float)
CSS网页布局有两种方式:一种是浮动式布局;另外一种是定位布局。这两种方式的核心都脱离于文档流的控制。前提:文档流(Document Flow),对于一个xhtml网页,body元素下的任意元素,根据其前后顺序,组成了一个个上下关系,简单说这就是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。浮动定位(float)浮动定位的目的就是打破默认的按照原创 2008-07-12 12:12:00 · 1483 阅读 · 0 评论 -
左右margin加倍问题
上面一篇文章提到“上下margin叠加问题”在IE6.0中,当处于上下关系的两个对象同时具备margin属性的时候,并且用了float属性使之消除边距叠加问题,但是引发了一个新的问题====>“左右margin加倍问题”。问题阐述:当盒子模型对象处于浮动状态的时候,在IE6.0中,盒对象的左右margin会加倍。这是IE6.0的CSS解析问题。解决“左右margin加倍问题”之诀窍:设置对象的原创 2008-07-12 11:43:00 · 2409 阅读 · 0 评论 -
上下Margin叠加问题
从盒子模型我们可以得知:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的。但有一种特殊情况====>上下对象的间距问题。当两个对象呈现出上下关系时而且都具备margin属性的时候,此时由margin所造成的外边距将会出现叠加的现象。还是下面例子吧.Margin叠加问题#a{width:100px;height:100px;backgrou原创 2008-07-12 11:15:00 · 3234 阅读 · 2 评论 -
浅谈FF和IE对盒子模型的理解程度
FF跟IE浏览器的盒子模型解释完全符合W3C标准的设计目标,而IE6/7却有不同的表现。IE6/IE7/FF的最终宽度:左外边距+左边框宽+左内边距+宽度+右内边距+右边框宽+右外边距代码如下: 浅谈FF和IE对盒子模型的理解程度#a{width:300px;height:300px;background-color:#EEEEEE;bo原创 2008-07-12 10:50:00 · 1670 阅读 · 1 评论 -
高度自适应问题
注意:一个对象的高度是否可以使用百分比来显示,取决于对象的父级对象。这是由浏览器解析规则引发的高度自适应问题。代码中定义了html,body{margin:0px;height:100%;},是为了IE跟Firefox都能够实现高度自适应。在IE中。html对象默认为100%的高度,body却不是。而在Firefox中,html标签就不是100%高度。因此设置两个标签以保住在IE和FF下达到兼容性原创 2008-07-09 01:16:00 · 849 阅读 · 1 评论 -
二列固定宽度居中布局
二列固定宽度居中布局#layout{margin:0px auto;width:408px;}/*layout居中了,里面容器的也就居中显示。*/#left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}#r原创 2008-07-09 00:43:00 · 839 阅读 · 0 评论