您的位置: 首页  >  IT文章  >  ！怎样在网页正中间或最下面加图片（代码）

！怎样在网页正中间或最下面加图片（代码）

分类: IT文章 • 2023-11-04 20:41:43
求助！怎样在网页正中间或最上面加图片（代码）
<img src="图片地址"; width="480" height="360">
比如说这个代码 加的图片 都在网页的页低~~

------解决方案--------------------
HTML code
<!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>

相关推荐