-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfirst_letter_with_display_value.html
61 lines (61 loc) · 2.17 KB
/
first_letter_with_display_value.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/jquery-1.8.3.min.js"></script>
<style>
.main{
font-family: Source Code Pro,Microsoft YaHei;
text-align: left;
font-size: 18px;
font-weight: 500;
width: 50%;
margin: 0 auto;
background: #ccc;
}
.content:first-letter{
margin: 40px auto;
display: block;
color:#549688;
font-size: 25px;
}
</style>
<title>zhangqi_file</title>
</head>
<body>
<div class="main">
<h2>:first-letter简单的小实例</h2>
<h4>选择之后看下面每一段话第一个字有没有变颜色和大小</h4>
<select id="selid">
<option value="inline">inline</option>
<option value="block" selected>block</option>
<option value="inline-block">inline-block</option>
<option value="flex">flex</option>
<option value="table">table</option>
<option value="table-cell">table-cell</option>
<option value="table-row">table-row</option>
<option value="table-caption">table-caption</option>
<option value="inline-table">inline-table</option>
<option value="list-item">list-item</option>
</select>
<div class="h2">display: <span id="sid">block</span></div>
<div class="content">我是个对自己颜值很自信的人，每天叫醒我起床的不是闹钟</div>
<div class="content">也不是梦想，而是自己的颜值</div>
<div class="content">每每想到我长得如此俊俏，都会从梦中笑醒</div>
<div class="content">但是，人在江湖飘，哪有不挨刀</div>
<div class="content">经常出入一些社交场合，难免和和其他的人和物一起照个相什么的</div>
<div class="content">如果和我合影的是迪丽热巴这样的美女也就算了</div>
<div class="content">但经常在我左右的都是大老爷们</div>
<div class="content">有时候，甚至还有其他完全不知形象为何物的汪科物种</div>
</div>
</body>
<script>
$("#selid").change(function(){
var val=this.value;
$("#sid").html(val);
$(".content").css("display",val);
});
</script>
</html>