主题内容新闻资讯排版的一些问题求解
来源：3-10 作业题
sukay
2019-02-26 22:21:27
问题一：主体内容的新闻部分用无序列表做的，导致最后不能和上下两行左对齐。除了不用无序列表做之外，还有别的办法可以让他们对齐吗？
问题二：主题新闻内容效果图都是一行，我做出来是二行，是要进行宽度调整，还是说有标签可以让他单行显示呢？
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <!--头部--> <div> <table bgcolor="#E1F2F9" width="100%" height="50px"> <tr> <td width="25%"><img src="images\logo.png"></td> <td> <table align="center" cellspacing="5px"> <tr> <td><h4>学校概况</h4></td> <td><h4>机构设置</h4></td> <td><h4>师资队伍</h4></td> <td><h4>科学研究</h4></td> <td><h4>招生就业</h4></td> <td><h4>图书馆</h4></td> <td><h4>校长信箱</h4></td> <td><h4>校园导航</h4></td> </tr> </table> </td> <td align="right" width="25%"><b>快速通道</b></td> <td><form><select><option>volvo</option></select></form></td> </tr> <tr> <td colspan="4"><img src="images\banner.jpg" width="100%"></td><!--banner图--> </tr> </table> </div> <!--主体内容--> <br> <table width="60%" align="center"> <tr> <td width="20%"> <table cellpadding="1px" cellspacing="0px" > <tr > <td><b>慕课快讯</b></td> <td><b>基层风采</b></td> <td><b>媒体聚焦</b></td> <td><b>慕课视频</b></td> <td><b>>></b></td> </tr> <tr> <td colspan="5"> <ul type="none"> <li><b>>慕课网平台扩容 涵盖多个领域 12-30</b></li> <li><b>>李克强主席座谈会 葛优刘国梁被请进中南海 12-30</b></li> <li><b>>台军演习“歼灭”解放军 专家：自欺欺人 12-30</b></li> <li><b>>气象局停发霾预警？回应：正协商联合发布机制 12-30</b></li> <li><b>>独家：小米影业解散宣发部门 宣布成立一年后刹车 12-30</b></li> <li><b>>“哑巴群众”开口说话 是稿件有误还是新闻造假？ 12-30</b></li> <li><b>>要置业，看看2017全球楼市掘金路线图 12-30</b></li> <li><b>>王健林与房地产越来越远？贾跃亭与房地产越来越近 12-30</b></li> </ul> </td> </tr> </table> </td> <td width="20%"> <table cellpadding="1px" cellspacing="0px"> <tr > <td><b>慕课快讯</b></td> <td><b>基层风采</b></td> <td><b>媒体聚焦</b></td> <td><b>慕课视频</b></td> <td><b>>></b></td> </tr> <tr> <td colspan="5"> <ul type="none"> <li><b>>慕课网平台扩容 涵盖多个领域 12-30</b></li> <li><b>>李克强主席座谈会 葛优刘国梁被请进中南海 12-30</b></li> <li><b>>台军演习“歼灭”解放军 专家：自欺欺人 12-30</b></li> <li><b>>气象局停发霾预警？回应：正协商联合发布机制 12-30</b></li> <li><b>>独家：小米影业解散宣发部门 宣布成立一年后刹车 12-30</b></li> <li><b>>“哑巴群众”开口说话 是稿件有误还是新闻造假？ 12-30</b></li> <li><b>>要置业，看看2017全球楼市掘金路线图 12-30</b></li> <li><b>>王健林与房地产越来越远？贾跃亭与房地产越来越近 12-30</b></li> </ul> </td> </tr> </table> </td> <td width="20%" align="center" valign="center"><img src="images\weixin.png"> </td> </tr> <br> <tr> <td colspan="3"><h4>近期专题</h4></td> </tr> <tr> <td> <dl align="center"> <dd><img src="images\1.png"></dd> <dt><b>教育发展基金专题</b></dt> </dl> </td> <td> <dl align="center"> <dd><img src="images\2.png"></dd> <dt><b>教育发展基金专题</b></dt> </dl> </td> <td> <dl align="center"> <dd><img src="images\3.png"></dd> <dt><b>教育发展基金专题</b></dt> </dl> </td> </tr> </table> <!--页脚内容--> <table width="100%" align="center" cellspacing="0px"> <tr bgcolor="E1F2F9"> <td width="25%"></td> <td> <table align="center" cellspacing="10px"> <tr> <td><b>文化站点</b></td> <td><b>信息服务</b></td> <td><b>校友会</b></td> <td><b>OA系统</b></td> <td><b>教务管理系统</b></td> <td><b>网络教学平台</b></td> <td><b>vpn服务</b></td> <td><b>acm/oj</b></td> <td><b>旧版入口</b></td> <td><b>站群系统</b></td> </td> </tr> </table> </td> <td width="25%"></td> </tr> <tr bgcolor="#89a9bd" align="center" width="100%" height="70px"> <td colspan="3"><b>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</b></td> </tr> </table> </body> </html>
写回答
1回答
-
山河远阔ZZ
2019-02-27
同学你好。
1、无序列表自带间距样式，所以导致新闻标题跟新闻内容没有对齐。因为还没有学过css样式，所以建议标题跟内容都是用p标签，标题里面再嵌套一个b加粗标签。
2、在效果中，实现新闻区域的代码写的太过繁杂，可以参考老师的建议修改：
新闻区域分成一行三列。
外层的table设置固定的宽度（例如：1200），再给整体设置align=‘center’，让整体居中显示。
参考下图：
只要整体的宽度给的大一点，里面的新闻内容就不会因为表格的宽度小，而另起一行了。
3、建议近期专题区域，里面的图片和文字不要使用自定义列表标签，因为自定义列表标签也自带样式，在还没有学习css之前，可以使用img标签和b标签，在通过br标签进行换行，例如：
在td里面设置ailgn=‘’center”，实现“教育发展基金专题”文字相对于图片居中显示。
同学可以试一试哦，如果帮助到了你，欢迎采纳。
祝学习愉快！
1h019-02-27
相似问题