Web_Design 板


LINE

原 PO: 跟你内文的理解没关联。 这几位可能比较年轻,没遇上早期的情况,或是最近才接触相关的东西。 以前 CSS 不完全甚至还没有的时候,纯 Html 是由上到下、照规范渲染的,block 的东西你想要左右并排基本不可能,inline 的东西你想上下排也没办法。 任何定位也都没有。现在做定位可能会用 padding、position 之类的,但这是 CSS,那还没有 CSS 的时候怎麽办呢? 没办法定位的话,要是想做一个有背景、有图有文有圆角按钮的网站怎麽办呢? 那就是利用表格的天性了。 就像堆积木一样,每一格都是网站的一小部份,把整个网站堆起来。 举个例子,现在要做一个圆角矩形方块背景的文字区块,会在 text 的外面用 border radius。 但以前没这东西,我们会用 table 去做出一个 3x3的表格,左上、左下、右上、右下填充圆角的图片,上下左右是一个方形的图片、中间就是 text 本身。 用这样的方式去堆出一个圆角矩形。 在 IE 还不支援透明 png 的时候,还曾出现一格 1px 去堆出圆角的疯狂行为。 在 IE 还不支援透明 png 的时候,还曾出现一格 1px 去堆出圆角的疯狂行为。 然後 table 本身就可以再包含 table,你可以想像能这样一层包一层的堆出有很多设计元素的网站。 如果你用过 PS 之类的切片工具就会知道,切完输出的东西就是一堆图块,然後你按原本的顺序填进 table 中,就会变成你原本设计的网站了。 但其实 table 本身不该这样用,html 设计上也不是这用意,html 不该用於任何样式用途。但早期为了好看没办法。 CSS 2 的时候,还有一些我们想要的东西办不到,还是会有很多人用 html 做样式用途,或是用不合规范的方式去做,到 CSS 3 的时候基本就完全没必要了。 你文中说 table 填 ul ol 再用 CSS 做 layout 这段我没看懂,什麽情况要这样用? 用 ul li 再 float 做横向 nav 以前很常见,现在也满多的,但这其实不是 layout 用意,ul 这样用是有意义的。 中间的转换期很多都是因为 CSS 规范制定了,但浏览器还没实作,或是因为早期的 IE 太特例独行,导致很多非 html 规范意图的作法,久而久之很多不是那麽在意这些东西的人就一直用不正确、不严谨的方式实作。 有一阵子凡是在写 html 教学的网站都会特别跟大家说「别再用 html 的 XXX 去做 XXX,请用 CSS 的 XXX」。 ※ 引述《ppnow (no ways)》之铭言: : 竖山 : 我是推文里发问为何W3S不建议使用 : HTML做table的新手,感谢几位的指导。 : HTML做table的新手,感谢几位的指导。 : W3S内的说明跟xd大讲的很接近, : 是指不建议用HTML table “layout“, : (题外话大家是翻译成排版还是布局?) : 网页来源 : https://www.w3schools.com/html/html_layout.asp : 截图如下 : http://i.imgur.com/8DkoVuo.jpg : http://i.imgur.com/WrI9JIm.jpg : 我想了解的是,网站上的table基本上都是 : 要经过layout的,所以习惯的做法是在 : HTML table的ul ol li输入资料,然後再以 : CSS style来layout这样吗? : 例如把直向列表用float改成横向,类似nav : 列表,似乎是目前流行的做法 : 还是有其他主流做法? : 新手发问可能很蠢很简单,或问的不好, : 请大大不吝指导,谢谢 : ----- : Sent from JPTT on my Xiaomi Redmi 5. -- -- --



※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 118.160.52.68



