ホームページ  >  記事  >  ウェブフロントエンド  >  フロントエンドの専門家に、図のボックス内の 2 つのスタイルの問題を調べるのを手伝ってもらってください。コードは次のとおりです。 _html/css_WEB-ITnose

フロントエンドの専門家に、図のボックス内の 2 つのスタイルの問題を調べるのを手伝ってもらってください。コードは次のとおりです。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:12:08851ブラウズ

<!-- 幻灯片 --><div class="focus">	<div id="pic">		<ul>			<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="__PUBLIC__/img/2.jpg" /></a></li>			<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="__PUBLIC__/img/3.jpg" /></a></li>			<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery特效插件Validform制作一行代码搞定整站的表单验证" src="__PUBLIC__/img/4.jpg" /></a></li>			<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="__PUBLIC__/img/5.jpg" /></a></li>		</ul>	</div>	<div class="tip-bg"></div>	<div id="tip">		<ul>			<li id="smallimg_1" onclick="change(1)" class="current"></li>			<li id="smallimg_2" onclick="change(2)"></li>			<li id="smallimg_3" onclick="change(3)"></li>			<li id="smallimg_4" onclick="change(4)"></li>		</ul>	</div>	<div class="btn">		<ul>			<li class="btn-left" id="focus_btn_left" onclick="focus_prev();"></li>			<li class="btn-right" id="focus_btn_right" onclick="focus_next();"></li>		</ul>	</div></div>

@CHARSET "UTF-8";*{margin:0;padding:0;list-style-type:none;}a,img{border:none;}a{color:#1D569C;text-decoration:none;}a:hover{color:#ED3E22;text-decoration:underline;}/* focus */.focus{margin-left:30%;margin-top:3.5%;width:520px;height:300px;float:left;border:3px solid #d9d9d9;position:relative;}.focus #pic{width:520px;height:300px;overflow:hidden;}.focus #pic ul{width:4216px;height:300px;float:left;}.focus #pic li{width:520px;height:300px;float:left;}.focus #pic li img{width:520px;height:300px;float:left;}.focus .tip-bg{width:520px;height:21px;background:#000;filter:alpha(opacity=80);opacity:0.80;position:absolute;left:0;bottom:0;z-index:12;}.focus #tip{width:96px;height:14px;position:absolute;left:40%;margin:-17px 0 0;z-index:13;}.focus #tip ul li{width:14px;height:14px;float:left;display:inline;margin:0 5px;cursor:pointer;background:url(../img/focus_tip.png) no-repeat;}.focus #tip ul li.current{background:url(../img/focus_tip_current.png) no-repeat;}.focus .btn{width:42px;height:9px;position:absolute;right:0;bottom:5px;z-index:14;overflow:hidden;}.focus .btn ul{width:100%;float:left;}.focus .btn li{width:7px;height:9px;float:left;display:inline;margin:0 7px;cursor:pointer;overflow:hidden;}.focus .btn li.btn-left{background:url(../img/focus_btn_left.png) no-repeat left top;}.focus .btn li.btn-right{background:url(../img/focus_btn_right.png) no-repeat left top;}.focus .show{display:block!important;}


ディスカッション(解決策)への返信

CSSコードの7行目、border:3px Solid #d9d9d9を削除します
さらに、画像の幅と高さが繰り返し定義されているため、幅と高さを削除しますimg タグ内

CSS コードの 7 行目、境界線を削除します: 3px Solid #d9d9d9
さらに、画像の幅と高さが繰り返し定義されており、img タグ内の幅と高さを削除します

境界線のスタイルが解決され、画像が少しはみ出してしまう問題を解決するにはどうすればよいですか?

すでに解決しました。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。