演示地址：

http://www.qieban.cn/html/bmj

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]

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。