如何避免页面被长代码撑坏

代码太长了!

那篇关于分享书签的文章发表之后,Ven 同学问是否有分享到校内的代码,经过搜索,我在东拼西凑弄出了一个代码(由于是东拼西凑,所以没有给出代码来源)。

测试那个代码的时候,我只是点击了那个链接,弹出一个校内的登录页面,于是我就认为代码有效,并且添加到《通过代码方便别人分享您的文章》一文。后来 Ven 同学告知那个代码无效,于是我注册了一个校内帐户,然后点击 “分享到校内” 链接,在弹出页面输入用户名和密码之后,出现一个空白页面,这直接证明了 Ven 的结论——那个代码是无效的。我对自己的错误深感羞愧。

对 Ven 同学的指正我表示感谢,另外,我还要感谢 marrying 同学,谢谢他(或她)指出那篇文章的代码太长,导致 “代码都超出文章页的范围了”。其实,那个问题我在发表文章之前就已经知道了,只是当时没有找到解决的方法,所以没有修理,一直到文章发表后第二天才弄好。

原来的代码是放在 <blockquote> 以及 <code> 标签里面的,代码和效果如下:

<blockquote><code>这里插入代码</code></blockquote>

当里面的代码太长的时候,<code>标签不会自动换行,所以页面就会被撑坏。

后来,我在 “女巫二号” 同学的博客上发现了 “滚动文本框” 的代码,于是修改并采用了其中一个,代码和效果如下:

<DIV style=”BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; SCROLLBAR-FACE-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: black 1px solid; WIDTH: 600px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: black 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 100px; BACKGROUND-COLOR: #F4F4F4″ align=left>这里插入代码</DIV>

 

这个代码在 FireFox 下显示效果很漂亮,但是在 IE 下则不好看——如果您分别在 IE 和 FireFox 浏览器下阅读此文,您就会发现所有的文本框效果都不一样。

于是我继续寻找其他方法,结果在 DreamWeaver 上找到了 “文本域” 和 “文本区域” 的代码,代码和效果分别如下:


或者


不管是用文本域(textfield)还是文本区域(textarea),效果是一样的。 其中字符宽度(cols)值和行数(rows)值可以随意更改,不过同一字符宽度(例如本文的 60)在 Firefox 和 IE 下显示的实际长度却不一样:在 ForeFox 下的实际长度为 621px, 而在 IE 下只有 506px——如果您在不同的浏览器下阅读此文就会发现这个问题——如果您有解决方法,欢迎告知。

所以,“文本域” 和 “文本区域” 代码也不能令我满意,我还得继续寻找其他方法,如果您还有其他的方法,欢迎分享!

原创文章,转载请注明: 转载自精品博客

本文链接地址: 如何避免页面被长代码撑坏

相关博文:

  1. 在文章末实现 “分享到 Twitter” 的几种方法
  2. 通过代码方便别人分享您的文章
  3. 再说如何避免页面被长代码撑坏
  4. 升级 Google Analytics 的跟踪代码

此文发表于 博客技术 以及标签 , , , ; 收藏永久链接. 发表评论或者留下引用: 引用链接.

11 条评论

  1. 发表于 2009年05月11日 8:37 上午 | 永久链接

    这些对标准不同的解析方式害死人啊。

  2. 发表于 2009年05月11日 9:21 上午 | 永久链接

    Young大哥,不怪你。那代码本来应该是能用的,可现在校内自封API,禁止从外部提交共享了。
    另外,我是男的O(∩_∩)O~

  3. 发表于 2009年05月11日 3:34 下午 | 永久链接

    好久没来,今天一来就看到这篇颇有同感的文章!我用的是jimdo的自助建站博客,博客的留言系统中如果加入较长的链接就会使整个网页的右侧边栏在IE6下显示时串到正文的下面去,没有办法解决,后来想了个笨招,就是用短地址转换一下长链接。

  4. Young
    发表于 2009年05月11日 9:30 下午 | 永久链接

    @Ven:代码的事怪我治学不严谨。听说校内过滤和 512 相关的“悼念”之类的词语,庆幸我没有玩了。

  5. Young
    发表于 2009年05月12日 12:13 上午 | 永久链接

    @老胡:别来无恙啊。我对 CSS、PHP、HTML 之类的玩意不是很懂,只能不断折腾,为了实现一个对别人来讲可能是很简单的问题,我可能要花费几天的时间去解决,但是只要达到目地,任何方法多少时间我都是愿意付出的。至于较长的链接,您可以通过 Chunck URLs 插件解决。

  6. 发表于 2009年05月12日 1:57 上午 | 永久链接

    @Young:
    校内没有过滤和512相关的内容,这还是他的一个热点话题

  7. Young
    发表于 2009年05月12日 12:25 下午 | 永久链接

    @lento,看来我看到流言了,谢谢指正。

  8. 发表于 2009年05月12日 12:51 下午 | 永久链接

    不错,学习一下

  9. 发表于 2009年05月12日 8:07 下午 | 永久链接

    以前从aoao.org.cn弄下来一个很喜欢。
    css里放

    pre code{margin: 4px 0;border: 1px #ccc solid;border-bottom-width: 3px;line-height: 1.3em;padding: 4px 8px;max-height: 180px;overflow: auto;font-family: Consolas,”Courier New”, Courier, monospace;background-color: #f8f8f8;display:block;text-wrap: suppress;font-size:12pt;color:black;}

    然后正文区用这个:

    <pre><code>
    codes go here
    </code></pre>

  10. 发表于 2009年05月12日 8:08 下午 | 永久链接

    这个主题的<blockquote>样式做的似乎不太好……在评论区不能用……别的博客都能用的……

  11. Young
    发表于 2009年05月12日 8:58 下午 | 永久链接

    @ 蓝蓝小雪: 谢谢您的代码,我晚点试试看。我对代码之类的东西不是很懂,都是靠乱折腾出来的。

发表评论

您的邮箱 永远 不会被公开。 带 * 的地方都是要填的。

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>