html点击按钮在id为txt下创建一个div并且加入<p>文字<p>_IT百科

<!DOCTYPE html>

<html>

<head>

</head>

function create(){

var txt = document.getElementById("txt")

var div = document.createElement("div")

div.innerHTML = "<p>文字</p>"

txt.appendChild(div)

}

</script>

<body>

</body>

</html>

呵呵，您好。

从您提出的问题就可以看出，您对网页设涉入还不太深，也不了解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:18pxfont-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:18pxfont-family:宋体width:80pxheight:80px" />

对4的代码进行修改添加“width:80pxheight:80px”是设置按钮的大小。

width:80px 是设置按钮的宽度

height:80px是设置按钮的高度

注意“font-size:18px”与“font-family:宋体”与“width:80px”与“height:80px”这四句话之间都有分号

6、<input name="home" type="button" value="首页" style="font-size:18pxfont-family:宋体width:80pxheight: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>

经过分析知道其上对字体的设置是来源于页面中的“P1”样式。P1样式代码如下：

.TechNav .P1{height:31pxfloat:left}

.TechNav .P1 .list{float:leftwidth:92pxpadding-top:7pxtext-align:centerfont-size:14pxcolor:#ffffilter:Dropshadow(offx=-1,offy=-1,color=#0e5499) text-shadow:#0e5499 -1px -1px 0}

.TechNav .P1 .list a:link,.TechNav .P1 .list a:visited{color:#ffftext-decoration:nonefont-family:"微软雅黑","宋体"}

.TechNav .P1 .list a:hover{color:#ffftext-decoration:underline}

.TechNav .P1 .selectd{width:78pxtext-align:centercolor:#fffpadding:10px 0 5px 0line-height:16pxfont-size:18pxfloat:leftfilter:Dropshadow(offx=-1,offy=-1,color=#0e5499) text-shadow:#0e5499 -1px -1px 0}

.TechNav .P1 .selectd a:link,.TechNav .P1 .selectd a:visited{color:#fff4c9text-decoration:nonefont-family:"微软雅黑","宋体"}

.TechNav .P1 .selectd a:hover{color:#fff4c9text-decoration:none}

.TechNav .P1 .line{width:2pxheight:31pxbackground:url(http://i2.sinaimg.cn/IT/mobliesy/images/modi_mj_006.gif) no-repeat 0 0overflow:hiddenfloat:left}

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

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

当然了对于字体的设置还有一些其它内容，比如设置为粗体等，我不一一说明。而对于背景图片中的地址除了可以引用来由于网络上的网址外，还可以引用自己网页上的图片，但是这其中你应当明白“相对路径”和“绝对路径”的概念。

另外，现在大多数比较好的网站，特别是门户网站都是用的动态的网页技术来的。都用到了框架、CSS等美化方法。要想理解和研究它们的设计，这些知识是应当知道的。

如有不明白请多百度或者谷歌一下“HTML设置字体”及“HTML背景图片”的相关内容，或者留言与我，我再告知

1、打开Sublime text3，新建一个HTML文档，并且建立好框架。

2、输入代码：

<table>

<tr>

<td>Student</td>

</tr>

<tr>

<td>Height</td>

</tr>

<tr>

</td>

</tr>

</table>

设立两行文本输入框，并且提示可以增加的按钮。

3、<table id="mainTable">

为标签加上id方便定位。

4、加上监听事件的函数。

onclick="adding()"

然后连接js文档。

5、function adding(){

var table = document.getElementById("mainTable")

var addTr = table.insertRow(2)

}

创建函数，然后设定两个变量。一个用于定位标签位置，另一个增加行数在第二行。测试一下，多次点击确实会往下移动。

6、var addTd = addTr.insertCell()

addTd.innerHTML = "新增"

除了要增加tr还要增加td，并且增加文本提示。

7、稍微修改一下变量名字。再增加文本输入框。

function adding(){

var table = document.getElementById("mainTable")

var addTr = table.insertRow(2)

var td1 = addTr.insertCell()

td1.innerHTML = "新增"

var td2 = addTr.insertCell()

td2.innerHTML = "<input type='text 'name='newnew' >"

}

8、最后就可以看到按钮了。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11452790.html

html点击按钮在id为txt下创建一个div并且加入<p>文字<p>

发表评论

评论列表（0条）

html点击按钮在id为txt下创建一个div并且加入&lt;p&gt;文字&lt;p&gt;

发表评论

评论列表（0条）

html点击按钮在id为txt下创建一个div并且加入<p>文字<p>