大家好，又见面了，我是全栈君。
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; }
效果：
更多说明查看官方文档，一下是官方说明截图
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/108827.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
