第八十四节，css布局小技巧及font-awesome图标使用

css布局小技巧及font-awesome图标使用

图片鼠标放上去遮罩效果，显示文字

当鼠标放上去时

/*最外层div*/
.a{
    width: 384px;
    height: 240px;
    background-color: #ff4e37;
    position: relative;
}
/*插入图片的div*/
.b{
    width: 384px;
    height: 240px;
    background-color: #ff4e37;
    overflow: hidden;
}
/*遮罩层div*/
.c{
    width: 384px;
    height: 240px;
    background-color: #010008;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
/*鼠标放上去效果*/
div .c:hover{
    background-color: #010008;
    opacity: 0.5;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 240px;
}


<div class="a">
    <div class="b">
        <img src="53d.jpg">
    </div>
    <div class="c">
        <samp>美女图片</samp>
    </div>
</div>

 

css绘制尖角效果

在网页中，有很多地方会用到尖角，尖角可以是图片的，也可以用css来绘制

用一个div来绘制尖角

.a{
    /*设置边框*/
    border-top: 30px solid red;
    border-right: 30px solid black;
    border-bottom: 30px solid green;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

效果：颜色可以根据自己的需要调整

 

将其他不需要的3个尖角颜色改成透明的，一个尖角就形成了

.a{
    /*设置边框*/
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

效果：

 

另一种效果

.a{
    /*设置边框*/
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

  效果：

 

 

还可以结合伪类选择器:hover来设置鼠标动作尖角

.af{
    width: 100px;
    height: 50px;
    background-color: #ff563a;
}
.a{
    /*设置边框*/
    border-top: 10px solid green;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /*将区块转换成内联块*/
    display: inline-block;
    margin-top: 20px;
    margin-left: 10px;
}
.a:hover{
    /*设置边框*/
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid green;
    border-left: 10px solid transparent;
    /*将区块转换成内联块*/
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
}

<div class="af">
    <div class="a"></div>
</div>

效果：鼠标没放上去时尖角向下，鼠标放上去尖角向上

 

 

font-awesome图标使用

font-awesome图标是一个css的插件包，是一个以字体文件方式集成的图标，首先要下载插件包

中文网站http://fontawesome.dashgame.com/

英文网站http://fontawesome.io/icons/

下载好后解压，会得到如下文件

 

将font-awesome-4.6.3 文件夹放入html工程目录里

然后在html页面引入font-awesome-4.6.3 文件夹里的css样式

<link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css"/>

在要使用的元素标签class="fa fa-图标名称"，如：class="fa fa-envelope-o"

<div>
    <p><span class="fa fa-envelope-o"></span>邮件</p>
</div>

这样图标就展现出来了，如果想改变颜色，可以自定义一个css文件来改变

p .fa-envelope-o{
    color: #ff1029;
}

效果：

 

更多说明查看官方文档，一下是官方说明截图