行的颜色设置和文字居中发生了矛盾不知道怎么修复

行的颜色设置和文字居中发生了矛盾不知道怎么修复

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
               a{text-decoration:none;
                 font-weight: bold;
                 }
                 a:link{color:black;}
                 a:visited{color:gray;}
                 a:hover{color:blue;}
                 a:active{color:green;}
                 table{boder-style:none;}
                 p{font-size:10px}
        </style>
    </head>
    <body>
        <!--表格布局开始-->
    <table width="100%" cellpadding="0" cellspacing="0">
                 <!--顶部布局-->
                <tr  bgcolor="#E1F2F9"  width="100%" >
                    <td align="left"><img src="img/logo.png"/></td>
                    <td >
                    <span><a href="#">学校概况&nbsp;&nbsp;</a></span>
                    <span><a href="#">机构设置&nbsp;&nbsp;</a></span>
                    <span><a href="#">师资团队&nbsp;&nbsp;</a></span>
                    <span><a href="#">科学研究&nbsp;&nbsp;</a></span>
                    <span><a href="#">招生就业&nbsp;&nbsp;</a></span>
                    <span><a href="#">图书馆&nbsp;&nbsp;</a></span>
                    <span><a href="#">校长信箱&nbsp;&nbsp;</a></span>
                    <span><a href="#">校园导航&nbsp;&nbsp;</a></span>
                    </td>
                     <td align="left" width="15%">
                         
                    <form action="">
                        <span style="text-weight:bold;">快速通道</span>
                    <select name="dx" id="dx">
                        <option value="111" selected>1</option>
                        <option value="222">2</option>
                        <option value="333">3</option>
                        <option value="444">4</option>
                        <option value="555">5</option>
                    </select>
                    </form>
                    </td>
                    </tr>
                    
                </table>
            </td>
        </tr>
        
        <!--banner布局-->
        <tr >
            <td colspan="3"><img width="100%" src="img/banner.jpg"/></td>
        </tr>
        
        <!--新闻区-->
        
        <tr width="100%" align="center">
            <td  colspan="3">
            <table align="center">
            <td>
            <h4>慕课快讯&nbsp;&nbsp;基层采风&nbsp;&nbsp;媒体聚焦&nbsp;&nbsp;慕课视频&nbsp;&nbsp;&gt;&gt;</h4>
         <p>&gt;&nbsp;慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;李克强主持座谈会&nbsp;&nbsp;葛优刘国梁被请进中南海&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;台军演习"歼灭"解放军&nbsp;&nbsp;专家:自欺欺人&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;气象局停发霾预警?&nbsp;&nbsp;回应:正协商联合发布机制&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;独家:小米影业解散宣发部门&nbsp;&nbsp;宣布成立一年后刹车&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;“哑巴群众”开口说话&nbsp;&nbsp;是稿件有误还是新闻造假?&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;要置业,看看2017全球楼市掘金路线图&nbsp;&nbsp;12-30</p>
         <p>&gt;&nbsp;王健林与房地产越来越远?&nbsp;&nbsp;贾跃亭与房地产越来越近&nbsp;&nbsp;12-30</p>    
            </td>
            <td >
            <h4>慕课快讯&nbsp;&nbsp;基层采风&nbsp;&nbsp;媒体聚焦&nbsp;&nbsp;慕课视频&nbsp;&nbsp;&gt;&gt;</h4>
       <p>&gt;&nbsp;慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;李克强主持座谈会&nbsp;&nbsp;葛优刘国梁被请进中南海&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;台军演习"歼灭"解放军&nbsp;&nbsp;专家:自欺欺人&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;气象局停发霾预警?&nbsp;&nbsp;回应:正协商联合发布机制&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;独家:小米影业解散宣发部门&nbsp;&nbsp;宣布成立一年后刹车&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;要置业,看看2017全球楼市掘金路线图&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;“哑巴群众”开口说话&nbsp;&nbsp;是稿件有误还是新闻造假?&nbsp;&nbsp;12-30</p>
       <p>&gt;&nbsp;王健林与房地产越来越远?&nbsp;&nbsp;贾跃亭与房地产越来越近&nbsp;&nbsp;12-30</p>
            </td>
            <td ><img src="img/weixin.png"></td>
                
            
             </table>
            </td>
        <tr>
            <td colspan="3" width="70% align="center">
                <table  align="center" cellpadding="5" cellspacing="20">
                 <tr>
                 <td align="texttop">近期专访</td>
                 </tr>
                 <tr>
                  <td>
                    <dl>
                    <dd><img src="img/1.png"></dd>    
                    <dd>教育发展基金专题</dd>    
                    </dl>
                  </td>
                  <td>
                    <dl>
                    <dd><img src="img/2.png"></dd>    
                    <dd>教育发展基金专题</dd>    
                    </dl>
                  </td>
                  <td>
                    <dl>
                    <dd><img src="img/3.png"></dd>    
                    <dd>教育发展基金专题</dd>    
                    </dl>
                  </td>
                </tr>
                </table>
            </td>
        </tr>
        
        
         <!--友情链接区-->
       
        <tr height="70px"   >
            <td colspan="3"  >
                <table bgcolor="aquamarine" width="100%" align="center" >
                    <tr >
                    <td  >文化站点&nbsp;</td>
                    <td >信息服务&nbsp;</td>
                    <td >校友会&nbsp;</td>
                    <td >QA系统&nbsp;</td>
                    <td >教务管理系统&nbsp;</td>
                    <td >网络教学平台&nbsp;</td>
                    <td >vpn服务&nbsp;</td>
                    <td >旧版入口&nbsp;</td>
                    <td >站群系统&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
                <!--页脚区-->
        <tr >
         <td colspan="3" >
             <table  bgcolor="#89A9BD" width="100%" height="20px">
                 <tr width="70%" style="text-align: center;">
                 <td >
    Copyright&nbsp;&copy;&nbsp;2017&nbsp;imooc.com&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;|&nbsp;京ICP备&nbsp;13046642号-2
        
                 </td>
                 </tr>
             </table>
         </td>
        </tr>
    </table>
    
    </body>
