求助!怎样在网页正中间或最上面加图片(代码)

时间:2021-06-22 19:32:25
<img src="图片地址"; width="480" height="360">
比如说这个代码 加的图片 都在网页的页低~~

11 个解决方案

#1


加个DIV呗  DIV随你定位在哪里  然后在DIV里面插入图片不就行了? 
去WEB开发哪问会有更好的答案
美女上个帖子的问题解决了?

#2


引用 1 楼  的回复:
加个DIV呗  DIV随你定位在哪里  然后在DIV里面插入图片不就行了? 
去WEB开发哪问会有更好的答案
美女上个帖子的问题解决了?
    <DIV align=center>代码</DIV> 我试了的 还是在 页低~~╮(╯▽╰)╭

#3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: auto;
padding: 0;
}
body {
font-family: "宋体";
font-size: 14px;
color: #666666;
background-color: #c5dbea;
background-image: url(images/main_bg.gif);
background-repeat: repeat-x;
text-align: center;
height: 18px;
}
p {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
cursor: pointer;
}
#main_body {
text-align: left;
width: 960px;
margin-bottom: 18px;
padding-top: 15px;
}
#header {
color: #0b4067;
text-align: left;
height: 152px;
padding: 0px;
}
#logo {
float: left;
height: 100px;
width: 400px;
margin-top: 0px;
background-color: #C5DBEA;
}
.menu {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
color: #444444;
float: right;
height: 25px;
list-style-position: relative;
list-style-type: none;
margin-top: 115px;
}
#footer {
font-size: 12px;
color: #0b4067;
float: left;
margin-top: 8px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.menu li {
float: left;
list-style-type: none;
padding-left: 0px;
}
.menu a {
color: #003863;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
}
.menu a:hover {
color: #1a75bc;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
}
li.menu_active a {
color: #1a75bc;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: none;
border-left-style: none;
border-right-color: #003863;
border-left-color: #003863;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
}
#content_body {
background-color: #ffffff;
background-image: url(images/inner_content_bg.gif);
font-size: 12px;
color: #666666;
background-repeat: repeat-x;
background-position: top;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
margin-right: 0px;
margin-left: 0px;
}
#left_content {
font-size: 12px;
color: #666666;
float: left;
width: 600px;
background-color: #FFF;
margin-left: 5px;
}
#left_content p {
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#right_content {
font-size: 12px;
color: #666666;
background-image: url(images/right_content_BG.gif);
background-repeat: no-repeat;
background-position: left top;
text-align: justify;
float: right;
width: 277px;
padding-top: 22px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 20px;
}
.title_box {
float: left;
height: 36px;
width: 241px;
padding-top: 20px;
padding-left: 40px;
border: 1px solid #dfdfdf;
background-color: #EBEBEB;
}
.title_box img {
float: left;
margin-top: 4px;
margin-left: 6px;
}
.title_text {
font-family: "宋体";
font-size: 20px;
font-weight: bold;
color: #666666;
margin-left: 8px;
}
.list li {
font-size: 12px;
color: #666666;
list-style-position: inside;
list-style-image: url(images/list_arrow-icon.gif);
margin-top: 8px;
}
.list a {
font-size: 12px;
color: #666666;
}
.list a:hover {
font-size: 12px;
color: #999999;
text-decoration: underline;
}
.right_title {
font-family: "楷体";
font-size: 26px;
color: #1a75bc;
height: 36px;
}
.chapters_box {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color:  #dedede;
margin-bottom: 7px;
padding-top: 10px;
}
.chapters_box p {
padding-top: 3px;
}
.chapters_box_link a {
font-size: 10px;
font-weight: bold;
color: #1a75bc;
}
.chapters_box_link a:hover {
font-size: 12px;
font-weight: bold;
color: #1a75bc;
text-decoration: underline;
}
.clear{clear:both}
#footer_links {
color: #0b4067;
text-decoration: none;
float: left;
}
#footer_links a {
color: #0b4067;
text-decoration: none;
}
#footer_links a:hover {
text-decoration: underline;
}
#footer_copyright {
font-size: 12px;
color: #0b4067;
float: right;
margin-left: 300px;
}
-->
</style>
</head>

