CSS实现段落首字下沉效果的2种方法

CSS实现段落首字下沉效果的2种方法

CSS实现段落首字下沉效果方法一

在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。

#first{font-size:3em;
       font-weight:bold;
       float:left;
       margin-right:20px;
}
<p><span id="first">云</span>计算……</p>

CSS实现段落首字下沉效果方法二

通过伪类设置首字样式

Tips:You can change the code before run.

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3414.html

(1)
江山如画的头像江山如画管理团队
上一篇 2019年3月29日 上午9:45
下一篇 2019年4月3日 上午11:11

99%的人还看了以下文章

  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    7.2K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    10.8K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    5.3K0
  • CSS制作上一页 下一页 页码显示样式

    今天教大家制作页面的上一页 下一页 页码显示样式,效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页 下一页 页码显示样式|www.125jz.com</title> <style…

    2018年7月29日
    5.6K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    6.0K0
  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    8.8K0

发表回复

登录后才能评论