</html>


http://img1.sycdn.imooc.com/climg//59c1dfc100019fef13570097.jpg

         



提问:我发现只有在table里面设置背景颜色才会显示,然而,现在又有矛盾了,如果想让颜色平铺整个宽度,设置width="100%"的话这整行的字就会从最左边开始显示,不美观。怎么让文字像现在这样显示,然后颜色又覆盖整行?



正在回答

登陆购买课程后可参与讨论,去登陆

4回答

可以嵌套一个table,然后给外层的table设置宽度为100%,并设置背景颜色,然后给里面的table设置宽度为80%或者是当的宽度。这是一种方法,还有一种方法,在你现在代码的基础上在左右两边各加上一个空的td,设置宽度为300px;注意要给友情链接区和地步设置适当的高度。

参考下面的写法:

http://img1.sycdn.imooc.com/climg//59c860390001948410700754.jpg

一定要灵活处理,结合学过的内容,敢于去尝试。加油!

Miss路 2017-09-21 16:29:43

那你粘贴你的完整代码,我帮你看看,这个思路是一方面,还要有适当的调整,如果你觉得代码太多,可以直接提交作业,批作业的老师也会为你详细的给出修改建议。祝学习愉快!

  • 提问者 慕盖茨0172929 #1
    代码是有点多,主要是,老师给的意见是可以修复我整行颜色没有覆盖的问题,修复好了,然后它的行里面的文字位置又变了。。。。。
    2017-09-23 14:28:13
  • 提问者 慕盖茨0172929 #2
    老师,完全代码在上面,麻烦您看下
    2017-09-23 14:30:19
Miss路 2017-09-21 15:08:43

肯定不是嵌套div,直接给tr设置就行,这里有容器,直接给他的容器设置,没有容器就要套一个容器。你要敢于去尝试,一试就知道了。加油!

  • 提问者 慕盖茨0172929 #1
    我试过了,给最外层tr设置颜色,它就不显示,给table 和里层的tr设置的话,它的颜色不是覆盖整行,而如果给设置width为100%的话,字体的布局又会变得奇怪,但是颜色会覆盖在整行。
    2017-09-21 15:21:58
Miss路 2017-09-20 11:57:47

给外面套个容器,设置宽度为100%,然后设置你想要的背景颜色。注意要设置高度,不然太窄不美观。祝学习愉快!

  • 提问者 慕盖茨0172929 #1
    我的页面是采用表格布局,页脚部分在<tr>标签里面,是在<tr>标签外面套一个<div>标签吗?
    2017-09-21 14:58:46
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师