<body>
<div id="main_body">
  <div id="header">
    <div id="logo"><img src="images/main_logo.png" width="400" height="100" /></div>
    <div class="menu">
   <ul>
   <li class="menu_active"><a href = "#">|首页|</a></li>
   <li ><a href = "#">课程导学</a></li>
   <li ><a href = "#">课程指导</a></li>
   <li ><a href = "#">实验指导</a></li>
   <li ><a href = "#">在线练习</a></li>
   </ul>  
    </div>
    <div class="clear"></div>
  </div>
  <div id="content_body">
    <div id="left_content">
     <p class="title_box"> <img src="images/read_more_icon.gif" width="14" height="14" /><span class="title_text">Javascript介绍</span></p>
<p>&nbsp; </p>
    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>闲庭雨初歇,暮晚柳阴直,若烟丝丝弄碧。 
魂随飞絮飘千里,凝眸处,几许惆怅,盈满心头,不觉泪暗滴。
离别话,耳盘聚。牵愁动恨,悲欢多无奈。
难思量,皆随落花逐流水。

        </p>
        <p>&nbsp;</p>
        
     <p class="title_box"><span class="title_text"><img src="images/read_more_icon.gif" width="14" height="14" />Javascript发展</span></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>沈思前事,历历于目。段段铭心。 
曾几时,画楼砚浓墨香,书尽繁花世无双。
曾几时,绿绮窗前共剪,同倚宝鸭亲香腮。
曾几时,饮月花深烟处,醉卧馨香闻幽兰。
曾几时,执手露桥听雨,紫花油伞遮缠绵。</p>
        <p>&nbsp;</p>
  <p class="title_box"><span class="title_text"><img src="images/read_more_icon.gif" width="14" height="14" />实验指导</span></p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
   <p>曾同观蝶舞花间戏,曾同闻流莺陌上啼。曾同歌长亭落花飘,曾同舞短砌飞絮里。数不尽的柳短情长,道不尽的痴缠几许。
      恋红尘因你,眷此生因你,赋缱倦因你,织鸳锦因你。生生因你,因你生生,此情若相惜,何忍话别离?独舍我,小楼独徘徊。 
   </p>
   <ul class="list">
     <li><a href="#" >实验一</a></li>
     <li><a href="#" >实验二</a></li>
     <li><a href="#" >实验三</a></li>
     <li><a href="#" >实验四</a></li>
     <li><a href="#" >实验五</a></li>
     <li><a href="#" >实验六</a></li>
     <li><a href="#" >实验七</a></li>
    </ul>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div id="right_content">
      <p class="right_title">章节目录</p>  
      <p class="chapters_box">第一章</p>
      <p class="chapters_box_link"><a href="#" >1.1</a></p>
      <p class="chapters_box_link"><a href="#" >1.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第二章</p>
      <p class="chapters_box_link"><a href="#" >2.1</a></p>
      <p class="chapters_box_link"><a href="#" >2.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第三章</p>
      <p class="chapters_box_link"><a href="#" >3.1</a></p>
      <p class="chapters_box_link"><a href="#" >3.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">&nbsp;&nbsp;第四章</p>
      <p class="chapters_box_link"><a href="#" >4.1</a></p>
      <p class="chapters_box_link"><a href="#" >4.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第五章</p>
      <p class="chapters_box_link"><a href="#" >5.1</a></p>
      <p class="chapters_box_link"><a href="#" >5.2</a></p>
      <p class="chapters_box_link"><a href="#" >5.3</a></p>
      <p class="chapters_box_link"><a href="#" >5.4</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第六章</p>
      <p class="chapters_box_link"><a href="#" >6.1</a></p>
      <p class="chapters_box_link"><a href="#" >6.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第七章</p>
      <p class="chapters_box_link"><a href="#" >7.1</a></p>
      <p class="chapters_box_link"><a href="#" >7.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第八章</p>
      <p class="chapters_box_link"><a href="#" >8.1</a></p>
      <p>&nbsp; </p>
    </div>
  <div class="clear"></div>
  </div>
 <div id="footer">
 <div id="footer_links"><a href="#">|首页|</a> <a href="#">课程导学</a> <a href="#">课程指导</a> <a href="#">实验指导</a><a href="#" herf="#"> 在线练习</a></div>
 <div id="footer_copyright">copyrighy&copy;123 All Rights Reserved</div>
 </div>
