仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 684|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS3.0实例教程:content属性利用实例先容

[复制链接]
愤怒的大鸟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:53:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
最新版本html5+CSS3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
破洛洛文章简介:在已往我们能够经由过程后端服务器程序截取或JS截取笔墨后到场省略号便可。
在已往我们能够经由过程后端服务器程序截取或JS截取笔墨后到场省略号便可。如今,我们的CSS3.0可使用完成了!


content属性:
  假如我们想往段落p标签外部追加省略号只必要以下体例界说款式便可:
  p:after{content:"...";}

  固然我们也能够追加任何笔墨:
  p:after{content:"前端开辟网";}

  既然CSS3能够追加内容after,那末CSS3也为我们供应了前置内容的办法before:
  p:before{content:"...";}

  假如我们利用标签选择器界说了一切的p,可是又有需求请求某一个p且ID为box的元素禁绝主动追加或前置内容,那末我们就能够对content属性制订none值(none值只能用于before和after这两种选择器)或normal(任何选择器都没成绩)值便可:
  #box:before{content:none;}


总结:content属性次要经由过程伪类选择器:before和:after来指定地位;
content属性的值能够为任何内容;
当content属性的值为none,则暗示不拔出任何内容;


如今我们来看一下content属性的综适用法:
<!DOCTYPEHTML>

<html>

<head>

<metacharset="gb2312">

<title>CSS3逐日一练以内容处置-拔出笔墨!</title>

<styletype="text/css">

*{margin:0;padding:0;}

body{margin-bottom:20px;font-size:14px;font-family:"MicrosoftYahei";}

p{height:30px;line-height:30px;}

p:before{content:"网页教授教养网(W3Cfuns.com)!";}

div:after{content:"poluoluoCOM,网页教授教养网开辟腾飞区,Web前端开辟妙手会萃地,教程、资本完整收费!";}

#box1:after{content:"..."}

#box2:after{content:none;}

</style>

</head>


<body>

<p>【原本的笔墨】</p>

<div>【原本的笔墨】</div>

<divid="box1">【原本的笔墨,这个将演示省略号】</div>

<divid="box2">【原本的笔墨】</div>

</body>

</html>
</p>
结构清晰,容易被搜索引擎搜索到,天生优化了seo
变相怪杰 该用户已被删除
沙发
发表于 2015-1-17 19:44:40 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
admin 该用户已被删除
板凳
发表于 2015-1-24 14:26:20 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
再现理想 该用户已被删除
地板
发表于 2015-2-1 17:31:49 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
谁可相欹 该用户已被删除
5#
发表于 2015-2-7 14:04:03 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
若天明 该用户已被删除
6#
发表于 2015-2-22 18:54:15 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
简单生活 该用户已被删除
7#
发表于 2015-3-7 04:03:56 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
小妖女 该用户已被删除
8#
发表于 2015-3-14 12:45:14 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
小魔女 该用户已被删除
9#
发表于 2015-3-21 09:48:38 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 21:53

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表