>  기사  >  웹 프론트엔드  >  求前端高手帮我看看图中框里的两个样式问题,代码如下。_html/css_WEB-ITnose

求前端高手帮我看看图中框里的两个样式问题,代码如下。_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"    style="max-width:90%" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="__PUBLIC__/img/2.jpg" /></a></li>			<li><a href="http://www.17sucai.com/"><img width="620"    style="max-width:90%" alt="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="__PUBLIC__/img/3.jpg" /></a></li>			<li><a href="http://www.17sucai.com/"><img width="620"    style="max-width:90%" alt="jquery特效插件Validform制作一行代码搞定整站的表单验证" src="__PUBLIC__/img/4.jpg" /></a></li>			<li><a href="http://www.17sucai.com/"><img width="620"    style="max-width:90%" 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标签内的width和height

css代码第7行,去掉border:3px solid #d9d9d9 
另外,图片宽和高重复定义,去掉img标签内的width和height

边框样式解决了,那个图片挤出来了一点怎么解决呢?

已经解决了。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.