Home > Web Front-end > HTML Tutorial > After editing the table style, why does the table deform when I insert a picture? _html/css_WEB-ITnose

After editing the table style, why does the table deform when I insert a picture? _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:01:53
Original
2526 people have browsed it




最新教程




以下是对应的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" /></td><td class="hot"></td><td class="hot"></td><td class="hot"></td></tr></table></td><td id="rightA"></td></tr></table></body></html>
Copy after login


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

效果

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template