CSS提高主要内容

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,CSS,提高主要内容,背景图像控制,链接样式控制,列表样式控制和创建导航条,布局设计,背景图像基础（,1,）,垂直渐变就可以用,渐变细条图像,水平平铺的方式,页面顶部纯装饰性的图像可以采用,Div,背景图像的形式,背景图像基础（,2,）,需要在导航或者按钮前加上装饰性图像,表示水平方向向左对齐，垂直方向居中,圆角框技术（,1,）,HTML,文档结构,PS,中切片输出,圆角框技术（,2,）,底部,的,图片做背景，放在,DIV,底部,内部内容不要靠近边缘，设置内部距离的,padding,值，,4,个属性值,按照上,、右、下、,左,顺序,圆角框技术（,3,）,圆角框技术（,4,）,这个,DIV,框有多少高度？,链接样式控制,简单的链接样式控制,在设置链接时不能违反这个顺序，否则会导致效果失效,创建按钮和翻转（,1,）,悬停时背景变成深蓝色？,创建按钮和翻转（,2,）,列表样式控制和创建导航条,基本列表样式,创建垂直导航条,在导航条中突出显示当前页面,创建水平导航条,基本列表样式,表示中部居中,创建垂直导航条（,1,）,这样操作会引起后一项顶部和前一项底部线条重叠，怎么办？,创建垂直导航条（,2,）,减少后第一项顶部的边线没有了？,如何创建水平导航条？,创建水平导航条,父元素没有内容会收缩，隐藏背景，所以设置浮动,设置每项之间的分割线，第,1,项的分割线要注意去掉,布局设计,让设计居中,基于浮动的布局,固定宽度、流体和弹性布局,Faux,列,布局设计小结,让设计居中,使用自动空白边,使用定位和负值空白边让设计居中,方法,1,：使用自动空白边,定义容器,DIV,的宽度,将水平空白边设置为,auto,在屏幕上水平居中,自动空白边的补充,浏览器不支持自动空白边，怎么办？,先利用,text-align,属性让所有的页面内容都居中,然后再将某些局部需要调整对齐方式的内容进行重新调整,注意：,这是一种补充手段，可以实现居中的效果,方法,2,：使用定位和负值空白边,Left:50%,会将容器的左边缘定位在页面的中间,此时可以,应用一个负值的空白边,，宽度为容器的,1/2,，这样就可以让它在屏幕居中,基于浮动的两列布局（,1,）,基于浮动的两列布局（,2,）,页面文档结构（,HTML,）,主内容要先出现，所以内容,div,放在前面,为解决两列可能引起的错位，可以考虑两列不同方向的浮动,基于浮动的两列布局（,3,）,1.,为确保页脚能正确定位在这两个浮动的元素下面，需要清理页脚,2.,导航内容不要顶到容器的边缘，要留出空间，可以设置,padding,，为解决,ie,框模型问题，,padding,设置在,Li,（导航具体内容）中,3.,主内容也要注意不要顶到容器的右边缘，可以设置,padding-right,，,padding,设置在具体内容标记中,基于浮动的三列布局（,1,）,基于浮动的三列布局（,2,）,在两列布局的,CSS,基础上进行改造,基于浮动的三列布局（,3,）,两列布局中主内容的,padding,设置,去掉主内容上的,padding,，将,padding,应用到次要内容上,这样,做能够,让,布局,更有条理,布局类型,固定宽度的布局是以像素来控制大小，是当前比较常见的布局。,固定宽度的布局优点：,易于控制,使用人群多,固定宽度的布局缺点：,分辨率不能自适应,浏览器的文本字符大小改变时会显得拥挤，而且行长短，影响阅读,解决方案：,流体布局,弹性布局,流体布局（,1,）,流体布局尺寸是使用百分比而不是像素。,优势：,会随着窗口的大小变动自动伸缩，非常高效地使用空间，最好的流体布局甚至不会引起用户的注意。,缺点：,1,、,窗口太小时会造成行太窄，很难阅读，要添加以像素和,em,为单位的,min-width,，从而防止布局变得太窄。,2,、,跨越整个浏览器的窗口，会造成行太长，很难阅读。可以用宽度的,百分比控制、设置填充和空白边等方式,来防止这个问题。,流体布局（,2,）,固定宽度的三列浮动布局,流体布局,两列加起来后剩下,2%,作为,视觉隔离带,流体布局（,3,）,处理内容（,content,）内部的主内容和次要内容的宽度以及视觉隔离带,要让次要内容和导航栏同样宽：,23/75100%=31%,内容列之间隔离带宽度为,3%,剩下的主内容就是,66%,。,流体布局（,4,）,流体布局在不同分辨率下的效果,弹性布局（,1,）,弹性布局尺寸相对于字号（不是浏览器的宽度），通过,em,设置宽度，保证字号增加时整个布局随之扩大，增加可阅读性。,缺点：,不能充分利用可用空间。,文本字号增大时会加大整个布局，导致水平滚动条的出现，为防止这个问题，要在主体标记上添加,100%,的,max-width,，但是部分浏览器不支持这个属性。,注意：,弹性布局的技巧就是要设置基字号，让,1em,大致相当于,10,像素。,弹性布局（,2,）,弹性布局比流体布局容易。,弹性布局的,技巧,就是要设置基字号，让,1em,大致相当于,10,像素。,大多数浏览器的默认字号是,16,像素，,10,像素相当于,16,像素的,62.5%,弹性布局（,3,）,固定宽度的三列浮动布局,转变成弹性布局时只要进行换算,弹性布局（,4,）,弹性,-,流体混合布局,设置,max-width,，需要浏览器支持，保证了窗口的宽度不会产生水平滚动条,流体和弹性图像（,1,）,流体和弹性图像（,2,）,1,：跨越大区域的图像（比如站点也没或品牌区域中的图像）可以采用背景图像（,background,）而不是图像元素（,img,）,流体和弹性图像（,3,）,2,：如果是图像元素（,img,），就设置容器元素宽度为,100%,并且将,overflow,属性设置为,hidden,这样不会随着布局伸缩,流体和弹性图像（,4,）,3,：如果避免图像元素（,img,）进行水平和垂直的剪裁，设置图像的百分数宽度，并添加与图像宽度相同的,max-width,以避免像素失真。,faux,列（,1,）,faux,列（,2,）,为了创建导航列 背景与页面高度相同可以创建一个伪列，在这个占据整个布局高度的元素里面应用重复的背景图像，这个就是,faux,列（,Dan Cederholm,提出，著有一本,无懈可击的,Web,设计,）,这种方法适合固定宽度的布局，如果要设置流体布局的,faux,列就比较复杂了，因为要考虑列的尺寸和位置随浏览器窗口而变化，可以用百分比对背景图像进行定位,布局小结,主要学习了两列和三列的固定宽度的布局,流体布局和弹性布局,Faux,列的效果,使用,CSS,布局时，这类技术有很多，以后可以不断深入学习！开发人员面对的大问题就是用户的浏览器不一致，为了解决这些问题，创建了各种招数和过滤器，大家可以继续学习下,Categories,Lorem Ipsum(1),Uncategorized(4),作业回顾,