> 웹 프론트엔드 > HTML 튜토리얼 > 请问类似于这样的css 如何优化_html/css_WEB-ITnose

请问类似于这样的css 如何优化_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:17:54
원래의
1187명이 탐색했습니다.

#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的背景。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