3-7图片显示问题与排版问题

来源：3-10 作业题

helen_papa

2018-03-02 15:20:37

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
 </head>
 <body>
 <table width="100%" bgcolor="#E1F2F9">
 <tr>
 <td width="20%" height="40%"><img scr="image/logo.png"></td>
 <td>
 <pre>学校概况   机构设置   师资队伍   科学研究   招生就业   图书馆   校长信箱   校园导航   </pre></td>
 <td width="20%" height="50%">快速通道
 <select name="">
 <option value="xz">-请选择-</option>
 <option value="volvo" selected>volvo</option>
 </select>
 </td>
  </table>
  <table width="100% height="">
  <tr>
  <td><img src="images/banner.jpg width="100%"></td>
  </tr>
  </table>
  <table>
  <tr>
  <td>
   <h5><pre>慕课快讯   基层采风   媒体聚焦   慕课视频   >></pre></h5>
  <p>>慕课平台课程扩容 涵盖多个领域 12-30 <br/>
     >李克强主持座谈会 葛优刘国梁被请进中南海 12-30  <br/>
>台军演习“歼灭”解放军 专家：自欺欺人  12-30  <br/>
>气象局停发霾预警？回应：正协商联合发布机制 12-30  <br/>
>独家：小米影业解散宣发部门 宣布成立一年后刹车 12-30  <br/>
>“哑巴群众”开口说话 是稿件有误还是新闻造假？12-30  <br/>
>要置业，看看2017全球楼市掘金路线图 12-30  <br/>
>王健林与房地产越来越远？贾跃亭与房地产越来越近 12-30
  </p>
  </td>
  <td>
   <h5><pre>慕课快讯   基层采风   媒体聚焦   慕课视频   >></pre></h5>
  <p>>慕课平台课程扩容 涵盖多个领域 12-30 <br/>
     >李克强主持座谈会 葛优刘国梁被请进中南海 12-30  <br/>
>台军演习“歼灭”解放军 专家：自欺欺人  12-30  <br/>
>气象局停发霾预警？回应：正协商联合发布机制 12-30  <br/>
>独家：小米影业解散宣发部门 宣布成立一年后刹车 12-30  <br/>
>“哑巴群众”开口说话 是稿件有误还是新闻造假？12-30  <br/>
>要置业，看看2017全球楼市掘金路线图 12-30  <br/>
>王健林与房地产越来越远？贾跃亭与房地产越来越近 12-30
  </p>
  </td>
  <td><img src="images/weixin.png"></td>
  </tr>
  <tr>
  <td><p>近期专题</p></td>
  <td></td>
  <td></td>
  </tr>
 <tr>
 <td><img src="images/1.png"></td>
   <td><img src="images/2.png"></td>
   <td><img src="images/3.png"></td>
</tr>
<tr>
 <td>教育发展基金专题</td>
   <td>教育发展基金专题</td>
   <td>教育发展基金专题</td>
</tr>
<table width="100%" >
<tr bgcolor="#E1F2F9">
<td>
 <pre>文化站点   信息服务   校友会   OA系统   教务管理系统   网络教学平台  vpn服务   acm/oj   旧版入口   站群系统   </pre></td>
</tr>
<tr bgcolor="#89A9BD">
<td>
 Copyright&copy;2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
 </td>
 </tr>
  </body>
</html>
这是我的代码，logo图和banner图无法显示，还有我的文字排版和效果图比起来不好看，相互间的间距好小，望解答！

写回答

2回答

好帮手慕糖

2018-03-02

你好，1、新闻区域的左右间距是由于没有给所在的区域设置宽度，导致宽度是由子元素撑开的，所以显示的时候都是挨着的，可参考如下，设置宽度80%，并设置居中。

2、pre字体会稍微小一点，如下图，pre的字体是font-family: monospace;这是由于默认样式的影响。

学习了css样式如何书写之后，可以参考下列代码测试下哦。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .p1{
            font-family: monospace;
        }
    </style>
</head>
<body>
    <p class="p1">慕课网IMooc</p>
    <p>慕课网IMooc</p>
</body>
</html>

祝学习愉快~