this_html/css_WEB-ITnose に似た CSS の最適化方法-htmlチュートリアル-php.cn

ディスカッションに返信（解決策）

ホームページ

ウェブフロントエンド

htmlチュートリアル

this_html/css_WEB-ITnose に似た CSS の最適化方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:17 PM

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

写真 ndcx_01.jpg ndcx_02.jpg に対応する約 10 li の背景があります....

ディスカッションに返信（解決策）

CSSに何か問題があるのでしょうか？幅 1800 ピクセルの画像は、どの解像度でも中央に表示され、左右のスクロールバーはありません。

<!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を使用して設定します。。。

このvertical-align:bottomをliに追加して試してみてください

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

画像全体がホットスポットとして表示されます。画像の特定の部分をホットスポットにしたいとします。コーディネートを利用することは可能でしょうか？
ただし、ツールを使用して背景画像を直接選択することはできません。自分で座標を書いた場合、どうやって制御すればよいでしょうか?

私は勉強するためにここに来ました

アドバイスをお願いします。

元の投稿者は、ul に overflow:auto を追加してみてください。

なぜポスターは背景画像を大きな画像にして、positionを使用して各リーの背景を配置しないのですか。

このウェブサイトの声明