国产综合精品-久久久久久成人毛片免费看-69久久夜色精品国产69-美国十次啦怡红院

Web前端知識(shí)

首頁(yè) > 免費(fèi) > Web前端知識(shí) >

匯仁智杰教你如何使用CSS實(shí)現(xiàn)小三角形效果

來(lái)源:北京匯仁智杰科技有限公司   時(shí)間:2016-04-14   點(diǎn)擊:

  在我們公司,負(fù)責(zé)WEB前端的人員,所有的代碼,不管是客戶的還是我們自己的,都是純手工書寫的代碼,因?yàn)檫@樣能夠讓代碼程序清晰明了,可重復(fù)利用性高,也降低被攻擊的風(fēng)險(xiǎn)。那么今天匯仁智杰小編就和大家分享下如何使用CSS實(shí)現(xiàn)小三角形效果,有需要的可以直接復(fù)制下面的代碼使用。
  在眾多的網(wǎng)頁(yè)效果中,都有小三角形效果的應(yīng)用,能夠增加特定應(yīng)用的美觀度,下面就給出一段實(shí)例代碼,里面介紹了兩種實(shí)現(xiàn)小三角頭效果的方式。代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>三種純CSS實(shí)現(xiàn)三角形的方法</title>
<style type="text/css">
.message-box
{
  position:relative;
  float:left;
  margin:80px 0 0 100px;
 width:240px;
  height:60px;
  line-height:60px;
  border:1px solid #000;
 text-align:center;
  color:#0C7823;
}
.triangle-border
{
  position:absolute;
  left:100px;
  overflow:hidden;
  width:0;
  height:0;
  border-width:10px;
  border-style:none dashed solid dashed;
}
.tb-border
{
  top:-10px;
 border-color:#000 transparent #000 transparent;
}
.tb-background
{
 top:-9px;
  border-color:transparent transparent #fff transparent;
}
/*字符*/
.triangle-character
{
  position:absolute;<br/  left:100px;
  overflow:hidden;
  width:26px;
  height:26px;
  font:normal 26px "宋體";
}
.tc-background
{
  top:-12px;
  color:#FFF;
}
.tc-border
{
  top:-13px;
  color:#000;
}
</style>
</head>
<body>
<div class="message-box"> <span> border 屬性實(shí)現(xiàn)</span>
  <div class="triangle-border tb-border"></div>
 <div class="triangle-border tb-background"></div>
</div>
<div class="message-box"> <span> ◆ 字符實(shí)現(xiàn)</span>
  <div class="triangle-character tc-border">◆</div>
  <div class="triangle-character tc-background">◆</div>
</div>
</body>
</html>
  小編給學(xué)習(xí)的朋友一個(gè)建議,如果說(shuō)你是從事這個(gè)行業(yè)的專業(yè)的人員,那么以后的代碼盡量的純手工去書寫,這樣可以有效的提高學(xué)習(xí)效率和深度,也能夠增加代碼的重復(fù)使用性的。

網(wǎng)絡(luò)營(yíng)銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號(hào)-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗(yàn)
  • 有網(wǎng)站建站隊(duì)伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗(yàn)
  • 致力于營(yíng)銷型網(wǎng)站建設(shè)
  • 始終堅(jiān)持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號(hào):京ICP備15021091號(hào)-1 版權(quán)所有:匯仁智杰