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:;
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;
}

效果:

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

第八十四节,css布局小技巧及font-awesome图标使用的更多相关文章

  1. 第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册

    第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...

  2. css布局小技巧 2016.03.06

    偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...

  3. 第一百八十四节,jQuery-UI,验证注册表单

    jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...

  4. 第二百八十四节,MySQL数据库-MySQL触发器

    MySQL数据库-MySQL触发器 对某个表进行[增/删/改]操作的前后如果希望触发某个特定的行为时,可以使用触发器,触发器用于定制用户对表的行进行[增/删/改]前后的行为. 1.创建触发器基本语法 ...

  5. 大白话5分钟带你走进人工智能-第十四节过拟合解决手段L1和L2正则

                                                                               第十四节过拟合解决手段L1和L2正则 第十三节中, ...

  6. 第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

    第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...

  7. 第三百八十五节,Django+Xadmin打造上线标准的在线教育平台—登录功能实现,回填数据以及错误提示html

    第三百八十五节,Django+Xadmin打造上线标准的在线教育平台—登录功能实现 1,配置登录路由 from django.conf.urls import url, include # 导入dja ...

  8. 第三百五十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—数据收集(Stats Collection)

    第三百五十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—数据收集(Stats Collection) Scrapy提供了方便的收集数据的机制.数据以key/value方式存储,值大多是计数 ...

  9. 第三百四十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—craw母版l创建自动爬虫文件—以及 scrapy item loader机制

    第三百四十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—craw母版l创建自动爬虫文件—以及 scrapy item loader机制 用命令创建自动爬虫文件 创建爬虫文件是根据scrap ...

随机推荐

  1. Mybatis学习笔记(三) 之Dao开发

    使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法,常用还是Mapper接口开发. SqlSession的使用范围 public class test1 { ...

  2. 多目标遗传算法 ------ NSGA-II (部分源码解析)介绍

    NSGA(非支配排序遗传算法).NSGA-II(带精英策略的快速非支配排序遗传算法),都是基于遗传算法的多目标优化算法,是基于pareto最优解讨论的多目标优化. 在官网: http://www.ii ...

  3. [DP之多重背包优化方法]

    首先我们看一道有趣的题目 然后这道题很快想到是一个多重背包和无限背包混合体 那么我们就以这道题 来讨论一下多重背包的优化 首先我们看看朴素打法 memset(F,,]=; ;i<=N;i++) ...

  4. 我喜欢的快捷键 webstorm

    1.打开设置  ctrl+alt+s 2.重命名 rename  ctrl+r

  5. textfile 属性

    //设置textfile的Placeholder的颜色和字体大小 nameText.attributedPlaceholder = NSAttributedString.init(string: &q ...

  6. [UWP小白日记-2]SQLite数据库DOME

    数据库说简单点就是增删改查,但是对新手来说也是要爆肝的.作为一个新手爆肝无数次啊, 血的教训啊现在UWP的教程又少,说多了都是泪.留下来免得以后又爆肝.还有:一定要写注释!一定要写注释!一定要写注释! ...

  7. span标记

    span标记为内联元素,本身布局有宽高所以要给他个属性 display:block; 转成快元素.

  8. Visual Studio 2010 使用 ankhsvn

    之前用的 Windows XP + Visual Studio 2010 + ankhSvn,其中ankhSvn安装完后直接可用, 后来系统换成Windows10后安装ankhSvn,Extentio ...

  9. 🐒-mysql(1)

    Mac 终端启动mysql 本文下载的mysql版本为:5.7.17.MySQL Workbench版本为:5.2.47(后面会提及如何选择下载版本) 一.下载MySQL 1.1.访问http://w ...

  10. http请求 302解决方法

    http请求+302解决方法 相关文章 当前,许多站点的部署方式都对自身的性能产生了消极影响,而网站的所有者并没有意识到这个问题.我们今天针对性的讨论以下几个常见的影响网站性能的瓶颈,观察其变化趋势, ...