</div>
</body>
</html>

#4


那是你上面有内容了吧  上楼是以前写的小网页  快断网了  实在不行去WEB开发版块问下  这种问题很简单的  很快会得到帮助

#5


不要这样!! 我看不太懂耶~~我又不是专业的~~~~

#6


<img src="图片地址"; width="480" height="360">
比如说这个代码 加的图片 都在网页的页低
要看你这段代码的外层是哪里啦,比如:
     <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td width="330" height="89"><img src="1.gif" width="330" height="89"></td>
          <td width="100%" height="89"><img src="2.gif" width="100%" height="100%"></td>
        </tr>
      </table>

#7


引用 4 楼  的回复:
那是你上面有内容了吧  上楼是以前写的小网页  快断网了  实在不行去WEB开发版块问下  这种问题很简单的  很快会得到帮助
    谢谢  O(∩_∩)O~

#8


断网咯  看见web开发版块没 去问下吧  

#9


<td><img src="2.gif" width="100%" height="100%"></td>
能控制图片占满整列

#10


引用 6 楼  的回复:
<img src="图片地址"; width="480" height="360">
比如说这个代码 加的图片 都在网页的页低
要看你这段代码的外层是哪里啦,比如:
     <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td width="330" hei……

那要 外层是什么才不是在页低 像你 那样的代码吗?

#11


引用 9 楼  的回复:
<td><img src="2.gif" width="100%" height="100%"></td>
能控制图片占满整列

(⊙o⊙)哦  如此来着!!

#1


加个DIV呗  DIV随你定位在哪里  然后在DIV里面插入图片不就行了? 
去WEB开发哪问会有更好的答案
美女上个帖子的问题解决了?

#2


引用 1 楼  的回复:
加个DIV呗  DIV随你定位在哪里  然后在DIV里面插入图片不就行了? 
去WEB开发哪问会有更好的答案
美女上个帖子的问题解决了?
    <DIV align=center>代码</DIV> 我试了的 还是在 页低~~╮(╯▽╰)╭

