求前端高手帮我看看图中框里的两个样式问题,代码如下。_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:12:08
Original
854 people have browsed it

<!-- 幻灯片 --><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>
Copy after login

@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;}
Copy after login


回复讨论(解决方案)

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

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

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

已经解决了。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template