第八十四节，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;
}

效果：

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

转载于:https://www.cnblogs.com/adc8868/p/5988134.html

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

第一百八十四节，jQuery-UI，验证注册表单
jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...
火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列第二十四节:小项目实训《绝命沙滩》
<使用Cocos2d-x 开发3D游戏>系列在线课程第二十四节:小项目实训<绝命沙滩> 视频地址:http://edu.csdn.net/course/detail/1330 ...
matlab练习_MATLAB教程-台大郭彦甫-第十四节，含练习答案
14-回归与内插一.Polynomial curve fitting(多项式曲线拟合) (一)Simple Linear Regression(简单线性回归) 1.A bunch of data p ...
大白话5分钟带你走进人工智能-第十四节过拟合解决手段L1和L2正则
第十四节过拟合解决手段L1和L2正则第十三节中,我们讲解了过拟合的情 ...
第十四节课特种障碍赛
第十四节课特种障碍赛一.齐步踏步想不想教官呀!"想"教官今天过来又给小朋友们带来了好玩的游戏,你们想不想玩"想"今天我们要进行特种障碍赛的比赛,首先我们先复 ...
大白话5分钟带你走进人工智能-第二十四节决策树系列之分裂流程和Gini系数评估(3)...
第二十四节决策树系列之分裂流程和Gini系数评估(3) 上一节中我们讲解了决策树的数学表达形式,本节的话我们讲解决策树的分裂流程以及分裂条件的评估.我们基于决策树的递归表达式上: ...
第十四节 OSAL工作原理
第十四节 OSAL工作原理蓝牙为了实现同多个设备相连,或实现多功能,也实现了功能扩充,这就产生了调度问题.因为,虽然软件和协议栈可扩充,但终究最底层的执行部门只有一个.为了实现多事件和多任 ...
[转载]三十四个有趣的小故事
[转载]三十四个有趣的小故事一. 用人之道去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀.但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙.弥乐佛 ...
风炫安全WEB安全学习第四十四节课敏感信息泄漏
第四十四节课敏感信息泄漏敏感信息泄漏 0x01 漏洞简介敏感数据包括但不限于:口令.密钥.证书.会话标识.License.隐私数据(如短消息的内容).授权凭据.个人数据(如姓名.住址.电话等)等 ...

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

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

最新文章

热门文章