专注高端网站建设!

公司分布:济南槐荫/滨州邹平/烟台芝罘

1对1的贴心服务 13405436529

新闻动态

  • 十则关于网站制作中的CSS技巧

  • 建站知识 文章更新 2011-3-10 20:42:13   

    点击:


   我是网站优化人员,经常的会听到网站建设的工程师说CSS,很好奇是什么东东,就跟他们问了一下,回来整理了这个滨州邹平网站制作中的常用的CSS技巧,我想在网站制作中都会用到。
 1. Block和inline元素对比
  所有的HTML元素都属于block和inline之一。
  block元素的特点是:
  总是在新行上开始;
  高度,行高以及顶和底边距都可控制;
  宽度缺省是它的容器的100%,除非设定一个宽度
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
  相反地,inline元素的特点是:
  和其他元素都在一行上;
  高,行高及顶和底边距不可改变;
  宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
  用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性
  呢?
  让一个inline元素从新行开始;
  让块元素和其他元素保持在一行上;
  控制inline元素的宽度(对导航条特别有用);
  控制inline元素的高度;
  无须设定宽度即可为一个块元素设定与文字同宽的背景色。
  2. 再来一个box黑客方法
  之所以有这么多box黑客方法,是因为IE在6之前对box的理解跟别人都不一样,它的宽度要包含边线宽和空
  白。要想让IE5等同其他浏览器保持一致,可以用CSS的方法:
  padding: 2em;
  border: 1em solid green;
  width: 20em;
  width/**/:/**/ 14em;
  第一个宽度所有浏览器都认得,但IE5.x不认得第2行的宽度设置,只因为那一行上有空白的注释符号(多
  么蠢的语法分析!),所以IE5.x就用20减掉一些空白,而其他浏览器会用14这个宽度,因为它是第2行,
  会覆盖掉第1行。
  3. 页面的最小宽度
  min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正
  确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
  <div> 放到 <body> 标签下,然后为div指定一个类:
  <body>
  <div class="container“>
  然后CSS这样设计:
  #container
  {
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
  }
  第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档
  不太正规。它实际上通过Javascript的判断来实现最小宽度。
  同样的办法也可以为IE实现最大宽度:
  #container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200?
  ”1200px“ : ”auto";
  }
  4. IE与宽度和高度的问题
  IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如
  果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根
  本等于没有设置宽度和高度。
  比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
  .box
  {
  width: 80px;
  height: 35px;
  }
  html>body .box
  {
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 35px;
  }
  所有的浏览器都可以使用第一个box设置,但IE不认得第2段设置,因为其中用到了子选择器命令。第2个设
  置更特殊些,所以它会覆盖掉第1个设置。
  5. 字体变形命令
  text-transform 命令很有用,它有3个值:text-transform: uppercase, text-transform: lowercase 和
  text-transform: capitalize。第1个会把文字变成全大写,第2个变成全小写,第3个变成首字母大写。这
  对拼音文字非常有用,即使输入时有大小写错误,在网页上也看不到。
  6. IE中图片文字消失的问题
  有时会遇到文字或背景图突然消失的问题,刷新一下又出现了,这在靠近漂浮元素时更容易发生(注:没
  见过)。此时,可以为消失的元素设定: position: relative ,如果不行,再考虑为这些元素指定一个
  宽度试试。
  7. 不可见文字

第 1 2 页

http://www.gongyingwl.com/

山东共赢网络科技有限公司是一家专注高端网站建设开发的技术型网络公司,以领先的设计水平和技术实力,打造行业品牌、树立卓睿形象。公司专注公司网站建设,邹平网站设计,做网站公司,网站设计公司,网站制作公司,网站建设公司,邹平网站制作,邹平网站建设。http://www.gongyingwl.com/

全部新闻    

联系共赢邹平网站制作

邹平网站制作   地址1:滨州市邹平县山南新区新邹时代广场
地址2:烟台市莱山区万泰麓溪公馆13-B (观海路鹿鸣北区对面)
邹平网站制作   13405436529
邹平网站制作   24小时服务:13405436529
  邹平网站制作
Copyright 2004 - 2018 邹平网站制作_网站制作公司_邹平网站制作公司_做网站公司_邹平网站设计_网站设计公司_邹平网站设计公司_邹平网站建设_网站建设公司_公司网站建设_邹平网站建设公司_邹平共赢网络科技有限公司 All Right Reserved. 鲁ICP备11043023号 邹平市市场监督管理局企业主体身份公示
回到顶部