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

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

大家好,又见面了,我是全栈君。

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

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

第八十四节,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>

效果:第八十四节,css布局小技巧及font-awesome图标使用颜色可以根据自己的需要调整

 

将其他不需要的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>

效果:第八十四节,css布局小技巧及font-awesome图标使用

 

另一种效果

.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>

  效果:第八十四节,css布局小技巧及font-awesome图标使用

 

 

还可以结合伪类选择器: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>

效果:第八十四节,css布局小技巧及font-awesome图标使用第八十四节,css布局小技巧及font-awesome图标使用鼠标没放上去时尖角向下,鼠标放上去尖角向上

 

 

font-awesome图标使用

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

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

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

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

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

 

将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图标使用

 

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108827.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Webstorm激活码 2021【2021.7最新】

    (Webstorm激活码 2021)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • ACT初代奥特曼_ac自动机上dp

    ACT初代奥特曼_ac自动机上dp上帝手中有 N 种世界元素,每种元素可以限制另外 1 种元素,把第 i 种世界元素能够限制的那种世界元素记为 A[i]。现在,上帝要把它们中的一部分投放到一个新的空间中去建造世界。为了世界的和平与安宁,上帝希望所有被投放的世界元素都有至少一个没有被投放的世界元素限制它。上帝希望知道,在此前提下,他最多可以投放多少种世界元素?输入格式第一行是一个整数 N,表示世界元素的数目。第二行有 N 个整数 A[1],A[2],…,A[N]。A[i] 表示第 i 个世界元素能够限制的世界元素的编号。输出格式

  • vc 识别移动硬盘 U盘,本地硬盘[通俗易懂]

    vc 识别移动硬盘 U盘,本地硬盘[通俗易懂]vc 识别移动硬盘 U盘,本地硬盘

  • 导航条的制作「建议收藏」

    导航条的制作「建议收藏」制作成品模型图:代码:一、写代码前需要准备的:万事先写(css)结构,把结构搭建好再开始写(css)样式;制作导航条一般需要用到<ul><li></li>&l

  • Lytro光场相机上手视频

    Lytro光场相机上手视频这会儿大家都知道光场相机Lytro了,用一个词来形容的话,应该是“新颖”,你在生活中肯定很难想到相机还可以这么玩。相信你第一印象应该是其微小的体积。如果要你坦率地说,毫无疑问你希望得到一个单反。其细小的身躯,精细的做工让我们想到了iPodNano和iSight,而其桌面的软件当前也只支持Mac,Windows版本正在开发中。视频1…

    2022年10月22日
  • 2021最新Python全栈工程师学习路线(初级+高级+大神)「建议收藏」

    2021最新Python全栈工程师学习路线(初级+高级+大神)「建议收藏」2019最新Python全栈工程师学习路线(初级+高级+大神)IT行业,技术要比学历、年龄、从业经验更为重要,技术水平直接决定就业薪资,想要学好python,首先要先了解精通Python语言基础、Pythonweb开发、Python爬虫、Python数据分析这四大方面。零基础学习需要要从如下几个阶段入手:阶段一:熟练掌握Python多线程并发编程技术,可以编写爬虫程序和语音识别软件…

    2022年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号