第八十四节,css布局小技巧及font-awesome图标使用
CSS 技巧 布局 图标 font Awesome 使用
2023-09-14 08:58:24 时间
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; }
效果:
更多说明查看官方文档,一下是官方说明截图
相关文章
- css3 自动变大变小缩放按钮,css扩散效果
- CSS 水平居中
- CSS - 解决子级用css float浮动 而父级div没高度不能自适应高度
- 50个CSS技巧
- CSS基础,选择器
- 使用CSS制作文字环绕图片效果(文字内容包含<li>标签)
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- Knockout.Js官网学习(html绑定、css绑定)
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- [CSS] Purgecss to remove unused css
- [CSS] place-content = align-items + justify-content
- [CSS] Showing horizontal scrollbar always for the table
- 使用CSS样式表格式化XML文档
- css 居中的汇总
- css的绝对布局问题,怎么让子元素置于底部?
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 【视频】vue动态绑定css样式
- CSS使用技巧
- 为什么CSS这么难学?css核心知识点攻坚指南
- 10个非常实用的CSS技巧
- Atititi 软件界面gui开发之道 attilax著 1. 概览2 1.1. 编程语言的发展 asm>native>vm>script>dsl2 1.2. Ui的细化html ,css ,
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- CSS开发过程中的20个快速提升技巧
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
- springboot拦截了静态资源css,js,jpg,png等
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05
- 【CSS】css转换、css过渡、css动画_09
- CSS(三)&JS(一)