Heim >Web-Frontend >HTML-Tutorial >请问类似于这样的css 如何优化_html/css_WEB-ITnose
请问类似于这样的css 如何优化_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:541164Durchsuche
#ndcx ul li{background:url(2012ndcximg/ndcx_01.jpg) no-repeat center top;height:100px;}
大概有10个li 背景 分别对应图片 ndcx_01.jpg ndcx_02.jpg....
回复讨论(解决方案)
css可能有点问题？ width 1800px 的图片在什么分辨率下都 局中且没有左右滚动条。
<!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> IE6 IE7兼容有问题。中间有间距调试不好了。。。。
那位帮忙看下啊。。
用js吧设置吧。。。
给li加个这个吧 vertical-align:bottom,试试看
#ydhd5 a{background:url(ydhd_05.jpg) no-repeat center top;height:323px;cursor:hand;display:block;}
我现在不想让 整个图片作为热点。想让图片的某一部分，做为热点。用coords可以吗？
可是作为背景的图片 无法用工具直接选取。 自己写坐标的话 怎么控制？
我是过来学习的
求大佬 指点。
楼主，给ul加个 overflow:auto; 试试。
楼主，给ul加个 overflow:auto; 试试。
6F
楼主为什么不把背景图片做成一个大图，用position定位每个li的背景。
Stellungnahme：
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
Vorheriger Artikel：<div class="banner"><img src="img/banner.gif" alt="" /></div>_html/css_WEB-ITnoseNächster Artikel：北京交通违章查询网站_html/css_WEB-ITnose