仓酷云

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

[DIV+CSS] 带来一篇css主动换行的技能

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

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

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

x
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
CSS主动换行有甚么技能?人人都晓得一连的英文或数字能是容器被撑年夜,不克不及依据容器的巨细主动换行,上面是CSS怎样将他们换行的办法!

  人人都晓得一连的英文或数字能是容器被撑年夜,不克不及依据容器的巨细主动换行,上面是CSS怎样将他们换行的办法!

关于div

  1.(IE扫瞄器)white-space:normal;word-break:break-all;这里前者是遵守尺度。

#wrap{white-space:normal;width:200px;}
大概
#wrap{word-break:break-all;width:200px;}
<divid="wrap">ddd111111111111111111111111111111</div>

  效果:能够完成换行

  2.(Firefox扫瞄器)white-space:normal;word-break:break-all;overflow:hidden;一样的FF下也没有很好的完成办法,只能埋没大概加转动条,固然不加转动条效果更好!

#wrap{white-space:normal;width:200px;overflow:auto;}
大概
#wrap{word-break:break-all;width:200px;overflow:auto;}
<divid="wrap">ddd1111111111111111111111111111111111111111</div>
  效果:容器一般,内包庇躲

关于table

  1.(IE扫瞄器)利用款式table-layout:fixed;

<style>
.tb{table-layout:fixed}
</style>
<tableclass="tbl"width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz1234567890
</td></tr>
</table>
  效果:能够换行

  2.(IE扫瞄器)利用款式

<style>
.tb{table-layout:fixed}
</style>
<tableclass="tb"width="80"><tr><tdnowrap>
abcdefghigklmnopqrstuvwxyz1234567890
</td></tr>
</table>
  效果:能够换行

  3.(IE扫瞄器)在利用百分比流动td巨细情形下利用款式table-layout:fixed与nowrap

<style>
.tb{table-layout:fixed}
</style>
<tableclass="tb"width=80>
<tr>
<tdwidth=25%nowrap>
abcdefghigklmnopqrstuvwxyz1234567890
</td>
<tdnowrap>abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
  效果:两个td均一般换行

  4.(Firefox扫瞄器)在利用百分比流动td巨细情形下利用款式table-layout:fixed与nowrap,而且利用div

<style>
.tb{table-layout:fixed}
.td{overflow:hidden;}
</style>
<tableclass=tbwidth=80>
<tr><tdwidth=25%class=tdnowrap>
<div>abcdefghigklmnopqrstuvwxyz1234567890</div>
</td>
<tdclass=tdnowrap><div>abcdefghigklmnopqrstuvwxyz1234567890</div></td>
</tr>
</table>
  这里单位格宽度必定要用百分比界说效果:一般显现,但不克不及换行。
  注:在FF下还没有能使容器内容换行的好办法,只能用overflow将多出的内包庇躲,以避免影响全体效果。

这工具比表格好的唯一就是你可以定义一个ID,想怎么玩它就怎么玩他,表格用来处理显示数据,DIV+css+TABLE就行了,都什么年代了,以前没有DIV,而且386的年代不也一样,现在都奔腾4了
变相怪杰 该用户已被删除
沙发
发表于 2015-1-18 05:48:19 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
精灵巫婆 该用户已被删除
板凳
发表于 2015-1-26 12:55:21 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
老尸 该用户已被删除
地板
发表于 2015-2-10 06:56:15 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
不帅 该用户已被删除
5#
发表于 2015-3-1 03:35:29 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
再现理想 该用户已被删除
6#
发表于 2015-3-10 12:48:46 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
admin 该用户已被删除
7#
发表于 2015-3-17 07:48:51 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
蒙在股里 该用户已被删除
8#
发表于 2015-3-24 03:55:17 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-4 07:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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