CSS實現標簽效果的示例代碼

  發布時間:2019-10-12 16:10:57   作者:打醬油12138   我要評論
這篇文章主要介紹了CSS實現標簽效果的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

需求場景

當前端頁面需要展示皮膚是否在使用、書籍是否閱讀中、文件是否下載完成時,這時最直接的效果就是在盒子(div)左/右上角顯示相應標簽,不僅美觀且實用。

這里以制作圖片右上角標簽為例,用CSS以最簡單、直接的方式實現效果。

實現效果

 實現思路

  1. 準備兩個div(一個父容器,一個標簽div),分別設置寬高,并設置相對布局。
  2. 使標簽div居于父容器右上角,設置內容居中顯示,設置背景和字體顏色,旋轉該div。
  3. 將父容器設置overflow: hidden,實現父容器對標簽div超出部分的遮擋,即實現了標簽效果。

結構展示

 

代碼示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實現標簽效果</title>
<style>
/* 外層div
   設為relative
   設置overflow: hidden實現對超出部分的 遮擋效果
 */
.img-box {
	width: 200px;
	height: 400px;
	margin: 40px;
	overflow: hidden;
	position: relative;
}
/* 外層div
   設為absolute,加以top、right等屬性調整標簽位置
   設置height、line-height、text-align控制標簽內容水平垂直居中
   設置transform,旋轉標簽45度
 */
.tag {
	width: 140px;
  	height: 25px;
  	top: 16px;
  	right: -40px;
  	text-align: center;
  	line-height: 25px;
  	transform: rotate(45deg);
	position: absolute;
	color: white;
	background: #4188ab;
}
/* 圖片展示 設為block */
.img {
	display: block;
	width: 200px;
	height: 400px;
}
</style>
</head>

<body>
<div class="img-box">
	<div class="tag">正在使用</div>
	<img class="img" src="..."/>
</div>

</body>
</html>

 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • css選擇器設置標簽樣式的實例代碼

    這篇文章主要介紹了css選擇器設置標簽樣式的實例代碼,需要的朋友可以參考下
    2018-11-22
  • css選擇器中有小數點的標簽獲取方法

    這篇文章主要介紹了css選擇器中有小數點的標簽獲取方法,需要的朋友可以參考下
    2018-03-26
  • 淺談html5標簽css3的常用樣式

    下面小編就為大家帶來一篇淺談html5標簽css3的常用樣式。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-20
  • CSS3的幾個標簽速記(推薦)

    下面小編就為大家帶來一篇CSS3的幾個標簽速記(推薦)。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-07-07
  • 純CSS實現Tab切換標簽效果代碼

    這篇文章主要為大家介紹了純CSS實現Tab切換標簽效果代碼,通過css樣式設置實現tab標簽切換功能,非常簡單實用,需要的朋友可以參考下
    2015-09-23

最新評論

2019开奖结果