有關首行首字下沉的實現原理及代碼

來源:互聯網
上載者:User

首字下沉原理就是在樣式中添加尾碼即可。還有一個是對第一行文字進行單獨樣式。給這段標籤添加尾碼即可,感興趣的朋友可以參考下,希望對大家有所協助

 

下面是兩個個小技巧,一個是很多報刊中的首字下沉,其實很簡單,原理就是在樣式中添加尾碼即可。還有一個是對第一行文字進行單獨樣式。給這段標籤添加尾碼即可。這兩個小技巧分別都相容低版本。非常實用的小技巧喲。下面是一段小例子。
css代碼:
 

複製代碼代碼如下:
.dyfirst,.dyfirst2,.dyfirst3 {
    width:300px;
    border:1px solid #ddd;
    padding:5px;
    font-size:12px;
    margin:5px 0;
}
.dyfirst:first-line {
    color:red;
}
.dyfirst:first-letter {
    font-size:350%;
    font-weight:bold;
    color:#000;
    float:left;
}
.dyfirst2:first-line {
    letter-spacing:-2px;
}
.dyfirst3{
    text-indent:2em;
}


html代碼:

複製代碼代碼如下:
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS首字下沉</title>
</head>
<body>
<div class="menglong">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class="menglong">首字下沉及第一行變色首字下沉及第一行變色首字下沉及第一行變色首字下沉及第一行變色首字下沉及第一行變色首字下沉及第一行變色</div>
<div class="menglong2">首行縮排,距離更緊密的.首行縮排,距離更緊密的首行縮排,距離更緊密的首行縮排,距離更緊密的首行縮排,距離更緊密的首行縮排,距離更緊密的</div>
<div class="menglong3">段落首行空兩格的。段落首行空兩格的。段落首行空兩格的。段落首行空兩格的。段落首行空兩格的。段落首行空兩格的。段落首行空兩格的。</div>
</body>
</html>

 

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。