css first-letter实现首字(字母)下沉效果
css 首字下沉效果原理
首字下沉主要使用到css的first-letter伪元素，然后配合使用font-size和float来设置文字的样式即可实现。
first-letter选择器选取指定元素文本内容的第一个字母，即用于设置第一个字母的css样式。
下面是一个简单的first-letter实例
<!DOCTYPE HTML>
<html>
<title>http://www.manongjc.com</title>
<head>
<style>
p:first-letter {
font-size: 200%;
background-color: lightgray;
border: 1px solid black;
}
p::first-line {
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>
This is a test. This is a test.
This is a test. This is a test.
</p>
</body>
</html>
效果如下：
下面我们使用first-letter制作首字下沉效果。
css首字下沉效果的实现
通过first-letter选择器选择元素的首个字母，然后通过font-size和float来设置字母的css样式
源码如下：
<!DOCTYPE html>
<html>
<title>http://www.manongjc.com/article/1313.html</title>
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>CSS ::first-letter 伪元素实现首字母下沉效果</title>
<style type="text/css" media="all">
p::first-letter
{
font-size: 4em;
font-weight: bold;
border: 1px solid blue;
margin-right: 8px;
float: left;
}
</style>
</head>
<body> <p>码农教程旨在为IT编程入门学员及码农们提供免费学习的平台。
本网站有大量IT编程入门教程(JAVA, PHP, JAVASCRIPT, C, C++, HTML,
CSS等)及编程过程中遇到问题时的解决办法，在这里，码农们可以找到
优质的IT编程入门教程，同时，码农们还可以找到大量编程入门实例及
编程笔记，通过教程、实例、笔记和解决方案相结合，使码农们学习起
来更容易更轻松。</p> </body>
</html>
原文地址：http://www.manongjc.com/article/1312.html
其他阅读：
- css :first-of-type选择器实例讲解
- css 伪类选择器:first-child与:first-of-type的区别
- css :first-child选择器使用实例详解
- css :first-line选择器使用详情
- css :first-letter伪类选择器使用实例及分析
css first-letter实现首字(字母)下沉效果的更多相关文章
- MySQL数据库中实现对中文字段按照首字字母排序
转载自网络! 1. 在MySQL中,我们经常会对一个字段进行排序查询,但进行中文排序和查找的时候,对汉字的排序和查找结果往往都是错误的. 这种情况在MySQL的很多版本中都存在. 如果这个问题不解决, ...
- css方法1（清除ul边距间隙，两端对齐，字母大写，首字放大）
一.清除ul自带左边间距 ul{ margin:; padding:; } 二.ul li 与li 之间隙 1.ul 设置font-size:0 ; 子li 设置字体大小 2.把li写到一起,不换行 ...
- $\LaTeX$笔记：首字下沉
$\LaTeX$系列根目录: Latex学习笔记-序 首字下沉 \IEEEPARstart{W}{ith} ,第一个参数W会变大,占用两行,第二个参数”ith”变会大写. 如代码 \IEEEPARst ...
- C#获得字符串首字符字母（大写）
/// <summary> /// 获得字符串首字符字母(大写): /// </summary> /// <param name="cnChar"&g ...
- C++中获取汉字拼音首字缩写/全拼及生僻字的处理
最近一直在修改关于搜索不到生僻字的问题,最后得出结论:对生僻字的处理,办法只有一个,建立一个字库,然后查表找. 可以参考一下:http://download.csdn.net/detail/lshlw ...
- [修正] Firemonkey 中英文混排折行，省略字符，首字避开标点
问题:FMX 在移动平台的文字显示并非由该平台的原生 API 来显示,而是由 FMX.TextLayout.GPU 来处理,也许是官方没留意到中文字符的问题,造成在中英文混排折行时,有些问题. 修正: ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
随机推荐
- java.io.IOException: ORA-22920: 未锁定含有 LOB 值的行
究其原因是因为没有锁定要更新的行记录.将 mysql="select filebody from filelist where filename=?"中的SQL语句加上 ...
- git在本地创建远程仓库
类似的博文,在前面的帖子里面也提到过,当时讲述的是一个入门级别的.其URL是ssh://username@repo-host-address/repo-path这种格式. 今天再说说如何创建类似Git ...
- 响应式布局设置--@media only screen and
@media only screen and only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字,其他关键字还包括 not(排除某种设备) /* 常用类型 */类型 解 ...
- [转]wireshark 实用过滤表达式（针对ip、协议、端口、长度和内容）
首先说几个最常用的关键字,“eq” 和 “==”等同,可以使用 “and” 表示并且,“or”表示或者.“!" 和 "not” 都表示取反. 一.针对wireshark最常用的自然 ...
- 试用fastJSON
实体类 User.java package com.test.fastjson.entity; import java.util.Date; public class User { private L ...
- oracle学习笔记（四）oracle内存优化
emca -config dbcontrol db -repos recreate 解决'oracle Environment variable ORACLE_SID not defined. Ple ...
- Codeforces Round #356 (Div. 2)A. Bear and Five Cards（简单模拟）
A. Bear and Five Cards time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- 在windows下添加php的Imagick扩展
安装ImageMagick-6.9.2-6-Q16-x64-dll.exe 将安装目录下的CORE_开头的dll文件和X11.dll文件复制到c:\windows\system32\下, 在windo ...
- ylbtech-Unitity-CS:Delegates
ylbtech-Unitity-CS:Delegates 1.A,效果图返回顶部 Invoking delegate a: Hello, A! Invoking delegate b: Goodbye ...
- 通过IP连接网上打印机（转载）
From:http://zhidao.baidu.com/link?url=YZzFWur4-UZrNEobHv9zTkbYocMAjKkCq0LBj1QjJ6wApUT7MljxoD8JMBREUH ...