Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 3月28号作业
Blogger Information
Blog 9
fans 0
comment 1
visits 4209
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月28号作业
红叶的博客
Original
566 people have browsed it

HTML代码：

实例

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<!-- 重置样式 -->
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!-- 公共样式 -->
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<!-- 本页样式 -->
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.SuperSlide.2.1.1.js"></script>
	<script src="js/functions.js"></script>
	<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
	eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
	if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>
	<div class="header">
		<div class="w1200 head">
			<div class="top">
				<div class="welcome">欢迎进入新疆某某某网络服务有限公司官网</div>
				<div class="tel">
					<a href="#" onclick='addFavorite("非IE浏览器不支持此功能，请按Ctrl+D手动收藏！");' style='cursor:pointer;' title='收藏本站'>收藏本站</a> | <span>服务热线：0991-6666666</span>
				</div>
				<div class="search">
					<form method="post" action="/search/">
						<input name="keyword" class="put"  type="text" size="18" value="请输入信息搜索" onFocus="javascript:if(this.value=='请输入信息搜索') this.value='';" onBlur="javascript:if(this.value=='') this.value='请输入信息搜索';" />
						<input type="submit" name="button" id="button" value="搜索" class="but" />
					</form>
				</div>
			</div>
			<div class="logo"><a href="/" title="标题"><img src="images/a2.png" alt="标题"></a></div>			
			<div class="menu">
				<ul id="nav">
					<li class="one"><a href="/" id="s"  title="公司首页">首页</a></li>
					<li class="one"><a href="#" title="关于我们">关于我们</a>
						<ul class="submenu">        
							<li><a href="#" title="公司简介">公司简介</a></li>
							<li><a href="#">公司文化</a></li>
							<li><a href="#">公司荣誉</a></li>
							<li><a href="#">公司荣誉</a></li>
						</ul>
					</li>
					<li class="one"><a href="#" title="网站首页">新闻中心</a>
						<ul class="submenu">        
							<li><a href="#" title="公司简介">公司简介</a></li>
							<li><a href="#">公司文化</a></li>
							<li><a href="#">公司荣誉</a></li>
							<li><a href="#">公司荣誉</a></li>
						</ul>
					</li>
					<li class="one"><a href="#" title="网站首页">业务领域</a>
						<ul class="submenu">        
							<li><a href="#" title="公司简介">公司简介</a></li>
							<li><a href="#">公司文化</a></li>
							<li><a href="#">公司荣誉</a></li>
							<li><a href="#">公司荣誉</a></li>
						</ul>
					</li>
					<li class="one"><a href="#" title="网站首页">合作案例</a>
						<ul class="submenu">        
							<li><a href="#" title="公司简介">公司简介</a></li>
							<li><a href="#">公司文化</a></li>
							<li><a href="#">公司荣誉</a></li>
							<li><a href="#">公司荣誉</a></li>
						</ul>
					</li>
					<li class="one"><a href="#" title="网站首页">企业文化</a>
						<ul class="submenu">        
							<li><a href="#" title="公司简介">公司简介</a></li>
							<li><a href="#">公司文化</a></li>
							<li><a href="#">公司荣誉</a></li>
							<li><a href="#">公司荣誉</a></li>
						</ul>
					</li>
					<li class="one"><a href="#" title="网站首页">联系我们</a>
						<ul class="submenu">        
							<li><a href="#" title="公司简介">公司简介</a></li>
							<li><a href="#">公司文化</a></li>
							<li><a href="#">公司荣誉</a></li>
							<li><a href="#">公司荣誉</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>		
	<div class="slider">		
		<div class="bd">
			<ul>				
				<li><a target="_blank" href="#"><img src="images/a6.jpg" /></a></li>
				<li><a target="_blank" href="#"><img src="images/a6.jpg" /></a></li>
				<li><a target="_blank" href="#"><img src="images/a6.jpg" /></a></li>	
				<li><a target="_blank" href="#"><img src="images/a6.jpg" /></a></li>	
			</ul>
		</div>
		<div class="hd"><ul></ul></div>
		<div class="pnBtn prev">
			<span class="blackBg"></span>
			<a class="arrow" href="javascript:void(0)"></a>
		</div>
		<div class="pnBtn next">
			<span class="blackBg"></span>
			<a class="arrow" href="javascript:void(0)"></a>
		</div>
	</div>
	<script type="text/javascript">
		jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );
		jQuery(".slider").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop",  autoPlay:true, vis:3, autoPage:true});
	</script>
	<div class="w1200 clearfix indexserver">
		<h2 class="indexh2">业务领域</h2>
		<div class="subt">BUSINESS AREAS</div>
		<div class="info">我们将是您最优方案的提供者，最专业的的执行者，最可信赖的合作者</div>
		<ul class="clearfix">
			<li>
				<a href="#">
					<img src="images/a7.png" alt="居民住宅">
					<h3>居民住宅</h3>
					<span>把社区服务到家，足不出户拓展生活空间，体验最便捷的品质生活。</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/a8.png" alt="居民住宅">
					<h3>居民住宅</h3>
					<span>把社区服务到家，足不出户拓展生活空间，体验最便捷的品质生活。</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/a9.png" alt="居民住宅">
					<h3>居民住宅</h3>
					<span>把社区服务到家，足不出户拓展生活空间，体验最便捷的品质生活。</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/a10.png" alt="居民住宅">
					<h3>居民住宅</h3>
					<span>把社区服务到家，足不出户拓展生活空间，体验最便捷的品质生活。</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/a11.png" alt="居民住宅">
					<h3>居民住宅</h3>
					<span>把社区服务到家，足不出户拓展生活空间，体验最便捷的品质生活。</span>
				</a>
			</li>
		</ul>
	</div>
	<div class="indexnews clearfix">
		<div class="w1200 clearfix">
			<h2 class="indexh2">合作案例</h2>
			<div class="subt">COOPERATION CASE</div>
			<div class="info">强化沟通促和谐，携手共建美家园，共同创建文明城市，服务一直在路上</div>
			<div class="picScroll-left">				
				<div class="bd">
					<ul class="picList">
						<li>
							<a href="#" target="_blank">
								<div class="pic"><img src="images/a18.jpg" /></div>
								<div class="title">乌鲁木齐红光山别墅 </div>
							</a>
						</li>
						<li>
							<a href="#" target="_blank">
								<div class="pic"><img src="images/a18.jpg" /></div>
								<div class="title">乌鲁木齐红光山别墅 </div>
							</a>
						</li>
						<li>
							<a href="#" target="_blank">
								<div class="pic"><img src="images/a18.jpg" /></div>
								<div class="title">乌鲁木齐红光山别墅 </div>
							</a>
						</li>
						<li>
							<a href="#" target="_blank">
								<div class="pic"><img src="images/a18.jpg" /></div>
								<div class="title">乌鲁木齐红光山别墅 </div>
							</a>
						</li>
						<li>
							<a href="#" target="_blank">
								<div class="pic"><img src="images/a18.jpg" /></div>
								<div class="title">乌鲁木齐红光山别墅 </div>
							</a>
						</li>
						<li>
							<a href="#" target="_blank">
								<div class="pic"><img src="images/a18.jpg" /></div>
								<div class="title">乌鲁木齐红光山别墅 </div>
							</a>
						</li>
					</ul>
				</div>
				<div class="hd">
					<ul></ul>
				</div>
			</div>
			<script type="text/javascript">
				jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,scroll:3,vis:3,trigger:"mouseover",interTime:"2500"});
			</script>
		</div>
	</div>
	<div class="indexabout w1200 clearfix">
		<h2 class="indexh2">关于我们</h2>
		<div class="subt">ABOUT US</div>
		<div class="info">因您的需要而存在，因您的满意而精彩</div>
		<div class="indexaboutc clearfix">
			<div class="fl indexaboutimg">
				<div class="i1"></div>
				<div class="i2"><img src="images/a12.jpg" alt=""></div>
				<div class="i3">About us</div>
				<div class="i4"></div>
			</div>
			<div class="fr indexabouttext">
				<div class="slideTxtBox">
					<div class="hd">
						<ul><li><a href="#">公司简介</a></li><li><a href="#">组织框架</a></li><li><a href="#">资质荣誉</a></li><li><a href="#">企业大事记</a></li></ul>
					</div>
					<div class="bd">
						<ul>
							<li class="tabtext"><p>公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介公司简介</p></li>
							<li class="tabmore"><a href="#">了解更多</a></li>
						</ul>
						<ul>
							<li class="tabtext"><p>公司简介</p></li>
							<li class="tabmore"><a href="#">了解更多</a></li>
						</ul>
						<ul>
							<li class="tabtext"><p>公司简介</p></li>
							<li class="tabmore"><a href="#">了解更多</a></li>
						</ul>
						<ul>
							<li class="tabtext"><p>公司简介</p></li>
							<li class="tabmore"><a href="#">了解更多</a></li>
						</ul>
					</div>
				</div>
				<script type="text/javascript">jQuery(".slideTxtBox").slide();</script>
			</div>
		</div>		
	</div>	
	<div class="clearfix bottom">
		<div class="w1200 clearfix">			
			<div class="bnav clearfix">
				<dl>
					<dt><a href="">关于我们</a></dt>
					<dd><a href="">公司简介</a></dd>
					<dd><a href="">组织框架</a></dd>
					<dd><a href="">资质荣誉</a></dd>
					<dd><a href="">企业大事记</a></dd>
				</dl>
				<dl>
					<dt><a href="">新闻资讯</a></dt>
					<dd><a href="">公司新闻</a></dd>
					<dd><a href="">行业动态</a></dd>
					<dd><a href="">媒体聚焦</a></dd>	
				</dl>
				<dl>
					<dt><a href="">业务领域</a></dt>
					<dd><a href="">居民住宅</a></dd>
					<dd><a href="">企业办公</a></dd>
					<dd><a href="">商业场所</a></dd>
					<dd><a href="">市政保洁</a></dd>
					<dd><a href="">大型车站</a></dd>
				</dl>
				<dl>
					<dt><a href="">企业文化</a></dt>
					<dd><a href="">企业发展</a></dd>
					<dd><a href="">社会责任</a></dd>
					<dd><a href="">公益活动</a></dd>	
				</dl>
				<dl>
					<dt><a href="">联系我们</a></dt>
					<dd><a href="">加入我们</a></dd>
					<dd><a href="">联系方式</a></dd>
				</dl>
				<div class="b2wm">
					<div class="btel">0991-4592166</div>
					<div class="olink"><a href="#">相关链接>></a></div>
					<div class="olinks">
						<form id="form1" name="form1" method="post" action="">
							<select name=""onchange="javascript:if (this.options[this.selectedIndex].value != '')
							window.open(this.options[this.selectedIndex].value);this.options[0].selected;"> 
							<option value="http://www.baidu.com">百度网络科技有限公司</option>
							<option value="http://www.baidu.com">百度网络科技有限公司</option>
							<option value="http://www.baidu.com">百度网络科技有限公司</option>
						</select>
					</form>
				</div>
			</div>
		</div>
		<div class="copy">
			Copyright © 2018  新疆XXXXXXXXXX有限公司  All Rights Reserved  版权所有，违者必究  新ICP备18003071号
		</div>
	</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

