How to optimize css similar to this_html/css_WEB-ITnose-HTML Tutorial-php.cn

How to optimize css similar to this_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:17:54

Original

1187 people have browsed it

#ndcx ul li{background:url(2012ndcximg/ndcx_01.jpg) no-repeat center top;height:100px;}

There are about 10 li backgrounds corresponding to the pictures ndcx_01.jpg ndcx_02.jpg ....

Reply to discussion (solution)

Maybe there is something wrong with the css? Pictures with a width of 1800px are in the center at any resolution and have no left or right scroll bars.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>xxxx</title><style type="text/css">body,div,ul,li,h1,h2,h3,h4,h5,h6,dl,dd,input{margin:0; padding:0;}  ul,li{list-style:none;}  /**/#ndcx ul li{background-repeat:no-repeat;background-position:center top;height:149px;} #ndcxli1{background-image:url(2012ndcximg/ndcx_01.jpg);}#ndcxli2{background-image:url(2012ndcximg/ndcx_02.jpg);}#ndcxli3{background-image:url(2012ndcximg/ndcx_03.jpg);}#ndcxli4{background-image:url(2012ndcximg/ndcx_04.jpg);}#ndcxli5{background-image:url(2012ndcximg/ndcx_05.jpg);}#ndcxli6{background-image:url(2012ndcximg/ndcx_06.gif);margin:-330px 0 0 85px;z-index:2;}.lasttime{margin:0 auto;width:500px;font:45px Arial;color:#fff;z-index:1;letter-spacing:4px;padding-top:93px;}.lasttime dl dd{float:left;}</style></head><body><div id="ndcx">	<ul>		<li id="ndcxli1"></li>		<li id="ndcxli2"></li>		<li id="ndcxli3">			<div class="lasttime">				<dl>					<dd style="padding-left:116px;">45</dd>					<dd style="padding-left:60px;">45</dd>					<dd style="padding-left:33px;">45</dd>					<dd style="padding-left:32px;">45</dd>			  	</dl>			</div>		</li>		<li id="ndcxli4"></li>		<li id="ndcxli5"></li>		<li id="ndcxli6"></li>	</ul></div></body></html>

Copy after login

There is a compatibility issue with IE6 and IE7. There is a gap in the middle and debugging is not good. . . .

Someone, please help me take a look. .

Set it up with js. . .

Add this vertical-align:bottom to li, try it

#ydhd5 a{background:url(ydhd_05.jpg) no-repeat center top;height:323px;cursor: hand;display:block;}

< /div>
I don’t want the entire image to be the hotspot right now. You want to make a certain part of the picture a hot spot. Is it possible to use coords?
However, the image used as the background cannot be directly selected using tools. How can I control it if I write the coordinates myself?

I came here to study

Please give me some advice.

The original poster, try adding overflow:auto; to ul.

The original poster, try adding overflow:auto; to ul.
6F

Why doesn’t the poster make the background image into a large picture and use position to position the background of each li.