zoukankan      html  css  js  c++  java
  • 第八十四节,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;
    }

    效果:

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

  • 相关阅读:
    623. Add One Row to Tree 将一行添加到树中
    771. Jewels and Stones 珠宝和石头
    216. Combination Sum III 组合总数三
    384. Shuffle an Array 随机播放一个数组
    382. Linked List Random Node 链接列表随机节点
    向github项目push代码后,Jenkins实现其自动构建
    centos下安装Jenkins
    python提取批量文件内的指定内容
    批处理实现:批量为文件添加注释
    python抓取每期双色球中奖号码,用于分析
  • 原文地址:https://www.cnblogs.com/adc8868/p/5988134.html
Copyright © 2011-2022 走看看