当前位置: 主页 > 建站教程 >

CSS设计网站布局样式常用技巧

  CSS样式学习起来非常简单,使也有不少大家不熟悉的技巧,也许是因为用得比较少,时间久了就忘了。青锋建站给大家列出一些CSS常用的一些技巧性方法。

1. CSS属性尽量使用简写

      一般用CSS设定字体属性是这样做的:
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
但也可以把它们全部写到一行上去:
font: bold italic small-caps 1em/1.5em verdana,sans-serif
      真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

2、使用OOCSS编写规则

  OOCSS不是一个新语言或者是CSS框架,他只不过是一种新的写法,一种面向对象的容易重用的一种CSS规则,也是OOP的概念,从而降低了页面的加载时间,提高了网面的性能。这里关键的一点就是如何在页面中识别,创建和模块化可重用的对象,并在页面中任何需要的地方重用,并扩展其附加功能。
  使用OOCSS编写样式时,我们需要预先定义一些通用的CSS组件,然后通过在一个元素使用多个CSS类选择器的方法进行代码编写。
<style>
.bgc {background:#666699;}
.greybd {border:1px solid #ddd}
.fcolor:{#666;}
</style>
<div class="bgc greybd fcolor">青锋建站</div>

3、CSS box模型对老版本浏览器的兼容

      这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
#box
{
width: 100px;
border: 5px;
padding: 20px
}
这样调用它:
<div>...</div>
      这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的,让它们显示效果一致。
#box
{
width: 150px
}
#box div
{
border: 5px;
padding: 20px
}
这样调用:
<div><div>...</div></div>
这样,不管什么浏览器,宽度都是150点了。

4. CSS块元素居中对齐

      如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
#content
{
width: 700px;
margin: 0 auto
}

5、用CSS对齐文文章

      垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
CSS对齐文本方法时,垂直对齐使用line-height属性(注意line-height的值要和块级元素的高度相同,水平对齐使用text-align:center;
例如:<div stye="width:800px;height:60px;line-height:60px;text-align:center></div>
分享到:

最新发布MORE

  • 网站banner设计_网站建设
  • 网站设计时的风格创新与统一原则-青锋建站
  • 符合seo的网站建设标准
  • 单页网站制作的应用场景与设计原则
  • 网站打开速度优化与减少加载项-web开发
  • 网站前端页面加载过程
  • web前端代码的规范与精简-网站开发教程
  • 响应式网站建设设计方法-石家庄网站制作公司
  • 为什么响应式网站建设更节省投入-石家庄网站制作
  • 网站建设要有明确的定位与网站优化
  • 石家庄网站建设   石家庄网络公司   网站建设教程   网络营销技巧   石家庄SEO   石家庄网络营销   网站案例   青锋工作室
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:石家庄高新区汾河道69号
  • Copyright © 2016-2026 青锋建站 版权所有
  • 15632335515