Question

怎样用HTML前台代码向按钮中插入背景图片，怎样设置按钮里的字体？

怎样用HTML前台代码向按钮中插入背景图片，怎样设置按钮里的字体？

http://tech.sina.com.cn/mobile/这个网址中的导航的字体设置代码是什么？

麻烦各位了 小弟现在想做个静态页面！
上面说的那个导航代码就是 那个蓝色的导航，里面写着什么 数码首页 数码社区 手机。。。那些

Answer 1

呵呵，您好。

从您提出的问题就可以看出，您对网页设涉入还不太深，也不了解CSS的相关知识，
所以我以下回答的是不用CSS的方法。
对于“推荐答案”告诉您的是CSS的方法，虽然答案对，但是没有考虑到您的知识面。
（
就好象有人问：每个苹果要5毛钱，那么两个苹果的价格用“加法”怎么算。
而有人回答说：2*5＝10 虽然10的答案是对的。但是如果不明白乘法。那么，提问者仍然没有得到“加法怎么算”的答案。
）
我觉得我的回答更贴近您想要的答案（完全是HTML基础代码），而且不只是告诉您答案，还一步步引导您理解这些代码。

首先呢，我希望你能对HTML有一定的基础。下面的内容你才能理解
对于你的提问，从字面上理解，我理解为二个提问：
1、<input name="home" type="button">
这是HTML中定义一个名字叫home的按钮的基本代码。注意：此时按钮上面还没有文字，也没有背景图片。
2、<input name="home" type="button" value="首页" >
对1中的代码进行修改添加了 “ value="首页" ” 这样就为按钮添加了“首页”两个字了
3、<input name="home" type="button" value="首页" style="font-size:18px" />
断续对2的代码进行修改 style="font-size:18px" 是对按钮中的文字大小进行设置。
你再试一试 style="font-size:20px" 会发现字体变的更大一些了，所以值越大，字体大小越大。 同时注意按钮的大小也会随着字体的大小而自动变大变小。
4、<input name="home" type="button" value="首页" style="font-size:18px;font-family:宋体" />
断续对3的代码进行修改 在刚才的 style="font-size:18px" 中加入 font-family:宋体
注意“font-size:18px”与“font-family:宋体”中间用分号隔开。 加入的代码的意思是设置字体为宋体
那设置为黑体呢？当然是用 font-family:黑体 罗。

好了。你的第一问题“怎样用HTML前台代码向按钮中插入背景图片，怎样设置按钮里的字体？
”我问答完了。

