来看看：YUI网页结构:自顺应宽度的输出框

只看该作者 · 发表于 2015-1-15 23:21:53

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

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

x

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
网页制造poluoluo文章简介：YUI中有一种结构头脑：栅格决意宽度，内容决意高度，明天会商的是自顺应宽度的输出框.
YUI中有一种结构头脑：栅格决意宽度，内容决意高度，明天会商的是自顺应宽度的输出框，先上代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>宽度自顺应输出框</title><linkrel="stylesheet"href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"><style>.col{padding:10px;width:500px;background-color:yellow;}.fluid-input{display:inline-block;width:100%;overflow:hidden;}.fluid-input-inner{display:block;padding-right:10px;#zoom:1;}.fluid-input.text,.fluid-inputtextarea{border:2px#cccsolid;padding:3px;width:100%;}.fluid-inputtextarea{height:300px;}</style></head><body><divclass="col"><bclass="fluid-input"><bclass="fluid-input-inner"><inputclass="text"type="text"></b></b><bclass="fluid-input"><bclass="fluid-input-inner"><textarea></textarea></b></b></div></body></html>

复制代码

复杂说一下道理：
为了有较好的体验，input[type=text]及textarea一样平常会有border值及padding值（小看某些padding设为0滴淫儿），使用以下公式：

.fluid-input-inner{padding-right:输出框右边框+输出框右侧框+输出框左padding+输出框右padding}

复制代码

让输出框承继fluid-input-inner的宽度便可完成自顺应；而IE6有个宽度超越主动撑开的bug，故再多套一层fluid-input，宽度100%，溢出埋没便可。
col宽度随便，在宽度自顺应结构中默许为auto，这里便利演示定了宽度。
这里由内而外讲授，不外定名是由外而内的。
更进一步
focus时border变成4px咋整？
问的好（实际上是偶本人在问），输出框focus后增添class=”focus”，即变成：

<textareaclass="focus"></textarea>

复制代码

CSS:

.focus{position:relative;left:-2px;border-width:4px!important;}

复制代码

————————乡平易近问答分开线————————-
玉人@jeannewoo反应了个bug，IE6下textarea输出笔墨的时分就本人撑开了（昨晚上班路上@ivane也跟我说过，不外我没当回事，嘿~），我试了一下果然云云，办理办法很复杂：触发fluid-input-inner的hasLayout便可。
</p>
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。

只看该作者 · 发表于 2015-1-17 22:08:11

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-1-23 16:51:47

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-1-31 19:44:05

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-7 00:34:04

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

仓酷云 · 发表于 2015-2-19 08:49:59

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-6 14:32:51

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-13 03:09:53

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-20 11:32:31

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：YUI网页结构:自顺应宽度的输出框

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

相关帖子