展会信息港展会大全

首字下沉与首行样式的如何实现?
来源:互联网   发布日期:2016-03-25 16:22:51   浏览:2364次  

导读:首字下沉的效果我们可以用伪对象first-letter,需要与其它一些属性配合使用,font-size、float、padding等。伪对象first-我们来看下面的例子:代码如下...

首字下沉的效果我们可以用伪对象first-letter,需要与其它一些属性配合使用,font-size、float、padding等。伪对象first-

我们来看下面的例子:

代码如下

复制代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

<!--

p:first-letter{

padding: 8px;

font-size: 36pt;

float: left;

color: red;

}

-->

</style>

</head>

<body>

<p>首字下沉的效果;font-size、float、padding属性配合。</p>

</body>

</html>

首行样式我们可以用first-line伪类定义样式。

我们来看下面的例子:

代码如下

复制代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

<!--

p:first-line{

color: blue;

font-size: 20px;

}

-->

</style>

</head>

<body>

<p>Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - Div+CSS XHTML XML 教程大全 - </p>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港