仓酷云

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

[DIV+CSS] DIV教程之网页计划履历分享;没有CSS时网页的可看性

[复制链接]
深爱那片海 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-15 23:12:07 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

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

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

x
你可以轻松地控制页面的布局。
破洛洛文章简介:网页计划履历分享;没有CSS时网页的可看性.
先上示例,首页旅店模块的最终效果以下:

代码布局以下:

<dl>
<dt>旅店</dt>
<dd>北京</dd>
<dd>上海</dd>
</dl>
<ul>
<li>北京旅店列表</li>
<li>北京旅店列表</li>
<li>上海旅店列表</li>
<li>上海旅店列表</li>
</ul>这类布局在显现上没有任何成绩,切换乡村时上面的列表会响应改动。但当没法一般加载css时显现效果就对照杯具了,截图以下:

接下往是别的乡村的列表,太长了图片没有截全。我们必要的最少是乡村与所属它的列表显现在一同,在视觉上回属统一个模块,也就是说要在代码布局上把它们依照营业逻辑重现出来:
<dl>
<dt>北京</dt>
<dd>
<ul>
<li>北京旅店列表</li>
<li>北京旅店列表</li>
</ul>
</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>
<ul>
<li>上海旅店列表</li>
<li>上海旅店列表</li>
</ul>
</dd>
</dl>如许当页面呈现nocss的时分显现效果就对照靠近实在需求:

到这里就离乐成不远了,接上去的成绩是怎样用如今的dl,dt,dd完成想要的视觉效果。
1.先给一切dl的外层div加款式:position:relative,再给dd设置position:absolute,如许列表就能够离开dl的文本流了,切换列表时包管它们显现在统一个地位;
2.乡村横排显现,这时候设dl为浮动float:left,再革新公然横已往了。不外如今笑还早了点,不要忘了另有那万恶的IE6要兼容:给dt设置浮动并转行内元素,不然会有过剩的清闲float:left;display:inline;再革新就OK了;
3.增补一点为何要在dd中加ul,这要视页面布局而定,每条除题目另有代价,另有个必要转化的国民币标记¥,假如间接用a链接就必要多量量行内转块元素,对照耗功能。最后想用多个dd,但由于有相对定位的缘故原由列表会堆叠在一同,以是改换计划。

这个构思是我刚进公司时听强哥提到的,谁人甚么三层分别的东东,上午完成一个关于首页的变动恰好看到这个模块能够优化,重构这器材本钱太年夜,我决意见一个改一个,然后偷偷传上往,哈哈哈哈,罪恶的笑声~~~~话说可视化编纂窗口坏失落了,靠设想排版还真是辛劳啊,此次就不给笔墨加色彩了。
</p>
层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
第二个灵魂 该用户已被删除
7#
发表于 2015-3-21 13:49:08 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
不帅 该用户已被删除
6#
发表于 2015-3-14 16:00:33 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
透明 该用户已被删除
5#
发表于 2015-3-7 06:32:04 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
海妖 该用户已被删除
地板
发表于 2015-2-7 18:35:35 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
老尸 该用户已被删除
板凳
发表于 2015-2-2 07:48:11 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
山那边是海 该用户已被删除
沙发
发表于 2015-1-24 15:43:37 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
冷月葬花魂 该用户已被删除
楼主
发表于 2015-1-17 20:44:26 | 只看该作者
AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-14 12:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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