行的颜色设置和文字居中发生了矛盾不知道怎么修复
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
a{text-decoration:none;
font-weight: bold;
}
a:link{color:black;}
a:visited{color:gray;}
a:hover{color:blue;}
a:active{color:green;}
table{boder-style:none;}
p{font-size:10px}
</style>
</head>
<body>
<!--表格布局开始-->
<table width="100%" cellpadding="0" cellspacing="0">
<!--顶部布局-->
<tr bgcolor="#E1F2F9" width="100%" >
<td align="left"><img src="img/logo.png"/></td>
<td >
<span><a href="#">学校概况 </a></span>
<span><a href="#">机构设置 </a></span>
<span><a href="#">师资团队 </a></span>
<span><a href="#">科学研究 </a></span>
<span><a href="#">招生就业 </a></span>
<span><a href="#">图书馆 </a></span>
<span><a href="#">校长信箱 </a></span>
<span><a href="#">校园导航 </a></span>
</td>
<td align="left" width="15%">
<form action="">
<span style="text-weight:bold;">快速通道</span>
<select name="dx" id="dx">
<option value="111" selected>1</option>
<option value="222">2</option>
<option value="333">3</option>
<option value="444">4</option>
<option value="555">5</option>
</select>
</form>
</td>
</tr>
</table>
</td>
</tr>
<!--banner布局-->
<tr >
<td colspan="3"><img width="100%" src="img/banner.jpg"/></td>
</tr>
<!--新闻区-->
<tr width="100%" align="center">
<td colspan="3">
<table align="center">
<td>
<h4>慕课快讯 基层采风 媒体聚焦 慕课视频 >></h4>
<p>> 慕课平台课程扩容 涵盖多个领域 12-30</p>
<p>> 李克强主持座谈会 葛优刘国梁被请进中南海 12-30</p>
<p>> 台军演习"歼灭"解放军 专家:自欺欺人 12-30</p>
<p>> 气象局停发霾预警? 回应:正协商联合发布机制 12-30</p>
<p>> 独家:小米影业解散宣发部门 宣布成立一年后刹车 12-30</p>
<p>> “哑巴群众”开口说话 是稿件有误还是新闻造假? 12-30</p>
<p>> 要置业,看看2017全球楼市掘金路线图 12-30</p>
<p>> 王健林与房地产越来越远? 贾跃亭与房地产越来越近 12-30</p>
</td>
<td >
<h4>慕课快讯 基层采风 媒体聚焦 慕课视频 >></h4>
<p>> 慕课平台课程扩容 涵盖多个领域 12-30</p>
<p>> 李克强主持座谈会 葛优刘国梁被请进中南海 12-30</p>
<p>> 台军演习"歼灭"解放军 专家:自欺欺人 12-30</p>
<p>> 气象局停发霾预警? 回应:正协商联合发布机制 12-30</p>
<p>> 独家:小米影业解散宣发部门 宣布成立一年后刹车 12-30</p>
<p>> 要置业,看看2017全球楼市掘金路线图 12-30</p>
<p>> “哑巴群众”开口说话 是稿件有误还是新闻造假? 12-30</p>
<p>> 王健林与房地产越来越远? 贾跃亭与房地产越来越近 12-30</p>
</td>
<td ><img src="img/weixin.png"></td>
</table>
</td>
<tr>
<td colspan="3" width="70% align="center">
<table align="center" cellpadding="5" cellspacing="20">
<tr>
<td align="texttop">近期专访</td>
</tr>
<tr>
<td>
<dl>
<dd><img src="img/1.png"></dd>
<dd>教育发展基金专题</dd>
</dl>
</td>
<td>
<dl>
<dd><img src="img/2.png"></dd>
<dd>教育发展基金专题</dd>
</dl>
</td>
<td>
<dl>
<dd><img src="img/3.png"></dd>
<dd>教育发展基金专题</dd>
</dl>
</td>
</tr>
</table>
</td>
</tr>
<!--友情链接区-->
<tr height="70px" >
<td colspan="3" >
<table bgcolor="aquamarine" width="100%" align="center" >
<tr >
<td >文化站点 </td>
<td >信息服务 </td>
<td >校友会 </td>
<td >QA系统 </td>
<td >教务管理系统 </td>
<td >网络教学平台 </td>
<td >vpn服务 </td>
<td >旧版入口 </td>
<td >站群系统 </td>
</tr>
</table>
</td>
</tr>
<!--页脚区-->
<tr >
<td colspan="3" >
<table bgcolor="#89A9BD" width="100%" height="20px">
<tr width="70%" style="text-align: center;">
<td >
Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
提问:我发现只有在table里面设置背景颜色才会显示,然而,现在又有矛盾了,如果想让颜色平铺整个宽度,设置width="100%"的话这整行的字就会从最左边开始显示,不美观。怎么让文字像现在这样显示,然后颜色又覆盖整行?
正在回答
可以嵌套一个table,然后给外层的table设置宽度为100%,并设置背景颜色,然后给里面的table设置宽度为80%或者是当的宽度。这是一种方法,还有一种方法,在你现在代码的基础上在左右两边各加上一个空的td,设置宽度为300px;注意要给友情链接区和地步设置适当的高度。
参考下面的写法:
一定要灵活处理,结合学过的内容,敢于去尝试。加油!
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星