推荐5个DIV+CSS网页制作技巧

作者:课课家教育更新于： 2016-10-10 17:32:43

       当我们学习一门新知识的时候,往往会借鉴别人的经验和技巧，学习css也不例外。今天小编就为大家推荐5个跟div+CSS网页制作相关技巧，希望对初学者们有所启示。

　　一、在一行内声明CSS

　　作为新手的你是否喜欢这样声明CSS

　　h2 { 

　　font-size:18px; 

　　border:1px solid blue; 

　　color:#000; 

　　background-color:#FFF; 

　　}

　　之前小编也经常会这样写，但后来逐渐发现，这种写法看起来的确格式化，但不会在阅读上有任何帮助,视觉上还不如一行内声明来得爽快。所以小编在这里建议各位可尝试在一行内声明CSS，这样还可以让我们的文件变得更小呢！

　　上述例子我们可以这样声明

　　h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 

　　二、分块书写代码

　　这样书写代码可以让CSS更页面化，在出现问题时候可以最短时间内找到问题所在。就像下面这样：

　　#content {float:left;} 

　　#content p { … } 

　　#sidebar {float:left;} 

　　#sidebar p { … } 

　　#footer {clear:both;} 

　　#sidebar p { … } 

　　三、浏览器兼容问题

　　首先我们可以放弃兼容一些低版本的浏览器，如IE5及以下版本，只需针对现时流行的浏览器即可。这样一来就能省下很多时间了.

　　接着我们需要合理地使用CSS避免hack。这其中的典型要数新版的网易主页，里面竟然一个!important或者Hack都没有，可是在FF和IE里面显示效果都很好。大家不妨参考一下。

　　最后，我们还需注意包含在浮动元素容器内的内容都应该被设计为和容器保持一致。

       四、overflow的运用

       有时一些公司的注册协议都是很长，这就用到了overflow，可以把div的style里加上这个：overflow：auto

　　五、注意id和class的使用

       当一个样式在页面中多次使用时，不要用id，要用class。要使用js的时候，样式最好不要用id，因为id要留给js使用。

　　俗话说得好：细节在于观察，成功在于积累。要想成为一名出色的CSS高手，除了自身的努力之外，不断积累别人的经验技巧也显得相当重要。所以小编会继续更新更多关于DIV+CSS网页制作的技巧，欢迎大家继续关注我们的课课家网站！