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

效果：

?

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

轉載于:https://www.cnblogs.com/adc8868/p/5988134.html

總結

以上是生活随笔為你收集整理的第八十四节，css布局小技巧及font-awesome图标使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。