重置样式css

实例

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body,button,input,select,textarea{font: 14px/1.5 \5FAE\8F6F\96C5\9ED1, tahoma, arial, \5b8b\4f53, sans-serif;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol,menu,li{list-style:none outside none;}a,a:hover{text-decoration:none;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}html{overflow-y:scroll;}a,area{blr:expression(this.onFocus=this.blur())}:focus{outline:none;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,dialog{display:block;}
.clearfix:after{content:"\0020";display:block;height:0;clear:both;}.clearfix{zoom:1;}
a {color:#333;}
a:hover {color:#000;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

公共样式css

实例

.w1200{width: 1200px;margin: 0 auto;clear: both;}
.w260{width: 260px;overflow: hidden;}
.w900{width: 900px;overflow: hidden;}
.h10{font-size: 0px;line-height: 0px;height: 10px;overflow:hidden;clear: both;}
.fl{float: left;}
.fr{float: right;}

body{background:#fff url(../images/bg.jpg) repeat-x;}

.header{height: 142px;background: #fff;width: 100%;position: relative;z-index: 99;border-bottom: solid 4px #0BB757;}
.head{height: 142px;position:relative;z-index: 999;}
.head .logo{height: 108px;width: 400px;position: absolute;top:34px;left: 0;}
.head .logo a{height: 70px;width: 400px;overflow: hidden;display: block;padding-top:19px;}
.head .logo a img{height: 70px;width: 400px;}
.head .top{height: 34px;line-height: 34px;color: #7f7f7f;background: #F8F8F8;font-size: 12px;position: relative;}
.head .top a{color: #726F6F;}
.head .top a:hover{color: #444;}
.head .top .welcome{width: 400px;height: 34px;position: absolute;top: 0px;left: 0px;}
.head .top .tel{width: 230px;height: 34px;position: absolute;top: 0px;right: 155px;color: #7f7f7f;}
.head .top .tel a{color: #7f7f7f;}
.head .top .tel a:hover{color:#0BB757;}
.head .search{width: 154px;height: 26px;background: url(../images/a1.png) no-repeat;position: absolute;top: 4px;right: 0px;}
.head .search .put {font-size: 12px; color: #878787;text-decoration: none;width: 112px;height: 26px;border: none;float: left;background: none;padding: 0 5px 0 10px;line-height: 26px;}
.head .search .but {height: 26px;width: 27px;border: none;cursor: pointer;float: left;text-indent: -999px;overflow: hidden;background: none;}
.menu{height: 28px;position:absolute;z-index: 9999;width: 760px;top:75px;left: 460px;}
#nav { height:28px;}
#nav li {float: left;position:relative;margin: 0 8px;}
#nav li a { font-size: 15px; color: #262525; width:90px; text-align:center; height:28px; display:block; line-height:28px; }
#nav li a:hover,#nav li a#s{ color:#fff; background:url(../images/a3.png) no-repeat;}
#nav .submenu{display:none;position:absolute; left:0; top:28px;width:90px;padding:12px 0 0 0 !important; z-index:999;background: url(../images/a4.png) no-repeat center top;}
#nav .submenu li{height:26px !important;float:none !important;border-top: solid 1px #ddd;margin:0;}
#nav .submenu a{display:block; line-height:26px !important; height:26px !important;color:#3f3f3f;font-weight: normal !important;font-size:14px; background:#fff;}
#nav .submenu a:hover,#nav .submenu a.hover{color:#fff;background:#0BB757;}
#nav .submenu li:first-child{border-top: none;}

.banner{ clear: both; width: 100%; height: 450px;overflow: hidden;position: relative;z-index: 1;}



.bottom{height: 303px;width: 100%;overflow: hidden;background: url(../images/a13.jpg) repeat-x center center;}
.bottom .bnav{padding: 25px 0 0 0;height: 192px;}
.bottom dl{width: 100px;float:left;height: 190px;overflow: hidden;padding: 0 40px;}
.bottom dl dt{height: 36px;line-height: 26px;}
.bottom dl dt a{color: #D3D5D5;font-size: 14px;font-weight: bold;}
.bottom dl dt a:hover{color: #fff;}
.bottom dl dd{height: 30px;line-height: 20px;}
.bottom dl dd a{color: #B2B0B0;font-size: 12px;}
.bottom dl dd a:hover{color: #fff;}
.bottom .b2wm{width: 250px;float:right;height: 108px;padding: 4px 0 0 0px;font-size: 14px;color: #CECECE;}
.bottom .b2wm .btel{background: url(../images/a16.png) no-repeat; height: 38px;line-height: 38px;padding-left: 46px;font-size: 24px;color: #D3D5D5;}
.bottom .b2wm .olink a{background:#676B73 url(../images/a17.png) no-repeat 25px 5px; height: 25px;line-height: 25px;padding-left: 48px;font-size: 12px;color: #fff;width: 92px;display: block;margin: 20px 0 10px 0;}
.bottom .b2wm .olink a:hover{background:#888 url(../images/a17.png) no-repeat 25px 5px;}
.bottom .b2wm .olinks select{background:#676B73; height: 26px;line-height: 26px;font-size: 12px;color: #D3D5D5;border-radius: 2px;border-color: #7B7C7E;padding: 0 5px;}
.bottom .copy{font-size: 14px;color: #b2b2b2;text-align: center;clear: both;height: 30px;line-height: 30px;padding: 13px 0 0 0;}
.bottom .copy a{color: #b2b2b2;}
.bottom .copy a:hover{color: #fff;}
.bottom .copy img{vertical-align: middle;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

首页样式css

实例

.focusBox { position: relative; width:100%; height:450px; overflow: hidden;}
.focusBox .pic a { width:100%; height:450px; display: block;}
.focusBox .hd { overflow:hidden; zoom:1; position:absolute; bottom:36px; right:47%; z-index:3;}	
.focusBox .hd li{float:left; line-height:15px; text-align:center; font-size:12px; width:32px; height:7px; cursor:pointer; overflow:hidden; background:#fff; margin:0 5px; filter:alpha(opacity=100); opacity:1; -webkit-transition:All .5s ease;-moz-transition:All .5s ease;-o-transition:All .5s ease;}	
.focusBox .hd .on{ background:#0BB757; filter:alpha(opacity=100);opacity:1;}	
.focusBox .prev,	.focusBox .next { width:24px; height:44px; position:absolute; top:200px; z-index:3; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transition:All .5s ease;-moz-transition:All .5s ease;-o-transition:All .5s ease}	
.focusBox .prev { background-image:url(../images/a5.png); background-position:0 0; left:10%; }	
.focusBox .next { background-image:url(../images/a5.png); background-position:-24px 0; right:10%; }	
.focusBox .prev:hover,	.focusBox .next:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1 }	


.slider{ width:100%;  min-width:1200px;  height:480px;  position:relative; overflow:hidden; background:#fff; text-align:center;}
.slider .bd{ width:1200px; position:absolute; left:50%; margin-left:-600px  }
.slider .bd li{ width:1200px;  overflow:hidden; }
.slider .bd li img{ display:block; width:1200px; height:480px;    }
.slider .tempWrap{ overflow:visible !important }
.slider .tempWrap ul{  margin-left:-1200px !important; /*强制位置*/  }

.slider .hd{ position:absolute; width:100%; left:0;  z-index:1; height:8px; bottom:20px;  text-align:center;  }
.slider .hd li{ display:inline-block; *display:inline; zoom:1; width:32px; height:7px; cursor:pointer; overflow:hidden; background:#fff; margin:0 5px;filter:alpha(opacity=100);opacity:1;line-height: 100px;}
.slider .hd li.on{ background:#0BB757; filter:alpha(opacity=100);opacity:1;}
.slider .pnBtn{  position:absolute; z-index:1; top:0; width:100%;  height:480px; cursor:pointer;   }
.slider .prev{ left:-50%; margin-left:-600px;  }
.slider .next{ left:50%;  margin-left:600px;  }
.slider .pnBtn .blackBg{ display:block;  position:absolute; left:0; top:0; width:100%; height:480px; background:#000; filter:alpha(opacity=50);opacity:0.5;   }
.slider .pnBtn .arrow{position:absolute; top:218px; z-index:1; width:44px; height:44px;  }
.slider .pnBtn .arrow:hover{ filter:alpha(opacity=80);opacity:0.8; }
.slider .prev .arrow{ right:0; background:url(../images/a5.png) 0px 0 no-repeat;   }
.slider .next .arrow{ left:0; background:url(../images/a5.png) -52px 0 no-repeat;  }


.indexserver{}
h2.indexh2{color: #4D4D4D;font-size: 26px;line-height: 66px;height: 66px;border-bottom: solid 4px #0BB757;text-align: center;width: 110px;margin: 16px auto 6px auto;clear: both;}
div.subt{color: #a1a1a1;font-size: 16px;line-height: 30px;height: 30px;text-align: center;width: 800px;display: block;font-weight: normal;text-align: center;margin: 0 auto;}
div.info{color: #7E7E7F;font-size: 15px;line-height: 30px;height: 30px;text-align: center;width: 800px;display: block;font-weight: normal;text-align: center;margin: 0 auto;}
.indexserver ul{margin: 20px 0 46px 0;}
.indexserver li{float: left;margin-right:17px; }
.indexserver li.nom{float: left;margin-right:0px; }
.indexserver li a{border: solid 1px #ddd;background: #fff;width: 224px;height: 260px;display: block;overflow: hidden;}
.indexserver li a:hover{border: solid 1px #0BB757;background: #EBFFD7;}
.indexserver li a img{display: block;width: 100px;height: 100px;margin: 28px auto 0 auto;}
.indexserver li h3{text-align: center;height: 45px;line-height: 50px;overflow: hidden;font-size:18px;color: #333;font-weight: normal;overflow: hidden;}
.indexserver li span{text-align: left;line-height:1.8;font-size:14px;color: #8C8C8C;font-weight: normal;display: block;padding: 0 9px;}

.indexnews{}
.indexnews{background: #F4F9FD;width: 100%;padding-top: 8px;}


/* 滚动新闻 */
.picScroll-left{ width:1200px;position:relative;margin: 20px 0 0 0;}
.picScroll-left .hd{ overflow:hidden;  height:16px;padding:25px 0 40px 0;}
.picScroll-left .hd ul{ float:right; zoom:1;float:left;position:relative;left:50%;}
.picScroll-left .hd ul li{ float:left;  width:15px; height:15px; overflow:hidden; margin:0 7px; text-indent:-999px; cursor:pointer; background:#0BB757;position:relative;right:50%;filter:alpha(opacity=60);opacity:0.6;border-radius: 100%;}
.picScroll-left .hd ul li.on{ filter:alpha(opacity=100);opacity:1; }
.picScroll-left .bd{}
.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
.picScroll-left .bd ul li{ margin:0 30px 0 0; float:left; _display:inline; overflow:hidden;}
.picScroll-left .bd ul li a{overflow:hidden;width: 380px;height: 250px;display: block;background: #fff;position: relative;}
.picScroll-left .bd ul li a:hover .title{background-color: rgba(11,183,87,.6)}
.picScroll-left .bd ul li .pic{position: absolute;top:0;left: 0;z-index: 9;}
.picScroll-left .bd ul li .pic img{ width:380px; height:250px; display:block;}
.picScroll-left .bd ul li .title{ line-height:40px;height: 40px;font-size: 16px;color: #fff;overflow: hidden;position: absolute;bottom:0;left: 0;z-index: 99;text-align: center;width: 380px;background-color: rgba(11,183,87,.8)}

.indexaboutc{padding: 20px 0;}
.indexaboutimg{width: 448px;height: 290px;position: relative;}
.indexaboutimg .i1{width: 366px;height: 252px;position: absolute;bottom: 0;right: 0;border:solid 4px #E5E5E5;z-index: 1;}
.indexaboutimg .i2{width: 380px;height: 250px;position: absolute;left: 0;top: 0;z-index: 2;}
.indexaboutimg .i2 img{width: 380px;height: 250px;display: block;}
.indexaboutimg .i3{width: 160px;height: 60px;position: absolute;top: 103px;right: 0;z-index: 3;background: #0BB757;color: #fff;font-size: 18px;text-indent: 40px;line-height: 50px;}
.indexaboutimg .i4{width: 30px;height: 2px;position: absolute;top: 142px;right: 89px;z-index: 4;background: #fff;font-size: 0;line-height: 0;overflow: hidden;}
.indexabouttext{width: 710px;height: 275px;padding-top: 10px;}

/* 标签切换css */
.slideTxtBox{ width:710px;text-align:left;}
.slideTxtBox .hd{ height:30px; line-height:30px; padding:0 10px 0 20px; position:relative; }
.slideTxtBox .hd ul{ float:left;  position:absolute; left:20px; top:0px; height:30px;   }
.slideTxtBox .hd ul li{ float:left; padding:0 5px; cursor:pointer;  }
.slideTxtBox .hd ul li a{display: block;height: 30px;line-height: 30px;padding: 0 20px;background:#E5E5E5;color: #666;}
.slideTxtBox .hd ul li.on a{ height:30px;  background:#0BB757;color: #fff;}
.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
.slideTxtBox .bd li.tabtext p{ line-height:2;text-indent: 2em;color: #666;font-size: 14px;}
.slideTxtBox .bd li.tabmore{ }
.slideTxtBox .bd li.tabmore a{width: 100px;display: block;border-bottom: solid 2px #e5e5e5;color: #b2b2b2;text-align: center;line-height: 30px;height: 30px;padding-top: 6px;}
.slideTxtBox .bd li.tabmore a:hover{border-bottom: solid 2px #ccc;color: #333;background: #ccc;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

 本地效果图

无标题文档.jpg

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
枫叶 2018-03-30 11:21:06
厉害, 还有轮播图
1 floor
Author's latest blog post