萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 有關首行首字下沉的實現原理及代碼
有關首行首字下沉的實現原理及代碼
首字下沉原理就是在樣式中添加後綴即可。還有一個是對第一行文字進行單獨樣式。給這段標簽添加後綴即可，感興趣的朋友可以參考下，希望對大家有所幫助
下面是兩個個小技巧，一個是很多報刊中的首字下沉，其實很簡單，原理就是在樣式中添加後綴即可。還有一個是對第一行文字進行單獨樣式。給這段標簽添加後綴即可。這兩個小技巧分別都兼容低版本。非常實用的小技巧喲。下面是一段小例子。
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>
- 上一頁:發現兩個有趣的CSS3動畫效果
- 下一頁:行內元素、塊元素都有哪些
DivCSS教程排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved