页面效果不一样

页面效果不一样

<!DOCTYPE html>

<html>

<head>

    <title></title>

<meta charset="utf-8">

</head>

    <body>

    <!-- 在此编写代码 -->

    <table align="center">

       <tr bgcolor="pink" width="100%" height="80px"><td>页头</td></tr><!--页头-->

       <tr bgcolor="white" height="10px"><td></td></tr><!--空隙-->

       <tr bgcolor="orange"><td>

           <table align="center">

               <tr >

                   <td width="240px" align="right" bgcolor="white">左侧内容</td>

                   <td width="20px"></td>

                   <td width="764px" align="left" bgcolor="white">右侧内容</td>

               </tr>

           </table>

       </td></tr><!--内容-->

       <tr bgcolor="white" height="10px" ><td></td></tr><!--空隙-->

       <tr bgcolor="black" width="100%" height="80px"><td></td></tr><!--页脚-->

    </table>

    </body>

</html>


代码如上,可是内容行实现效果和题中给的不一样。

正在回答 回答被采纳积分+1

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

9回答
慕虎8092331 2017-10-25 17:11:01
  1. 在左侧内容和右侧内容那里不需要再添加align属性了

  2. 每一个tr你都添加了width=100%。其实没必要,可以都删掉,在开始table标签里面加一个width=100%,就行了

    你再试试吧!不行再说

提问者 xiaoyuan1 2017-09-07 15:37:18

http://img1.sycdn.imooc.com/climg//59b0f6ed000154f708450491.jpg老师,效果还是不一样,请问一下,显示效果和浏览器有关吗?

  • Miss路 #1
    点击全屏看效果,或者在本地的浏览器上看。
    2017-09-07 16:21:06
小丸子爱吃菜 2017-09-07 15:28:45
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta charset="utf-8">
</head>
    <body>
    <!-- 在此编写代码 -->
    <table align="center" width="100%">
       <tr bgcolor="pink" width="100%" height="80px"><td>页头</td></tr><!--页头-->
       <tr bgcolor="white" height="10px"><td></td></tr><!--空隙-->
       <tr bgcolor="orange"><td>
           <table align="center">
               <tr >
                   <td width="240px" align="right" bgcolor="white">左侧内容</td>
                   <td width="20px"></td>
                   <td width="764px" align="left" bgcolor="white">右侧内容</td>
               </tr>
           </table>
       </td></tr><!--内容-->
       <tr bgcolor="white" height="10px" ><td></td></tr><!--空隙-->
       <tr bgcolor="black" width="100%" height="80px"><td></td></tr><!--页脚-->
    </table>
    </body>
</html>


提问者 xiaoyuan1 2017-09-07 15:21:59

老师,我试了,效果还是和给出来的效果不一样

好帮手慕糖 2017-09-07 14:10:59

你按照上面老师的建议:给最外层的table设置width为100%就可以与效果图一致了。

祝学习愉快~

提问者 xiaoyuan1 2017-09-07 13:20:29

老师,左侧内容和右侧内容的橘色所占比例明显不一样。

Miss路 2017-09-07 11:24:22

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

上面是效果图,你自己对比一下,看看哪里不一样。祝学习愉快!

提问者 xiaoyuan1 2017-09-07 10:51:14

http://img1.sycdn.imooc.com/climg//59b0b3fb0001fab908930067.jpg我的是这样的,和页面效果的内容那不一样

小丸子爱吃菜 2017-09-07 09:36:42

给最外层的table设置width为100%就可以了!

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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