论坛

标题: 求解答 [打印本页]
作者: 微风123    时间: 2017-10-18 16:13
标题: 求解答
图片跟文字不能顶端对齐？两行单元格之间有间隙怎么办？
作者: lori棒棒糖    时间: 2017-10-18 17:32
这个是做的什么作业？dw基础课程？把代码全部复制粘贴发上来看下
作者: 微风123    时间: 2017-10-20 11:25
lori棒棒糖 发表于 2017-10-18 17:32
这个是做的什么作业？dw基础课程？把代码全部复制粘贴发上来看下
  1. <table width="1265" border="0" cellspacing="0" cellpadding="0">
  2.   <tr align="center" bgcolor="#CCCCCC">
  3.     <td height="32" colspan="2"><strong>最新更新</strong></td>
  4.     <td width="149"><strong>平面设计学院</strong></td>
  5.     <td colspan="2"><strong>室内设计学院</strong></td>
  6.     <td width="198"><strong>园林景观设计学院</strong></td>
  7.     <td colspan="2"><strong>机械设计学院</strong></td>
  8.     <td width="201"><strong>影视后期制作学院</strong></td>
  9.   </tr>
  10.   <tr align="left">
  11.     <td width="185" height="95" align="left" valign="top"><img src="images/227-small.jpg" width="150" height="95" /></td>
  12.     <td height="95" colspan="2" align="left" valign="top"><p>创意海报设计教程</p>
  13.     <p><font size="-1">讲师：吴穆昌</font></p></td>
  14.     <td width="185" height="95" align="left" valign="top"><img src="images/228-small.jpg" width="150" height="95" /></td>
  15.     <td height="95" colspan="2" align="left" valign="top"><p>UI动效设计实战教程</p>
  16.     <p><font size="-1">讲师：Fanori</font></p></td>
  17.     <td width="185" height="95" valign="top"><img src="images/226-small.jpg" width="150" height="95" /></td>
  18.     <td height="95" colspan="2" valign="top"><p>C4D材质灯光渲染中级教程</p>
  19.     <p><font size="-1">讲师：陈真</font></p></td>
  20.   </tr>
  21.   <tr align="left">
  22.     <td height="95" valign="top"><img src="images/224-small.jpg" width="150" height="95" /></td>
  23.     <td height="95" colspan="2" valign="top"><p>版式设计全案例高级教程</p>
  24.     <p><font size="-1">讲师：江遥</font></p></td>
  25.     <td width="185" height="95" valign="top"><img src="images/225-small.jpg" width="150" height="95" /></td>
  26.     <td height="95" colspan="2" valign="top"><p>C4D材质灯光渲染初级教程</p>
  27.     <p><font size="-1">讲师：陈真</font></p></td>
  28.     <td width="185" height="95" valign="top"><img src="images/222-small.jpg" width="150" height="95" /></td>
  29.     <td height="95" colspan="2" valign="top"><p>VRay for Sketchup—草图大师渲染教程</p>
  30.     <p><font size="-1">讲师：李增瑞</font></p></td>
  31.   </tr>
  32.   <tr align="left">
  33.     <td height="95" valign="top"><img src="images/223-small.jpg" width="150" height="95" /></td>
  34.     <td height="95" colspan="2" valign="top"><p>3ds Max 全景效果图教程</p>
  35.     <p><font size="-1">讲师：智慧聪</font></p></td>
  36.     <td width="185" height="95" valign="top"><img src="images/221-small.jpg" width="150" height="95" /></td>
  37.     <td height="95" colspan="2" valign="top"><p>C4D+AE分镜创意设计课程</p>
  38.     <p><font size="-1">讲师：杨举聪</font></p></td>
  39.     <td width="185" height="95" valign="top"><img src="images/220-small.jpg" width="150" height="95" /></td>
  40.     <td height="95" colspan="2" valign="top"><p>Dreamweaver CC零基础入门教程</p>
  41.     <p><font size="-1">讲师：韩文强</font></p></td>
  42.   </tr>
  43.   <tr>
  44.     <td colspan="9">&nbsp;</td>
  45.   </tr>
  46. </table>
