CSS使用技巧(一)

在使用CSS之前我们要了解下,什么是CSS?

CSS 是 Cascading Style Sheets的简写,翻译中文叫层叠样式表,css样式定义如何显示html元素。简单的说就是用来定义html的样式,达到一个对html的排版,设计的目的。

下面是我整理的一些工作中经常用到的一些CSS使用技巧,作为我自己的一个学习和工作的总结,希望对大家也有一个帮助。

1、文本的水平居中

将一段文字置于box容器的水平中点,只要设置box容器的text-align属性即可:

text-align:center

2.文字的的垂直居中

比如如下html布局,我们垂直box容器中的文字

<div class='container'>我是一个好学的程序员</div>

我们的CSS样式只需要这样写就可以让文字垂直居中了

.container{
    height:20px;
    line-height:20px;
 }

3.box容器的水平居中

假设还是如一下html布局

<div class='container'>我是一个好学的程序员</div>

我们的css样式只需要给box容器一个宽度,然后margin水平方向的值为auto。

.container{
    width:100px;
   margin:0 auto;
}

4.导航栏

一般网站的布局都会有一个导航栏,导航栏这里介绍2中方法。我们先创建一个html代码。

<ul>
   <li>首页</li>
   <li>产品</li>
   <li>新闻</li>
</ul>

第一种方法就是把<li>标签的display属性设置为:inline-block,这个方法实现的效果图标签之间会有一点缝隙。

ul li{
  display:inline-block;
}

第二种方法是通过浮动的方法,浮动的方法就不会在标签之间出现缝隙。

ul li{
   float:left
}



本篇文章对你有所帮助的话,可以请作者喝咖啡:

发表评论

电子邮件地址不会被公开。 必填项已用*标注