#3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: auto;
padding: 0;
}
body {
font-family: "宋体";
font-size: 14px;
color: #666666;
background-color: #c5dbea;
background-image: url(images/main_bg.gif);
background-repeat: repeat-x;
text-align: center;
height: 18px;
}
p {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
cursor: pointer;
}
#main_body {
text-align: left;
width: 960px;
margin-bottom: 18px;
padding-top: 15px;
}
#header {
color: #0b4067;
text-align: left;
height: 152px;
padding: 0px;
}
#logo {
float: left;
height: 100px;
width: 400px;
margin-top: 0px;
background-color: #C5DBEA;
}
.menu {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
color: #444444;
float: right;
height: 25px;
list-style-position: relative;
list-style-type: none;
margin-top: 115px;
}
#footer {
font-size: 12px;
color: #0b4067;
float: left;
margin-top: 8px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.menu li {
float: left;
list-style-type: none;
padding-left: 0px;
}
.menu a {
color: #003863;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
}
.menu a:hover {
color: #1a75bc;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
}
li.menu_active a {
color: #1a75bc;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: none;
border-left-style: none;
border-right-color: #003863;
border-left-color: #003863;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;
}
#content_body {
background-color: #ffffff;
background-image: url(images/inner_content_bg.gif);
font-size: 12px;
color: #666666;
background-repeat: repeat-x;
background-position: top;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
margin-right: 0px;
margin-left: 0px;
}
#left_content {
font-size: 12px;
color: #666666;
float: left;
width: 600px;
background-color: #FFF;
margin-left: 5px;
}
#left_content p {
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#right_content {
font-size: 12px;
color: #666666;
background-image: url(images/right_content_BG.gif);
background-repeat: no-repeat;
background-position: left top;
text-align: justify;
float: right;
width: 277px;
padding-top: 22px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 20px;
}
.title_box {
float: left;
height: 36px;
width: 241px;
padding-top: 20px;
padding-left: 40px;
border: 1px solid #dfdfdf;
background-color: #EBEBEB;
}
.title_box img {
float: left;
margin-top: 4px;
margin-left: 6px;
}
.title_text {
font-family: "宋体";
font-size: 20px;
font-weight: bold;
color: #666666;
margin-left: 8px;
}
.list li {
font-size: 12px;
color: #666666;
list-style-position: inside;
list-style-image: url(images/list_arrow-icon.gif);
margin-top: 8px;
}
.list a {
font-size: 12px;
color: #666666;
}
.list a:hover {
font-size: 12px;
color: #999999;
text-decoration: underline;
}
.right_title {
font-family: "楷体";
font-size: 26px;
color: #1a75bc;
height: 36px;
}
.chapters_box {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color:  #dedede;
margin-bottom: 7px;
padding-top: 10px;
}
.chapters_box p {
padding-top: 3px;
}
.chapters_box_link a {
font-size: 10px;
font-weight: bold;
color: #1a75bc;
}
.chapters_box_link a:hover {
font-size: 12px;
font-weight: bold;
color: #1a75bc;
text-decoration: underline;
}
.clear{clear:both}
#footer_links {
color: #0b4067;
text-decoration: none;
float: left;
}
#footer_links a {
color: #0b4067;
text-decoration: none;
}
#footer_links a:hover {
text-decoration: underline;
}
#footer_copyright {
font-size: 12px;
color: #0b4067;
float: right;
margin-left: 300px;
}
-->
</style>
</head>

<body>
<div id="main_body">
  <div id="header">
    <div id="logo"><img src="images/main_logo.png" width="400" height="100" /></div>
    <div class="menu">
   <ul>
   <li class="menu_active"><a href = "#">|首页|</a></li>
   <li ><a href = "#">课程导学</a></li>
   <li ><a href = "#">课程指导</a></li>
   <li ><a href = "#">实验指导</a></li>
   <li ><a href = "#">在线练习</a></li>
   </ul>  
    </div>
    <div class="clear"></div>
  </div>
  <div id="content_body">
    <div id="left_content">
     <p class="title_box"> <img src="images/read_more_icon.gif" width="14" height="14" /><span class="title_text">Javascript介绍</span></p>
<p>&nbsp; </p>
    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>闲庭雨初歇,暮晚柳阴直,若烟丝丝弄碧。 
魂随飞絮飘千里,凝眸处,几许惆怅,盈满心头,不觉泪暗滴。
离别话,耳盘聚。牵愁动恨,悲欢多无奈。
难思量,皆随落花逐流水。

        </p>
        <p>&nbsp;</p>
        
     <p class="title_box"><span class="title_text"><img src="images/read_more_icon.gif" width="14" height="14" />Javascript发展</span></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>沈思前事,历历于目。段段铭心。 
