7_22_html_美食网设计

今天按照提供的网页完整图片试着设计一张美食网的首页,这张网页整体内容还是很多的,主要是利用表格对整个网页进行布局,再根据每一块具体需要实现的效果在相应位置的单元格内嵌套表格;

总的来说,还是需要对网页有一个整体的了解,大致知道怎么布局,我觉得这需要我们有一个比较好的直觉,比如看到网页的一部分,认真研究一下,就能知道大致需要设计一个几行几列的表格可以相对简单的实现这部分内容;

在知道了一个部分需要如何设计表格之后就要开始coding了,现在我有的一些经验是在coding之前,最好先定好这个表格的widthheigth;在<table></table>标签中我们应该先设置

border=”0”,cellpadding=””,cellspacing=”0”,widthheigth设置成预先定好的,这样可以保证每一个表格在边框等属性上的一致和比较直观的看出代码设计的效果;在<tr></tr><td></td>标签中应该在需要的时候设置widthheigth属性,注意<tr></tr>属性没有width属性;

虽然我之前说了我们应该对布局表格有比较好的直觉,但我们还是应该尽量避免过多的表格嵌套,否则代码量会非常多;今天我为了实现网页的左半部分内容,coding1000+行代码,而周围的同学有的只写了300+的代码,显然可以用也少的代码实现同一种功能要好很多;不过我写的代码中有很多都是为了做到和图片上的效果一直而添加的,处女座有的时候就是想把事情做得完美一点。。。

另外在coding的时候,还需要注意的就是在很多需要的地方添加显而易见的注释,这样可以不至于回头看代码是忘记这些部分代码的功能;比如在一个大表格的开始和结尾添加注释,表示出开始和结束;

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值