复制代码
作者: 微风123    时间: 2017-10-20 11:26
lori棒棒糖 发表于 2017-10-18 17:32
这个是做的什么作业？dw基础课程？把代码全部复制粘贴发上来看下

弄完以后就出现上面的两个问题
作者: 微风123    时间: 2017-10-20 11:27
lori棒棒糖 发表于 2017-10-18 17:32
这个是做的什么作业？dw基础课程？把代码全部复制粘贴发上来看下

也不算作业，只是模仿官网做的
作者: lori棒棒糖    时间: 2017-10-20 15:26
本帖最后由 lori棒棒糖 于 2017-10-20 15:32 编辑
微风123 发表于 2017-10-20 11:27
也不算作业，只是模仿官网做的

这是因为标签元素自带的margin造成的原因，后期学了css层叠样式表之后就会了，要想实现效果，有两种方法，第一种，可以复制该代码放到head标签内<style>
*{ margin:0; padding:0;}
</style>
[attach]109920[/attach]

字没顶对齐是因为margin造成的，间隙的问题是因为第6个课程的标题超出跳行了，高度就撑高了，所以图片这边也会跟着撑高的，就有了这个间隙。可以通过修改 样式来实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[img]file:///C:\Users\LORI\AppData\Local\Temp\[5UQ[BL(6~BS2JV6W}N6[%S.png[/img]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

">
<html xmlns="[img]file:///C:\Users\LORI\AppData\Local\Temp\[5UQ[BL(6~BS2JV6W}N6[%S.png[/img]http://www.w3.org/1999/xhtml

">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
font {
        display:block;
        padding-top:8px;
        color:#666666;
}
-->
</style></head>

<body>
<table width="1265" border="0" cellpadding="8" cellspacing="0">
  <tr align="center" bgcolor="#CCCCCC">
    <th width="210">最新更新</th>
    <th width="210">平面设计学院</th>
    <th width="210">室内设计学院</th>
    <th width="210">园林景观设计学院</th>
    <th width="210">机械设计学院</th>
    <th width="210">影视后期制作学院</th>
  </tr>
</table>
<table width="1265" border="0" cellspacing="0" cellpadding="8">
  <tr align="left">
    <td width="150" height="95" align="left" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/227-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" align="left" valign="top">创意海报设计教程
    <font size="-1">讲师：吴穆昌</font></td>
    <td width="150" height="95" align="left" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/228-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" align="left" valign="top">UI动效设计实战教程
    <font size="-1">讲师：Fanori</font></td>
    <td width="150" height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/226-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">C4D材质灯光渲染中级教程
    <font size="-1">讲师：陈真</font></td>
  </tr>
  <tr align="left">
    <td height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/224-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">版式设计全案例高级教程
    <font size="-1">讲师：江遥</font></td>
    <td width="150" height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/225-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">C4D材质灯光渲染初级教程
    <font size="-1">讲师：陈真</font></td>
    <td width="150" height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/222-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">VRay for Sketchup—草图大师渲染教程
    <font size="-1">讲师：李增瑞</font></td>
  </tr>
  <tr align="left">
    <td height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/223-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">3ds Max 全景效果图教程
    <font size="-1">讲师：智慧聪</font></td>
    <td width="150" height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/221-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">C4D+AE分镜创意设计课程
    <font size="-1">讲师：杨举聪</font></td>
    <td width="150" height="95" valign="top"><img src="file:///C:\Users\LORI\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://img.qinxue.com/tutorials/0/220-small.jpg

" width="150" height="95" /></td>
    <td height="95" colspan="2" valign="top">Dreamweaver CC零基础入门教程
    <font size="-1">讲师：韩文强</font></td>
  </tr>
  <tr>
    <td colspan="9">&nbsp;</td>
  </tr>
</table>
</body>
</html>











欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1