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

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

发布时间:2017-10-09 10:25:46 作者:admin
  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

  • 外贸网站源码建站程序_青锋建站
  • 外贸建站如何增加询盘_青锋建站
  • html+css学习制作静态网页
  • 如何做好外贸网站建设_青锋建站
  • 外贸网站建设时域名这样选择才好_青锋建站
  • 论外贸网站建设的重要性_青锋建站
  • 外贸网站建设这样做才好_青锋建站
  • 网站建设中用于WEB开发的几种编程语言_石家庄青锋建站
  • 为什要选择PHP编程语言进行网站开发_石家庄青锋建站
  • 网站banner设计_网站建设
  • 石家庄网站建设   石家庄网络公司   网站建设教程   网络营销技巧   石家庄SEO   建站分站   石家庄网络营销   网站案例   青锋工作室
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:石家庄高新区汾河道69号
  • Copyright © 2016-2026 青锋建站 版权所有
  • 15632335515