2018-12-21 02:06:04 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh">
|
2019-09-12 01:30:49 +08:00
|
|
|
|
|
2018-12-21 02:06:04 +08:00
|
|
|
|
<head>
|
2019-09-12 01:30:49 +08:00
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
2019-09-12 10:32:34 +08:00
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
2019-09-12 10:27:45 +08:00
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
2019-09-09 17:57:54 +08:00
|
|
|
|
<link rel="stylesheet" href="index.css">
|
2019-09-12 23:24:39 +08:00
|
|
|
|
<link rel="stylesheet" href="myui.css">
|
2019-09-12 15:31:52 +08:00
|
|
|
|
<title>LAOZHONGYI BLOG</title>
|
2019-09-12 01:30:49 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
|
2018-12-21 02:06:04 +08:00
|
|
|
|
<body>
|
2019-09-12 13:37:38 +08:00
|
|
|
|
<div id="blog-title">AHPU 老中医的博客</div>
|
2019-09-12 01:30:49 +08:00
|
|
|
|
<input type="checkbox" id="menu-control">
|
2019-09-09 17:57:54 +08:00
|
|
|
|
<div class="menu-container">
|
2019-09-12 01:30:49 +08:00
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="/">首页</a></li>
|
2019-09-12 23:24:39 +08:00
|
|
|
|
<li><span>关于</span></li>
|
2019-09-12 14:10:51 +08:00
|
|
|
|
<li><label for="menu-control">返回</label></li>
|
2019-09-12 01:30:49 +08:00
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
2019-09-12 13:37:38 +08:00
|
|
|
|
<label for="menu-control" class="content-mask"></label>
|
|
|
|
|
|
<label for="menu-control" class="menu-button-container">
|
2019-09-09 18:11:41 +08:00
|
|
|
|
<div class="menu-button">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
</div>
|
2019-09-12 01:30:49 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content-border">
|
|
|
|
|
|
<div class="content">
|
2019-09-12 15:30:10 +08:00
|
|
|
|
<span>笔记1</span>
|
|
|
|
|
|
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
|
|
|
|
|
|
<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
|
|
|
|
|
|
<img src="images/note1/1.jpg" alt="截图1">
|
2019-09-12 23:24:39 +08:00
|
|
|
|
<p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示
|
|
|
|
|
|
</p>
|
2019-09-12 15:30:10 +08:00
|
|
|
|
<img src="images/note1/2.jpg" alt="截图2">
|
|
|
|
|
|
<p>最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了</p>
|
|
|
|
|
|
<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
|
2019-09-12 11:02:34 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
2019-09-12 15:30:10 +08:00
|
|
|
|
<span>笔记2</span>
|
|
|
|
|
|
|
2019-09-12 11:02:34 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
2019-09-12 15:30:10 +08:00
|
|
|
|
<span>笔记3</span>
|
|
|
|
|
|
|
2019-09-12 11:02:34 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
2019-09-12 15:30:10 +08:00
|
|
|
|
<span>笔记4</span>
|
|
|
|
|
|
|
2019-09-12 11:02:34 +08:00
|
|
|
|
</div>
|
2019-09-09 17:57:54 +08:00
|
|
|
|
</div>
|
2019-09-13 13:04:03 +08:00
|
|
|
|
|
2019-09-14 16:44:41 +08:00
|
|
|
|
<!-- <div class="mask"></div> -->
|
2019-09-12 23:24:39 +08:00
|
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
|
|
|
|
|
<script src="drag.js"></script>
|
2019-09-12 14:10:51 +08:00
|
|
|
|
<script src="base.js"></script>
|
2018-12-21 02:06:04 +08:00
|
|
|
|
</body>
|
2019-09-12 01:30:49 +08:00
|
|
|
|
|
|
|
|
|
|
</html>
|
