網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖,
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo1 {
width: 300px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
/* 首字母改變樣式 */
.demo1 p::first-letter {
color: red;
font-size: 40px;
font-weight: bold;
float: left;
}
.demo2 {
width: 300px;
height: 200px;
border: 1px solid #000;
overflow: auto;
margin-top: 200px;
}
.demo2::first-line {
color:salmon;
}
</style>
</head>
<body>
<div class="demo1">
<p>
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
</p>
</div>
<div class="demo2">
<p>
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
我是內容,測驗內容,內容我是內容,測驗內容,內容我是內容,測驗內容,內容
</p>
</div>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/880.html
標籤:HTML5
上一篇:WordPress程式不能升級為5.4.2版本的原因
下一篇:關于a標簽的講解