【CSS教程】CSS制造一个向各个偏向延展box的教程

发布时间:2017-04-13 21:02 来源:互联网 以后栏目:网页设计教程

   下面电脑高手网小编给大年夜家摘录一篇CSS制造一个向各个偏向延展box的教程,欲望可以给正在进修CSS制造的同伙一些赞助或建议。

   在HTML中, 假设过你没有指定一个肯定的宽度的话, 块级元素本身就会在垂直偏向上延展. 想象一个无序清单. 这个清单会本身扩大来适应它一切的清单位素. 假设用户在他们的浏览器中增长了字体大年夜小, 清单会在垂直偏向上延展, 来适应变大年夜的内容. 有时辰, 感到仅仅在垂直偏向延展是异常局限的, 假设程度偏向也能和垂直偏向一样由于用户增长字体大年夜小而自延展那就更好了.

  概要

  假设你用过Firefox 3 Beta的话, 你会发明它曾经会主动如许处理了. 在Firefox 3增长大年夜小不只仅是增长字体大年夜小. 它增长一切元素的大年夜小. 如许看起来异常天然和漂亮. 然则虽然Firefox的市场份额在赓续上浮, 然则我们照样不克不及期望Firefox的调剂大年夜小功能来杀青用户需求.

  我测验测验着解释若何制造一个有以下特点的各偏向延展box:

  能在一切主流浏览器中任务.

  在垂直和程度偏向上延展.

  用一个伶仃的背景图片.

CSS若何制造一个向各个偏向延展box?  电脑高手

  这有些苛求, 特别是要应用背景图片. 它须要用到一种 CSS精灵技巧(图片的不合区域用在不合的处所)和滑动门技巧(依附以后的大年夜小显示不合长度的图片)的结合办法. 网页教授教化网

  让box程度可延展

  有一个简单的办法让box程度可延展: 用em来定义你的宽度. 例如:

  .box {

  width: 35em;

  margin: 50px auto;

  } 网页教授教化网

  在这里margin属性只是为了举例, 让它程度居中并且总是和浏览器顶边有必定间隔. 网页教授教化网

  思虑图片定位

  在这个例子中, 这是个圆角box, 有点投影, 还有点外部暗影. 这就意味着这个box的四个角明显是不合的. 这里的挑衅是图片是不克不及延展的.我们须要一种办法, 让四个不合的圆角图片分别应用到box的四个角上.

  我们还须要接合它们让改变无明显界线, 我们还要测验测验着用一个背景图片完成, 来让它尽能够失效.

  下面是一张你关怀的我们须要做甚么的表示图, box将被拼接, 我把它们分开, 你就可以看到一切的box了.

CSS制造一个向各个偏向延展box的教程

  当在创建背景图片时, 要推敲大年夜小, 你的背景图片越大年夜, 在不破坏构造的情况下, 你就可以延展的越大年夜. 示例中的背景是700像素宽它能在4 - 5种字体大年夜小下任务. 然则假设逾越了这个尺寸, 它终究会分别开.

  编写box

  固然, 我们要用XHTML来尽能够的杀青语义化. 这意味着不克不及应用额外的不放置内容而纯粹为了设计的标签. 不幸的是, 用四个box来拼接一个box时, 这没办法完成. Webjx.Com

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、