切版网（2013~2023）
http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82
2017年05月24日
BMJ
本文就“BMJ”展开讨论，作者切版网，发布于2017年05月24日 全文共7090个字，预计阅读时长23分38秒。
演示地址：
html代码：
[codesyntax lang=”div”]
<div class="header">
<div class="top_bg"></div>
<div class="head">
<div class="logo"><img src="images/logo.png" /></div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ol>
<dd><a href="#">概览</a></dd>
<dd><a href="#">历程</a></dd>
<dd><a href="#">合作伙伴</a></dd>
</ol>
</li>
<li><a href="#">产品与服务</a>
<ol>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
</ol>
</li>
<li><a href="#">新闻中心</a>
<ol>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
</ol>
</li>
<li><a href="#">联系我们</a>
<ol>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">关于我们</a></dd>
</ol>
</li>
</ul>
</div>
<div class="daosou">
<span><a class="a4"></a></span>
<span><a href="#" class="a1"></a></span>
<span><a href="#" class="a2"></a></span>
<span><a href="#" class="a3"></a></span>
</div>
</div>
<div class="yinc">
<form>
<span>BMJ</span>
<input type="text" class="txt" placeholder="请输入您要搜索的内容" />
<input type="button" class="but" value="搜索" />
</form>
<p><img src="images/fh.png" width="42" height="41" /></p>
</div>
</div>
<div class="banner-box">
<div class="bd">
<ul>
<li>
<div class="m-width">
<a href="#"><img src="images/banner-1.jpg" width="1920" height="" /></a>
</div>
</li>
<li>
<div class="m-width">
<a href="#"><img src="images/banner-2.jpg" width="1920" height="" /></a>
</div>
</li>
<li>
<div class="m-width">
<a href="#"><img src="images/banner-3.jpg" width="1920" height="" /></a>
</div>
</li>
<li>
<div class="m-width">
<a href="#"><img src="images/banner-4.jpg" width="1920" height="" /></a>
</div>
</li>
<li>
<div class="m-width">
<a href="#"><img src="images/banner-5.jpg" width="1920" height="" /></a>
</div>
</li>
</ul>
</div>
<div class="banner-btn">
<a class="prev" href="javascript:void(0);"></a>
<a class="next" href="javascript:void(0);"></a>
<div class="hd"><ul></ul></div>
</div>
</div>
[/codesyntax]
css代码：
[codesyntax lang=”css”]
@charset "utf-8";
/* CSS Document */
/*banner/*/
.banner-box{min-width:1920px; min-height:556px; position:fixed; top:0px; left:50%; margin-left:-960px; display:table;}
.banner-box .bd{ width:1920px !important; min-height:556px;}
.banner-box .bd li .m-width {width:100%;margin:0 auto;}
.banner-box .bd li{width:1920px; !important; min-height:556px;}
.banner-box .bd li a{display:block;background-size:auto;}
.banner-btn{ min-width:1920px;position:absolute; top:350px; left:0px;}
.banner-btn a{ display:block; width:49px; height:104px; position:absolute;top:0; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.banner-btn a.prev{ position:absolute; left:280px; top:-130px; background:url(../images/ZY_03.jpg) no-repeat 0 0;}
.banner-btn a.next{ position:absolute; right:280px; top:-130px; background:url(../images/ZY_07.jpg) no-repeat 0 0;}
.banner-box .hd { width:1920px; position:absolute;top:145px; left:50%; margin-left:-960px;}
.banner-box .hd ul{ margin-right:400px;}
.banner-box .hd ul li{ width:8px; height:8px; text-indent:-9999px; border-radius:5px; border:2px solid rgba(255,255,255,0.5); margin-right:20px;background-color:#2378D5; opacity:0.8; background-color:rgba(35,119,213,0.8); float:right; cursor:pointer;}
.banner-box .hd ul li.on{background-color:#2378D5; opacity:0.5; background-color:rgba(35,119,213,0.5);}
.content{ width:1920px; min-height:1000px; position:relative; left:50%; margin-left:-960px; margin-top:516px; background-color:#fff; z-index:2px; border-top:1px solid #FFF;}
.content .anniu{ width:80px; height:40px; margin:-40px auto 0; text-align:center; border-top-left-radius:40px; border-top-right-radius:40px; background-color:#fff; background-color:rgba(255,255,255,0.7); cursor:pointer;}
.content .anniu img{ padding-top:18px;}
.content .chuban{ width:1170px; height:249px; margin:20px auto 0; background:url(../images/index-x.jpg) no-repeat 0 0; background-position:100% 100%;}
.content .chuban h3{ width:500px; min-height:20px; margin:0 auto; padding-top:27px; padding-left:170px; font-size:30px; color:#FFF; font-weight:bold;}
.content .chuban h3 span{ font-size:40px;}
.content .chuban p{ width:667px; line-height:25px; margin:0 auto; padding-top:10px; font-size:14px; color:#FFF; text-align:center;}
.content .chuban h4{ width:100px; height:28px; line-height:28px; text-align:center; margin:20px auto 0; background-color:#65A0E2; background-color:rgba(101,160,226,0.8); border-radius:15px; box-shadow:0px 4px 4px #2170C6}
.content .chuban h4 a{ font-size:14px; color:#FFF;}
.content .chuban h4:hover{ background-color:#fff; background-color:rgba(255,255,255,0.8); color:#2279DA; cursor:pointer;}
.content .chuban h4:hover a{ font-size:14px; color:#2279DA;}
.content .news{ width:1170px; min-height:249px; margin:20px auto 0;}
.content .news .title{ width:238px; margin:0 auto; text-align:center;}
.content .news .title h3{ font-size:36px; color:#000; text-transform:uppercase;}
.content .news .title p{ width:100%; height:30px; font-size:20px; color:#343434; text-align:center; background:url(../images/jiange_ico.jpg) no-repeat center center;}
.content .news .subnew{ width:110%; padding-top:20px; display:table;}
.content .news .subnew dl{ width:361px; min-height:245px; float:left; margin-right:40px; overflow:hidden; cursor:pointer;}
.content .news .subnew dl dd h4{ width:99%; height:48px; line-height:20px; padding-top:15px; border:1px solid #F2F2F2; color:#B8B8B8; text-align:center; text-transform:uppercase;}
.content .news .subnew dl dt{ margin-top:20px; position:relative; overflow:hidden;}
.content .news .subnew dl dt img{ width:361px; height:110px;}
.content .news .subnew dl dt p{ position:absolute; top:-110px; right:0; width:361px; height:110px;background-color:#2377D3; background-color:rgba(35,119,213,0.7);}
.content .news .subnew dl dt p a{ display:block; width:30px; height:30px; margin:40px auto 0; text-align:center; line-height:30px; border-radius:15px; background-color:#2377D7; color:#fff; font-size:20px;}
.content .news .subnew dl dd h5{ padding-top:13px; font-size:15px; color:#343434;}
.content .news .subnew dl dd p{ padding-top:5px; color:#7F7F7F; line-height:20px;}
.content .news .subnew dl dd h6{ padding-top:10px; text-transform:uppercase;}
.content .news .subnew dl dd h6 a{ color:#B4B4B4;}
.content .news .subnew dl dd h6 span{ display:inline-block; width:16px; height:16px; margin-right:10px; text-align:center; line-height:14px; color:#FFF; border-radius:8px; background-color:#3C7AD1;}
.content .news .subnew dl:hover h5{ color:#3C7AD1;}
.content .news .subnew dl:hover h6 a{ color:#3C7AD1;}
.content .video{ width:1170px; min-height:441px; margin:60px auto 40px; background:url(../images/video.jpg) no-repeat center center; display:table;}
.content .video .leftvideo{ float:left; width:50%; height:441px; background-color:#FFF; background-color:rgba(255,255,255,0.7);}
.content .video .leftvideo h3{ font-size:26px; color:#2671DB; padding-top:90px; margin-left:39px;}
.content .video .leftvideo span{ display:block; color:#7CA1E5; padding-top:19px; margin-left:39px; text-transform:uppercase;}
.content .video .leftvideo p{ width:498px; line-height:23px; color:#818284; padding-top:50px; margin-left:39px;}
.content .video .leftvideo h4{ width:100px; height:30px; margin-top:53px; margin-left:39px; text-align:center; line-height:30px; background-color:#FFF; border-radius:15px; text-transform:uppercase; cursor:pointer;}
.content .video .leftvideo h4 a{ color:#818284;}
.content .video .leftvideo h4:hover{ background-color:#216FC5;}
.content .video .leftvideo h4:hover a{ color:#FFF}
[/codesyntax]
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