5、<input name="home" type="button" value="首页" style="font-size:18px;font-family:宋体;width:80px; height:80px" />
对4的代码进行修改添加“width:80px; height:80px”是设置按钮的大小。
width:80px 是设置按钮的宽度
height:80px是设置按钮的高度
注意“font-size:18px”与“font-family:宋体”与“width:80px”与“height:80px”这四句话之间都有分号
6、<input name="home" type="button" value="首页" style="font-size:18px;font-family:宋体;width:80px; height:80px";background:url(http://i0.sinaimg.cn/IT/deco/2010/0916/mobile_index/images/sj_wzc01.jpg)"
对5的代码进行修改添加“background:url(http://i0.sinaimg.cn/IT/deco/2010/0916/mobile_index/images/sj_wzc01.jpg)”，即为按钮添加背景图片。在这里背景图片的地址是引用了“http://i0.sinaimg.cn/IT/deco/2010/0916/mobile_index/images/sj_wzc01.jpg”这个导航条的背景（这是你提问中http://tech.sina.com.cn/mobile/网址中导航条的背景地址）。很显然，背景条的大小远大于按钮的大小。所以做为此按钮的背景不太适合。

好了，你的第二个问题也回答完了。

对于你的问题补充，我附上你说想要的其导航条代码。
<div class="P1">
<span class="list"><a target="_self" href="http://digi.sina.com.cn/">数码首页</a></span>
<span class="list" style="width:90px;"><a target="_blank" href="http://club.tech.sina.com.cn/">数码社区</a></span>
<span class="selectd" style="width:72px;"><a target="_self" href="http://tech.sina.com.cn/mobile/">手机</a></span>
<span class="list" style="width:107px;"><a target="_self" href="http://tech.sina.com.cn/digi/">数码相机</a></span>
<span class="list" style="width:74px;"><a target="_self" href="http://tech.sina.com.cn/hardware/">硬件</a></span>
<span class="list" style="width:88px;"><a target="_self" href="http://tech.sina.com.cn/notebook">笔记本</a></span>
<span class="list" style="width:85px;"><a target="_self" href="http://tech.sina.com.cn/pc/">台式机</a></span>
<span class="list" style="width:100px;"><a target="_self" href="http://tech.sina.com.cn/digi/mp3/">MP3</a>/<a target="_self" href="http://tech.sina.com.cn/digi/mp4/">MP4</a></span>
<span class="list" style="width:72px;"><a target="_self" href="http://tech.sina.com.cn/elec/">家电</a></span>
<span class="list" style="width:72px;"><a target="_self" href="http://tech.sina.com.cn/down/">下载</a></span>
<span class="list" style="width:92px;"><a target="_self" href="http://tech.sina.com.cn/price/">产品报价</a></span>

</div>
经过分析知道其上对字体的设置是来源于页面中的“P1”样式。P1样式代码如下：
.TechNav .P1{height:31px;float:left;}
.TechNav .P1 .list{float:left;width:92px; padding-top:7px;text-align:center; font-size:14px;color:#fff;filter:Dropshadow(offx=-1,offy=-1,color=#0e5499) ;text-shadow:#0e5499 -1px -1px 0;}
.TechNav .P1 .list a:link,.TechNav .P1 .list a:visited{color:#fff;text-decoration:none;font-family:"微软雅黑","宋体";}
.TechNav .P1 .list a:hover{color:#fff;text-decoration:underline;}
.TechNav .P1 .selectd{width:78px;text-align:center;color:#fff;padding:10px 0 5px 0;line-height:16px;font-size:18px;float:left;filter:Dropshadow(offx=-1,offy=-1,color=#0e5499) ;text-shadow:#0e5499 -1px -1px 0;}
.TechNav .P1 .selectd a:link,.TechNav .P1 .selectd a:visited{color:#fff4c9;text-decoration:none;font-family:"微软雅黑","宋体";}
.TechNav .P1 .selectd a:hover{color:#fff4c9;text-decoration:none; }
.TechNav .P1 .line{width:2px;height:31px;background:url(http://i2.sinaimg.cn/IT/mobliesy/images/modi_mj_006.gif) no-repeat 0 0;overflow:hidden;float:left;}

而其中包含了几种字体，分别在文字链接的不同状态下显示不同的字体设置。

请您自行研究。如有不明白请再补充问题。

当然了对于字体的设置还有一些其它内容，比如设置为粗体等，我不一一说明。而对于背景图片中的地址除了可以引用来由于网络上的网址外，还可以引用自己网页上的图片，但是这其中你应当明白“相对路径”和“绝对路径”的概念。
另外，现在大多数比较好的网站，特别是门户网站都是用的动态的网页技术来的。都用到了框架、CSS等美化方法。要想理解和研究它们的设计，这些知识是应当知道的。
如有不明白请多百度或者谷歌一下“HTML设置字体”及“HTML背景图片”的相关内容，或者留言与我，我再告知

Answer 2

1、它那按钮都是已经好制作的图片~ 那个字体也是图片里面的，没有设置
2、以下代码是那个导航字体的效果 试试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>阴影</title>
<style type="text/css">
body{filter: DropShadow(Color=black , OffX=-1, OffY=-1, Positive=1); position: absolute;

font-size: 12pt; top: 20px; left: 20px;background: #FF9900;}
a:link,a:visited{text-decoration:none;color:#fff;}

</style>
</head>

<body>
<a href="#">笔记本 手机 </a>
</body>
</html>
3、希望采纳 O(∩_∩)O~

Answer 3

用css来设置，比如你的按钮的id为bt 则 背景就可以设置为 #bt{background：（背景图片的路径）; }字体 为 font

Answer 4

其实不太明白你啥意思，但是可以用ps处理过的图片来做，有些时候变通下，还是好的，希望对你有帮助

Answer 5

<HTML>
<HEAD>
<TITLE>百度一下，你就知道</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
<STYLE type="text/css">

.bt{
background:"124.jpg";
font:12px bold;
color:#000099;
}
</STYLE>

</HEAD>

<BODY>
<input type='button' value='按钮' class='bt' />
</BODY>
</HTML>