※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 118.160.52.68
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1541451815.A.F2A.html ※ 编辑: cqwt (118.160.52.68), 11/06/2018 05:06:12 ※ 编辑: cqwt (118.160.52.68), 11/06/2018 05:07:39
1F:推 pkro12345: 推11/06 05:06
※ 编辑: cqwt (118.160.52.68), 11/06/2018 05:27:18 ※ 编辑: cqwt (118.160.52.68), 11/06/2018 06:00:28
2F:推 ccw1210: 推 11/06 09:09
3F:推 nottt: 历史课,在css到css2的则是大flash时代 11/06 11:34
4F:推 cuxy6705: 太神了 11/06 13:39
5F:→ ppnow: 太棒的历史说明,谢谢。我就是想知道这些,不过知识尚浅还 11/06 14:18
6F:→ ppnow: 无法完全吸收。我不年轻了只是喜爱学习,哈哈 11/06 14:18
7F:推 ppnow: 想一想我在念书的时候,有看过1px堆圆角的图形,只是当时不 11/06 14:35
8F:→ ppnow: 懂HTML。所以现在CSS3,基本上就完全可切开了,HTML5写资料 11/06 14:35
9F:→ ppnow: ,CSS3做样式。 11/06 14:35
10F:推 j355066: 推 11/06 18:33
11F:推 shter: 推,十年前做圆角 Button 真的是这样堆出来的 11/06 22:09
12F:→ shter: 不过还是很怀念那个做法,直接换 background-image 换造型 11/06 22:12
13F:推 pandaz79418: 推一个 11/07 01:09
14F:推 zased: 感谢分享。我待两家企业都是用table排版,有天惊觉div跟css 11/07 09:22
15F:→ zased: 就可以就自己偷偷全部改写了 11/07 09:22
16F:→ xdraculax: 说起来就觉得好笑,古早圆角困难,大家都爱搞圆角,觉 11/07 10:23
17F:→ xdraculax: 得圆角就是高上大,後来圆角简单,大家又不爱圆角,说 11/07 10:23
18F:→ xdraculax: 简约才是时尚,现在圆角又有点死灰复燃了,FB没底线的 11/07 10:23
19F:→ xdraculax: 圆,时尚真难懂 11/07 10:23







like.gif 您可能会有兴趣的文章
icon.png[问题/行为] 猫晚上进房间会不会有憋尿问题
icon.pngRe: [闲聊] 选了错误的女孩成为魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一张
icon.png[心得] EMS高领长版毛衣.墨小楼MC1002
icon.png[分享] 丹龙隔热纸GE55+33+22
icon.png[问题] 清洗洗衣机
icon.png[寻物] 窗台下的空间
icon.png[闲聊] 双极の女神1 木魔爵
icon.png[售车] 新竹 1997 march 1297cc 白色 四门
icon.png[讨论] 能从照片感受到摄影者心情吗
icon.png[狂贺] 贺贺贺贺 贺!岛村卯月!总选举NO.1
icon.png[难过] 羡慕白皮肤的女生
icon.png阅读文章
icon.png[黑特]
icon.png[问题] SBK S1安装於安全帽位置
icon.png[分享] 旧woo100绝版开箱!!
icon.pngRe: [无言] 关於小包卫生纸
icon.png[开箱] E5-2683V3 RX480Strix 快睿C1 简单测试
icon.png[心得] 苍の海贼龙 地狱 执行者16PT
icon.png[售车] 1999年Virage iO 1.8EXi
icon.png[心得] 挑战33 LV10 狮子座pt solo
icon.png[闲聊] 手把手教你不被桶之新手主购教学
icon.png[分享] Civic Type R 量产版官方照无预警流出
icon.png[售车] Golf 4 2.0 银色 自排
icon.png[出售] Graco提篮汽座(有底座)2000元诚可议
icon.png[问题] 请问补牙材质掉了还能再补吗?(台中半年内
icon.png[问题] 44th 单曲 生写竟然都给重复的啊啊!
icon.png[心得] 华南红卡/icash 核卡
icon.png[问题] 拔牙矫正这样正常吗
icon.png[赠送] 老莫高业 初业 102年版
icon.png[情报] 三大行动支付 本季掀战火
icon.png[宝宝] 博客来Amos水蜡笔5/1特价五折
icon.pngRe: [心得] 新鲜人一些面试分享
icon.png[心得] 苍の海贼龙 地狱 麒麟25PT
icon.pngRe: [闲聊] (君の名は。雷慎入) 君名二创漫画翻译
icon.pngRe: [闲聊] OGN中场影片:失踪人口局 (英文字幕)
icon.png[问题] 台湾大哥大4G讯号差
icon.png[出售] [全国]全新千寻侘草LED灯, 水草

请输入看板名称,例如:Tech_Job站内搜寻

TOP