CSS基础1

本节大纲

  • CSS背景
  • 透明
  • 对齐
  • display
  • 边框、圆角

课程内容

CSS背景

什么时候用图片,什么时候用背景图?

对于固定不变的内容,如图标等用背景图。对于可变的内容,图片是和内容相关的,用图片

  • 背景颜色

background-color: #ff00ff;
background-color: rgba(0,0,0,0.5);

padding会有背景色,margin没有 例子

例子:透明背景色

  • 背景图片

  background-image: url(http://xxxx.jpg)
  background-position: 0px 0px;
  background-size: 30px 30px;  /* ie9及以上能用*/
  background-repeat: no-repeat; /*repeat, repeat-x, repeat-y*/

例子:background-size

  • css sprite 在线工具

    把多个背景图片合成一张,通过background-position定位图片,减少网络请求

透明

  • opacity:0~1

img
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

例子: 透明

对齐

  • 水平
    • 文本对齐 text-align: left(左对齐) center(文本居中) right(右对齐) justify(两边对齐)
    • div水平居中 margin: 0 auto (注意声明doctype);

div {
    margin: 0 auto;
}

例子: 居中

  • 垂直
    • 文本垂直居中: 有两种方法,1)另行高line-height等于外层容器高度height; 2)上下padding设置相等。例子:文本垂直
    • 图像垂直居中:

方式1:

//ie8及以上使用
display: table-cell;
vertical-align: middle;

方式2:在内层容器内加一个空元素。例子:图像垂直

.item2:before{
  content: '';
  display:inline-block;
  height: 100%;
  vertical-align: middle;
}
.item2 img{
  vertical-align: middle;
}

方式3: js处理,设置上下外边距等高

display

用于设置元素的显示类型,常用的值有: none, inline, inline-block, block, table-cell;

  • none: 隐藏该元素,不占用文档流
  • inline: 以行内元素的形式展示
  • inline-block: 行内块元素
  • block: 块级别元素
  • table-cell: 以表格方式展示,常用于垂直居中

例子:display

display:none和visibility:hidden区别:

边框

设置边框样式和边框圆角

.div1{
    border: 1px solid #ccc;
}
.div2{
    border-left: 1px solid red;
    /*
    border-top: 1px solid red;
    border-right: 1px solid red;
    border-bottom: 1px solid red; 
     */
}

例子:边框

圆角

.div3{
    border-radius: 10px 6px 3px 1px;
    /*
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     */border-radius: 4px;*/
}

练习

  1. 做一个导航栏

课下练习

  1. 实现下图物品展示,鼠标放置显示白色透明遮罩