仓酷云

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

[DIV+CSS] 给大家带来形貌性列表UL和DL的体现情势

[复制链接]
莫相离 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:09:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
之前就见过良多网站在侧边栏上利用<dl/>标签对来完成侧边栏栏目标结构,比来在研讨DEDECMS的默许模板时,也发明该模板在大批的中央利用<dl></dl>标签对来完成页面的结构,好比模板首页的栏目轮回和侧边栏的栏目都是用<dl></dl>标签对来完成的。而在研讨环球利用数最多的博客程序Wordpress时,发明它的侧边栏倒是利用的是最多见的<ul></ul>列表来完成的。
一样的结构<dl/>与<ul/>都能够完成,而且就终极的体现来看其实不存在区分,那末这二者之间究竟有甚么区分呢?大概说利用哪个来完成结构才更加公道呢?
<ul/>与<ol/>是最多见两种列表体现情势,这两种列表最实质上的区分就是<ul/>指的是无序列表而<ol/>指的是有序列表。最多见的两种分歧体现是:寻常所见的旧事题目列表基础上都是由<ul/>来完成结构的,而良多网站的侧边栏上会有一些旧事点击数排行榜之类的列表,这个时分就必要利用到有序列表<ol/>,由于能够很简单的经由过程<ol/>标注出排行按次来。

回过火来我们看Wordpress侧边栏的布局代码:
<divid=”sidebar”>
<ul>
<li><h2>栏方针题一</h2>
<ul>
<li>旧事题目一</li>

<li>旧事题目N</li>
</ul>
</li>

<li><h2>栏方针题N</h2>
<ul>
<li>旧事题目一</li>

<li>旧事题目N</li>
</ul>
</li>
</ul>
</div>
很明显,这是一个<ul/>嵌套<ul/>的布局,经由过程<h2/>往显现栏方针题(增补一点:关于博客来讲,就页面中的内容主要水平而言,这里其实不合适利用<h2/>标签来显现栏方针题,<h2/>标签应当是用在日记题目上的)。
良多利用<dl/>来结构的网站的布局代码以下:
<divid=”sidebar”>
<dl>
<dt>栏方针题一</dt>
<dd>
<ul>
<li>旧事题目一</li>

<li>旧事题目N</li>
</ul>
</dd>

<dt>栏方针题N</dt>
<dd>
<ul>
<li>旧事题目一</li>

<li>旧事题目N</li>
</ul>
</dd>
</dl>
</div>
这是一个庞大体现上的界说列表,与上一个布局代码的最年夜的区分是利用<dt/>来替换<h2/>标签。复杂意义上的界说列表布局以下:
<divid=”sidebar”>
<dl>
<dt>题目一</dt>
<dd>内容一</dd>

<dd>内容N</dd>

<dt>题目N</dt>
<dd>内容一</dd>

<dd>内容N</dd>
</dl>
</div>
这类布局的代码也能够体现出列表的情势,但现实上这类布局其实不太合适做为一个列表来利用,这类复杂的<dl/>更合适做为分歧内容段的形貌。好比:
<dl>
<dt>我的照片</dt>
<dd>摄氏度</dd>
<dd>相机:佳能400D</dd>
<dt>我的博客</dt>
<dd>摄氏度</dd>
<dd>程序:wordpress</dd>
</dl>
因而我们能够了解为:<dl/>标签布局更多的是体现一种形貌性的列表,它自己其实不具有做为列表显现的意义。当<dl/>与<ul/>或是<ol/>标签布局组合起来利用时,才干更好的体现出形貌列表的感化。
之前的谁人被指为不切合标签语义的实验《利用UL举行宽度流动的多行多列结构》,如今换成<dl/>标签来做是不是就合适标签语义化了呢?

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
不帅 该用户已被删除
沙发
发表于 2015-1-18 05:25:25 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
爱飞 该用户已被删除
板凳
发表于 2015-1-25 20:11:36 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
精灵巫婆 该用户已被删除
地板
发表于 2015-2-3 23:04:20 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
小妖女 该用户已被删除
5#
发表于 2015-2-9 07:32:40 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
小魔女 该用户已被删除
6#
发表于 2015-2-27 04:59:45 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
山那边是海 该用户已被删除
7#
发表于 2015-3-8 22:57:00 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
乐观 该用户已被删除
8#
发表于 2015-3-16 20:04:26 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
若相依 该用户已被删除
9#
发表于 2015-3-23 06:53:15 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 02:38

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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