第八十四節，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;
}

效果：

 

更多說明查看官方文檔，一下是官方說明截圖