gpt4 book ai didi

css - 删除 Google 协作平台小工具 (css) 周围的边框

转载 作者:行者123 更新时间:2023-11-28 15:20:13 28 4
gpt4 key购买 nike

提前致歉,我的编码经验非常有限。

我正在尝试删除“鼠标悬停小工具”和 Google 网站中的图片之间看起来像三像素边框的内容,该边框同时显示在 Chrome 和 Firefox 中。我读过有关正确使用边框标签的问题 - 特别是关于图像如何在 chrome 中显示 - 所以怀疑“body {margin:0; border:0; padding:0;}”,但到目前为止运气不佳。

这是代码,在此先感谢您的帮助!

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Image Mouseover"
title_url="http://sites.google.com/site/mori79/html-gadgets/how-tos/image-mouseover"
description="A gadget to create an image mouseover/rollover effect."
screenshot="http://lh6.googleusercontent.com/-jCm-Pj5NlI8/Tfh722Va6DI/AAAAAAAADzc/DPvpwd7jZYA/s800/image-mouseover_screenshot.png"
thumbnail="http://lh3.googleusercontent.com/-wnq0_4Zc5TE/Tfh72sPAf0I/AAAAAAAADzY/B5do0hJnAEY/s800/image-mouseover_thumbnail.png"
width="400"
height="300">
</ModulePrefs>
<UserPref name="originalImage" display_name="Original image" required="true" />
<UserPref name="rolloverImage" display_name="Rollover image" required="true" />
<UserPref name="text" display_name="Title / tooltip" />
<UserPref name="url" display_name="When clicked, go to URL" />
<UserPref name="target" display_name="Where to open the link" default_value="_parent" datatype="enum">
<EnumValue value="_parent" display_value="Same tab / window" />
<EnumValue value="_blank" display_value="New tab / window" />
</UserPref>
<Content type="html"><![CDATA[
<!DOCTYPE html>
<style type="text/css">
body {margin:0; border:0; padding:0;}
a, span {display:inline-block; background-image:url(__UP_rolloverImage__);}
a:hover img, span:hover img {visibility:hidden;}
</style>
<div id="container"></div><script type="text/javascript">
var prefs = new gadgets.Prefs();
var url = prefs.getString("url");
var target = prefs.getString("target");
var text = prefs.getString("text");
var originalImage = prefs.getString("originalImage");
var imgTag = '<img src="' + originalImage + '">';
var content;
if (url) {
content = '<a href="' + url + '" target="' + target + '" title="' + text + '">' + imgTag + '<\/a>';
}
else {
content = '<span title="' + text + '">' + imgTag + '<\/span>';
}
document.getElementById("container").innerHTML = content;
</script>]]></Content>
</Module>

最佳答案

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Image Mouseover"
title_url="http://sites.google.com/site/mori79/html-gadgets/how-tos/image-mouseover"
description="A gadget to create an image mouseover/rollover effect."
screenshot="http://lh6.googleusercontent.com/-jCm-Pj5NlI8/Tfh722Va6DI/AAAAAAAADzc/DPvpwd7jZYA/s800/image-mouseover_screenshot.png"
thumbnail="http://lh3.googleusercontent.com/-wnq0_4Zc5TE/Tfh72sPAf0I/AAAAAAAADzY/B5do0hJnAEY/s800/image-mouseover_thumbnail.png"
width="400"
height="300">
</ModulePrefs>
<UserPref name="originalImage" display_name="Original image" required="true" />
<UserPref name="rolloverImage" display_name="Rollover image" required="true" />
<UserPref name="text" display_name="Title / tooltip" />
<UserPref name="url" display_name="When clicked, go to URL" />
<UserPref name="target" display_name="Where to open the link" default_value="_parent" datatype="enum">
<EnumValue value="_parent" display_value="Same tab / window" />
<EnumValue value="_blank" display_value="New tab / window" />
</UserPref>
<Content type="html"><![CDATA]><!--here you did not close-->
<!DOCTYPE html>
<style type="text/css">
body {margin:0; border:0; padding:0;}
a, span {display:inline-block; background-image:url(__UP_rolloverImage__);}
a:hover img, span:hover img {visibility:hidden;}
</style>
<div id="container"></div><script type="text/javascript">
var prefs = new gadgets.Prefs();
var url = prefs.getString("url");
var target = prefs.getString("target");
var text = prefs.getString("text");
var originalImage = prefs.getString("originalImage");
var imgTag = '<img src="' + originalImage + '">';
var content;
if (url) {
content = '<a href="' + url + '" target="' + target + '" title="' + text + '">' + imgTag + '<\/a>';
}
else {
content = '<span title="' + text + '">' + imgTag + '<\/span>';
}
document.getElementById("container").innerHTML = content;
</script></Content><!--here was the closing brackets-->
</Module>

关于css - 删除 Google 协作平台小工具 (css) 周围的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36224710/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com