老师 可以给一个明确的页面结构代码吗?

老师 可以给一个明确的页面结构代码吗?

3-10的 页面结构代码图

正在回答

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

2回答

你好同学,首先老师很认真的给你回复的,本作业要求table布局的,老师给你的是一份详细的table布局思路。

老师也知道这个布局开发中不用,但是这个作业本身不就为了教大家开发中怎么样做网页,而是为了让同学们练习table表格的使用。如果按照你说的,要实际开发中能用,那么老师明确的告诉你,你在学习后面的课程时,还有很多是实际中用不到的。

但是我们就不学了吗?不是这样的。学习需要循序渐进,目前阶段,重要的是把基础学扎实,所以不管课程练习还是作业,针对的是让大家灵活运用所学知识,去完成一个效果。让大家学会这个知识怎么用,也锻炼大家的思维能力。就比如本作业吧,我们还没有学习到css样式。所以同学们就应该考虑在没有css样式的前提下,要如何实现这个布局呢?那么前面学习了table布局,这里正好就应用上。

所以刚入门,不要先考虑实际开发中怎么样做,而是要想我怎么用前面学过的知识去实现效果。等你们基础掌握的多了。像后面越高级的阶段,会越接近实际开发的情况。

建议同学按照老师上一次的思路去练习一下。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕夭夭 2019-11-10 10:12:01

同学你好,可以参考如下思路实战一下:

整体思路:整个页面放在一个table里面,然后顶部,banner图,新闻区,近期专题区,友情链接和尾部分为六部分分别放在六个<tr>中,每个部分的宽度为100%.

整体结构如下:

http://img1.sycdn.imooc.com//climg/5dc7719c0939436c02560457.jpg

1.顶部:

顶部内容嵌套一个table,然后分左中右三部分,分别用<td>存放logo,导航和下拉列表.

http://img1.sycdn.imooc.com//climg/5dc771b709019b0105540024.jpg

结构如下:

导航里面的每一个导航项可以使用span包裹即可

http://img1.sycdn.imooc.com//climg/5dc7715d099d235602320159.jpg

2.banner图:

banner图片宽度也是100%

http://img1.sycdn.imooc.com//climg/5dc771630962afa305540116.jpg


3.新闻区:

新闻区的布局建议放在一个表格中,分一行三列布局.列表使用p嵌套.表格建议宽度设置为1200px,并设置居中. 使用>或者&gt;实现箭头效果

 http://img1.sycdn.imooc.com//climg/5dc7717e09d8288405540126.jpg


参考代码:

http://img1.sycdn.imooc.com//climg/5dc7717a092f9f8d05540368.jpg


4.近期专题:

专题区也放在一个表格中,分两行三列显示.标题可以使用单元格合并(colspan="3").表格建议宽度设置为1200px,并设置居中 . 图片与文字需要设置居中.

http://img1.sycdn.imooc.com//climg/5dc771770994ea6805540080.jpg


参考代码:

http://img1.sycdn.imooc.com//climg/5dc7717c0906646205540383.jpg


5.友情链接:

友情链接的整体宽度为100%,设置固定的高度,内容水平垂直居中,设置与效果图相同的背景色

http://img1.sycdn.imooc.com//climg/5dc7718409c5dd6d05540064.jpg


6.尾部:

尾部的整体宽度为100%,设置固定的高度,内容水平垂直居中,设置与效果图相同的背景色

http://img1.sycdn.imooc.com//climg/5dc771910918c4c305540058.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 Rain_2020 #1
    这是认真的回复吗? 如果你正式上班了 会用这样的代码写页面吗?
    2019-11-10 15:52:24
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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