站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
MolyX 分级属性
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__NOTOC__ <span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[MolyX CSS教程|上一页]] | {{Template:MolyX导航}}</span> <div style="clear:both;"></div> 如果您使用过Word,那您一定知道Word中有一个“项目符号和编号”的功能。 在[[html]]中,您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在[[CSS]]中,已经提供了进行分级的专用分级属性。 分级属性包括了“list-style”(列表样式)、“list-item”(列表项)等多种属性,我们先来看一下分级属性的详细列表: <div> [[Image:mx19.png]] </div> 下面我们来看一个分级属性的例子,代码如下所示: <pre> <html> <head> <title> fenji css </title> <style type=“text/css”>//*定义CSS*// <!-- p{display:block;white-space:normal} //*定义显示属性为“block”,意思是在新的区域里显示; white-space的属性 normal使多重空白合成为一个*// em{display:inline} //*定义EM的显示属性为“inline” 目的是为了其控制下的文本显示中不折行*// li{display:list-item;list-style:square} //*定义li的显示属性为“list-item”,显示在列表项中加入一个符号标记, 而 list-style属性值定义为square使列表项前的标记为方块*// img{display:block} //*定义图片属性为block使图片在新的位置打开*// --> </style> </head> <body> <p><em>sample</em>text<em>sample</em>text<em>sample</em> text<em>sample</em> text<em>sample</em></p>//*定义一段文本*// <ul>//*定义列表项*// <li>list-item 1</li> <li>list-item 2</li> <li>list-item 3</li> </ul> <p><img src=“ss01068.jpg” width=“280”height=“185” alt=“invisible”></p>//*定义一幅图片*// </body> </html> </pre> 上段代码的显示效果如下图: <div> [[Image:mx20.png]] </div> 我们看到由于定义了<p>的属性为Block,所以文本、列表、图片都在不同的位置上打开,Inline属性使文本不折行,list-style-type的属性值为square使列表项前的符号为方块; 如果我们在上面的代码中做一些改动,则将以另一种效果显示,我们在<head>中把“EM”的display属性值改为block,使其都在新的位置打开;li的“list-style”属性值改为“Upper-roman”(大写罗马符号),img的“display”属性值改为“none”(让图片不显示)。 修改后的显示效果如下图: <div> [[Image:mx21.png]] </div> 我们看到分级属性也能达到排版的部分功能,几处代码的改动就可以使页面发生很大的变化。自己来试一试其他的效果吧! [[category:MolyX手册]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:MolyX导航
(
编辑
)