怎么在网页上实现双下划线、波浪线、着重号等？

zhangking 2003-06-23 07:45:36

怎么在网页上实现双下划线、波浪线、着重号等？
能不能用一些 css 或 javascript 实现？不要用图片。

...全文

1856 10 打赏收藏转发到动态举报

写回复

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhangking 2003-06-24

打赏
举报

回复

up

emu_ston 2003-06-24

打赏
举报

回复

跨浏览器版，我喜欢：

<BODY>
<span id=show style=font-size:15pt>
中文Abc<span>中文Abc0中文Abc0</span>中文Abc<br>
中文Abc<span class=".">中文Abc1中文Abc1</span>中文Abc<br>
中文Abc<span class="~">中文Abc2中文Abc2</span>中文Abc<br>
中文Abc<span class="=">中文Abc3中文Abc3</span>中文Abc<br>
中文Abc<span class="^">中文Abc4中文Abc4</span>中文Abc<br>
中文Abc<span>中文Abc5中文Abc5</span>中文Abc<br>
</span>
ps:只是2002.1.26清早的一个灵感罢了.
<script>
window.onload=function(){
var show = document.getElementById("show");

var fontSize=parseInt(show.style.fontSize)*1.25;
var tags=show.childNodes;
var pTop;
for(var i=0;i<tags.length;i++){
if(!tags[i].className)continue;
var pLeft=0;pTop=fontSize;
var tmp=tags[i].innerHTML.replace(/<.*?>/g,"");
var str = new Array(200).join(tags[i].className);
if (!navigator.vendor){
if(tags[i].className=="=")pTop=fontSize/1.5;
if(tags[i].className==".")pTop=fontSize/4;
}else if (navigator.vendor==""){
}else{
if(tags[i].className==".") pTop=fontSize/1.5;
if(tags[i].className=="^") pTop=fontSize*1.2;
}
var elm = (document.createElement("span"));
elm.innerHTML = str;
document.body.insertBefore(elm,show);
with(elm.style){
fontSize=show.style.fontSize;
position="absolute";
top = tags[i].offsetTop+pTop;
left =(tags[i].offsetLeft+pLeft);
width = tags[i].offsetWidth;
overflow = "hidden";
}
}
}
</script>
</BODY>

IE5,NS6,MOZ1.3下通过。注意使用了navigator.vendor来区分不三个浏览器。为了避免使用expendo属性占用了class属性。

emu 2003-06-24

打赏
举报

回复

再改：

<BODY>
<span id=show style=font-size:16pt>
中文Abc<span>中文Abc0中文Abc0</span>中文Abc<br>
中文Abc<span qswh=".">中文Abc1中文Abc1</span>中文Abc<br>
中文Abc<span qswh="~">中文Abc2中文Abc2</span>中文Abc<br>
中文Abc<span qswh="=">中文Abc3中文Abc3</span>中文Abc<br>
中文Abc<span qswh="^">中文Abc4中文Abc4</span>中文Abc<br>
中文Abc<span>中文Abc5中文Abc5</span>中文Abc<br>
</span>
ps:只是2002.1.26清早的一个灵感罢了.
<script>
var fontSize=parseInt(show.style.fontSize)*1.25;
var tags=show.all.tags("span");
for(var i=0;i<tags.length;i++){
if(!tags[i].qswh)continue;
var pLeft=0;pTop=fontSize;
var tmp=tags[i].innerText;
var str = tmp.replace(/[^\x00-\xff]/g,"^^").replace(/./g,tags[i].qswh)
if(tags[i].qswh=="="){pTop=fontSize/1.5;}
if(tags[i].qswh=="."){pTop=fontSize/4;}
show.document.body.insertAdjacentHTML('beforeEnd', "<span style=font-size:"+show.style.fontSize+";position:absolute;top="+(tags[i].offsetTop+pTop)+";left="+(tags[i].offsetLeft+pLeft)+";z-index:-1>"+str+"</span>");
}
</script>
</BODY>

以前秋水喜欢定义全局变量，我可不喜欢。此外char是系统保留字，换成qswh了。

emu 2003-06-24

打赏
举报

回复

帮秋水优化了一下：

<BODY>
<span id=show style=font-size:16pt>
中文Abc<span>中文Abc0中文Abc0</span>中文Abc<br>
中文Abc<span char=".">中文Abc1中文Abc1</span>中文Abc<br>
中文Abc<span char="~">中文Abc2中文Abc2</span>中文Abc<br>
中文Abc<span char="=">中文Abc3中文Abc3</span>中文Abc<br>
中文Abc<span char="^">中文Abc4中文Abc4</span>中文Abc<br>
中文Abc<span>中文Abc5中文Abc5</span>中文Abc<br>
</span>
ps:只是2002.1.26清早的一个灵感罢了.
<script>
var fontSize=parseInt(show.style.fontSize)
fontSize*=1.25;
var tags=show.all.tags("span");
for(i=0;i<tags.length;i++){
if(!tags[i].char)continue;
pLeft=0;pTop=fontSize;
tmp=tags[i].innerText;
var str = (new Array(tmp.replace(/[^\x00-\xff]/g,"^^").length+1)).join(tags[i].char);
if(tags[i].char=="="){pTop=fontSize/1.5;}
if(tags[i].char=="."){pTop=fontSize/4;}
show.document.body.insertAdjacentHTML('beforeEnd', "<span style=font-size:"+show.style.fontSize+";position:absolute;top="+(tags[i].offsetTop+pTop)+";left="+(tags[i].offsetLeft+pLeft)+";>"+str+"</span>");
}
</script>
</BODY>

注意span是inline标签，多行的情况要每行分别处理。

emu 2003-06-24

打赏
举报

回复

http://www.blueidea.com/bbs/archivecontent.asp?id=363003

ybbqy 2003-06-24

打赏
举报

回复

用FrontPage

zhangking 2003-06-24

打赏
举报

回复

波浪线、着重号的实现: 高手能不能给个例子啊?

紫郢剑侠 2003-06-24

打赏
举报

回复

波浪线、着重号结合CSS应该能实现。

zhangking 2003-06-24

打赏
举报

回复

<span style="border-bottom:2pt double #000000">双下劃線 </span><br><br>

<span style="border-bottom:2pt dotted #000000">点下劃線 </span><br><br>

liuzxit 2003-06-24

打赏
举报

回复

ie6:
<span style="border-bottom:1pt double #000000">下劃線</span>

本文详细介绍了Office2010中的Word应用，包括启动与退出、应用程序界面结构、文档操作、基本操作如视图切换、编辑、查找与替换、格式化与排版、表格制作和图文混排，以及打印与保护等高级功能。强调了不同视图的用途、文档保存选项、自动保存的作用，以及查找替换的模式等关键概念。

本文基于W3C clreq项目，系统分析中文Web排版中20个关键差距问题，涵盖标点间距、竖排支持、Ruby注音、引号规范、两端对齐、断行分词、避头尾、基线对齐、字体选择、文化特性等核心信息技术议题，并提供浏览器兼容性检查、测试用例验证及标准化参与路径，助力开发者实现符合中文语言习惯的高质量网页渲染。

打开链接下载源码： https://pan.quark.cn/s/3b4f389a7bb7 Matlab可用于构建机械臂的工作区域，Matlab也适用于创建机械臂的工作区域。

科技中介服务机构如何利用知识图谱提升服务的专业性与匹配精准度？

高校技术转移办公室人员如何通过知识图谱发现成果转化的落地路径？

87,987

社区成员

224,683

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章