Heim > Web-Frontend > HTML-Tutorial > 表格样式编辑好后,为什么一插入图片,表格就变形了?_html/css_WEB-ITnose

表格样式编辑好后,为什么一插入图片,表格就变形了?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:01:53
Original
2525 Leute haben es durchsucht








最新教程
表格样式编辑好后,为什么一插入图片,表格就变形了?_html/css_WEB-ITnose

以下是对应的CSS外部样式表:
#leftA{
width:660px;
height:200px;
}

#rightA{
width:220px;
height:200px;
}

#contentA{
width:660px;
height:170px;
}
.titleA{
width:66px;
height:25px;
font-weight:600;
font-size:16px;
color:#990066;
padding-left:35px;
background:url(../picture/xinzhi.jpg)
}

.hot{
width:165px;
height:120px; 
text-align:center;
}

.hot img{
width:140px;
height:100px;
border:#003366 1px solid;
}
插入hot1图片前,表格正常:

插入hot1图片后,无论图片缩放多小,表格都变形:


目前只学习了html及css,其他的还没有学。
请帮我看看怎么回事,哪里出问题了,谢谢!!!



回复讨论(解决方案)

<!DOCTYPE HTML><head><title>数据</title><meta characterset="utf-8" /><style type="text/css">	#leftA{width:660px;height:200px;}#rightA{width:220px;height:200px;}#contentA{width:660px;height:170px;}.titleA{width:66px;height:25px;font-weight:600;font-size:16px;color:#990066;padding-left:35px;background:url(../picture/xinzhi.jpg)}/********************************************************骚年,id的css选择器对应的是:"#";而你用的.hot对应的应该是class.		ID:          class:	#test{		background-color:red;	}				HTML:				<div id="test">abc</div>		class:		css:		.tes{		background-color:red;		}				HTML:				<div class="tes">abcdef</div>	每个页面只能有一个id,但是可以有多个class.****************************************************************/.hot{width:165px;height:120px; text-align:center;overflow: hidden;/*超出部分自动隐藏*/}.hot img{width:140px;height:100px;border:#003366 1px solid;overflow: hidden;/*超出部分自动隐藏*/}</style> </head><body><table cellpadding="0" cellspacing="0" border="1" align="center"><tr><td id="leftA"><table cellpadding="0" cellspacing="0" border="1" id="contentA"><tr><td class="titleA" colspan="4">最新教程</td></tr><tr><td class="hot"><img  src="picture/hot1.jpg" / alt="表格样式编辑好后,为什么一插入图片,表格就变形了?_html/css_WEB-ITnose" ></td><td class="hot"></td><td class="hot"></td><td class="hot"></td></tr></table></td><td id="rightA"></td></tr></table></body></html>
Nach dem Login kopieren


你用错css选择器了,你看下,可以了

效果

老师说的太好了,还是自己不认真啊,哈哈……谢谢了!!!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage