请选择 进入手机版 | 继续访问电脑版

 找回密码
 立即注册

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

搜索
热搜: 3+1 双证课表 上传 放假通知 FTP sql2005 邮箱激活 vmware 老师课时 五一 诺基亚 科创宽带 二手笔记本 会员突破1000 隔离 网络硬盘 团购 营养学2班 科创学院 iis
查看: 264|回复: 2

[课件资源] 用CSS制作首字下沉放大效果 [复制链接]

小平  

网站编辑

发表于 2011-12-6 14:23:39 |显示全部楼层
分享到:
本帖最后由 小平 于 2011-12-6 14:25 编辑

在看报纸或杂志的时候,经常会看到上面图一中的效果,每段起始的第一个文字运用了特殊样式,并且被放大了。

这个效果叫做“首行下沉”,使用word和一些普通排版软件都可以制作出来,虽然Dreamweaver不能直接制作这个效果,但利用多变的CSS就可完成首行下沉效果的制作。

CSS中的首行下沉是利用CSS伪元素first-letter实现的,制作方法如下:

一、新建一个网页文件,在页面中插入一个块元素,Html代码如下:

  1. <p>
  2. 本站有着十年的Dreamweaver使用经验,专攻W3C标准化页面制作,非常熟悉DIV+CSS页面制作,拥有相当丰富的大型网站建站经验
  3. </dp>
复制代码

二、然后对类first进行定义,CSS代码如下:

  1. <style>
  2. p{
  3. width:240px;
  4. font-size:12px;
  5. line-height:18px;
  6. }
  7. p:first-letter {
  8. font-size:30px;
  9. float:left;
  10. padding:5px 5px 0 0;
  11. line-height:24px;
  12. font-family:"楷体_GB2312";
  13. font-weight:bold;
  14. color:#c00;
  15. }
  16. </style>
复制代码

第一处first类定义了块元素的宽度、文字大小和行距,第二处first:first-letter定义的就是首行下沉的具体样式,30像素大小、粗体、楷体、行距20像素,并且向左浮动。

然后在浏览器中预览一下,效果应该如图一所示,而且IE6对first-letter伪类也可以很好的支持,不用担心浏览器兼容性的问题。

完整示例代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=gb2312" />
  5.     <title>CSS首字下沉</title>
  6.     <style type="text/css">
  7.     .dyfirst {
  8.     width:300px;
  9.     border:1px solid #ddd;
  10.     padding:5px;
  11.     font-size:12px;
  12.     margin:5px 0;
  13.     }
  14.     .dyfirst:first-line {
  15.     color:#050;
  16.     }
  17.     .dyfirst:first-letter {
  18.     font-size:300%;
  19.     font-weight:bold;
  20.     color:#000;
  21.     float:left;
  22.     }
  23.     </style>
  24.     </head>
  25.     <body>
  26.     <div class="dyfirst"> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>
  27.     <div class="dyfirst"> 对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。 </div>
  28.     </body>
  29.     </html>
复制代码

学无止境,勇攀高峰!我们应该给予学生钥匙和打开知识宝库的方法,而不是宝库本身。

使用道具 举报

发表于 2011-12-18 15:17:21 |显示全部楼层
毕业后我做的工作还是和原来专业有点挂钩的,曹老师,我还是在IT圈子里面混哦。

来自 软盛-李辉 的新浪微博

使用道具 举报

发表于 2012-3-26 22:15:01 |显示全部楼层
学习了。现在用CSS+DIV布局太重要了,对以后有帮助。

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 立即注册

回顶部