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实现段落首字下沉效果方法二

通过伪类设置首字样式





首字下沉

云计算(英语:Cloud Computing),是一种基于互联网的计算方式,通过这种方式,共享的软硬件资源和信息可以按需提供给计算机和其他设备。云计算是继1980年代大型计算机到客户端-服务器的大转变之后的又一种巨变。用户不再需要了解“云”中基础设施的细节,不必具有相应的专业知识,也无需直接进行控制。云计算描述了一种基于互联网的新的IT服务增加、使用和交付模式,通常涉及通过互联网来提供动态易扩展而且经常是虚拟化的资源。



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

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

99%的人还看了以下文章

  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    3.8K0
  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    7.7K0
  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    2.1K0
  • div+css制作上中下,中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。 上中下结构,中间又分为两列的全屏自适应布局HTML代码: <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

    2018年8月2日
    4.1K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    5.2K0
  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    2.3K0

发表回复

登录后才能评论