曾几时,画楼砚浓墨香,书尽繁花世无双。
曾几时,绿绮窗前共剪,同倚宝鸭亲香腮。
曾几时,饮月花深烟处,醉卧馨香闻幽兰。
曾几时,执手露桥听雨,紫花油伞遮缠绵。</p>
        <p>&nbsp;</p>
  <p class="title_box"><span class="title_text"><img src="images/read_more_icon.gif" width="14" height="14" />实验指导</span></p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
   <p>曾同观蝶舞花间戏,曾同闻流莺陌上啼。曾同歌长亭落花飘,曾同舞短砌飞絮里。数不尽的柳短情长,道不尽的痴缠几许。
      恋红尘因你,眷此生因你,赋缱倦因你,织鸳锦因你。生生因你,因你生生,此情若相惜,何忍话别离?独舍我,小楼独徘徊。 
   </p>
   <ul class="list">
     <li><a href="#" >实验一</a></li>
     <li><a href="#" >实验二</a></li>
     <li><a href="#" >实验三</a></li>
     <li><a href="#" >实验四</a></li>
     <li><a href="#" >实验五</a></li>
     <li><a href="#" >实验六</a></li>
     <li><a href="#" >实验七</a></li>
    </ul>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div id="right_content">
      <p class="right_title">章节目录</p>  
      <p class="chapters_box">第一章</p>
      <p class="chapters_box_link"><a href="#" >1.1</a></p>
      <p class="chapters_box_link"><a href="#" >1.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第二章</p>
      <p class="chapters_box_link"><a href="#" >2.1</a></p>
      <p class="chapters_box_link"><a href="#" >2.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第三章</p>
      <p class="chapters_box_link"><a href="#" >3.1</a></p>
      <p class="chapters_box_link"><a href="#" >3.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">&nbsp;&nbsp;第四章</p>
      <p class="chapters_box_link"><a href="#" >4.1</a></p>
      <p class="chapters_box_link"><a href="#" >4.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第五章</p>
      <p class="chapters_box_link"><a href="#" >5.1</a></p>
      <p class="chapters_box_link"><a href="#" >5.2</a></p>
      <p class="chapters_box_link"><a href="#" >5.3</a></p>
      <p class="chapters_box_link"><a href="#" >5.4</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第六章</p>
      <p class="chapters_box_link"><a href="#" >6.1</a></p>
      <p class="chapters_box_link"><a href="#" >6.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第七章</p>
      <p class="chapters_box_link"><a href="#" >7.1</a></p>
      <p class="chapters_box_link"><a href="#" >7.2</a></p>
      <p>&nbsp;</p>
      <p class="chapters_box">第八章</p>
      <p class="chapters_box_link"><a href="#" >8.1</a></p>
      <p>&nbsp; </p>
    </div>
  <div class="clear"></div>
  </div>
 <div id="footer">
 <div id="footer_links"><a href="#">|首页|</a> <a href="#">课程导学</a> <a href="#">课程指导</a> <a href="#">实验指导</a><a href="#" herf="#"> 在线练习</a></div>
 <div id="footer_copyright">copyrighy&copy;123 All Rights Reserved</div>
 </div>
</div>
</body>
</html>

#4


那是你上面有内容了吧  上楼是以前写的小网页  快断网了  实在不行去WEB开发版块问下  这种问题很简单的  很快会得到帮助

#5


不要这样!! 我看不太懂耶~~我又不是专业的~~~~

#6


<img src="图片地址"; width="480" height="360">
比如说这个代码 加的图片 都在网页的页低
要看你这段代码的外层是哪里啦,比如:
     <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td width="330" height="89"><img src="1.gif" width="330" height="89"></td>
          <td width="100%" height="89"><img src="2.gif" width="100%" height="100%"></td>
        </tr>
      </table>

#7


引用 4 楼  的回复:
那是你上面有内容了吧  上楼是以前写的小网页  快断网了  实在不行去WEB开发版块问下  这种问题很简单的  很快会得到帮助
    谢谢  O(∩_∩)O~

#8


断网咯  看见web开发版块没 去问下吧  

#9


<td><img src="2.gif" width="100%" height="100%"></td>
能控制图片占满整列

#10


引用 6 楼  的回复:
<img src="图片地址"; width="480" height="360">
比如说这个代码 加的图片 都在网页的页低
要看你这段代码的外层是哪里啦,比如:
     <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td width="330" hei……

那要 外层是什么才不是在页低 像你 那样的代码吗?

#11


引用 9 楼  的回复:
<td><img src="2.gif" width="100%" height="100%"></td>
能控制图片占满整列

(⊙o⊙)哦  如此来着!!