1. *{
    2.     margin: 0;
    3.     padding: 0;
    4. }
    6. @font-face{
    7.     font-family: 'iconfont';
    8.     src:url('img/font/iconfont.eot');
    9.     src:url('img/font/iconfont.eot') format('embedded-opentype'),
    10.     url('img/font/iconfont.woff') format('woff'),
    11.     url('img/font/iconfont.ttf') format('truetype'),
    12.     url('img/font/iconfont.svg#iconfont') format('svg');
    13. }
    15. body{
    16.     font-family: "微软雅黑";
    17.     color: #14191e;
    18. }/*以上为设置字体来显示箭头的字体位置*/
    20. a{
    21.     text-decoration: none;/*去掉下划线*/
    22. }
    23. a:link,a:visited{
    24.     color: #5e5e5e;/*以访问和未访问样式*/
    25. }
    27. .main{
    28.     width: 1200px;
    29.     height: 460px;
    30.     margin: 30px auto;
    31.     overflow: hidden;/*图片溢出的部分进行影藏*/
    32.     /*这里的影藏等会儿会被js设置对应图片显示的效果*/
    33.     position: relative;
    34. }
    36. /*据点图*/
    37. .banner{
    38.     width:1200px;
    39.     height: 460px;
    40. }
    42. .banner-slide{
    43.     width: 1200px;
    44.     height: 460px;
    45.     float: left;
    46.     background-repeat: no-repeat;/*使图片不重复*/
    47.     display: none;/*先将图片隐藏来帮助前后箭头显示图片*/
    48. }
    51. .slide-active{
    52.     display: block;
    53. }
    55. .slide1{
    56.     background-image: url(img/bg1.jpg);
    57. }
    59. .slide2{
    60.     background-image: url(img/bg2.jpg);
    61. }
    63. .slide3{
    64.     background-image: url(img/bg3.jpg);
    65. }
    67. .button{/*箭头显示*/
    68.     position: absolute;/*定位*/
    69.     width: 40px;
    70.     height: 80px;
    71.     left: 244px;/*为了给左边的表格空出位置*/
    72.     background: url(img/arrow.png) center center no-repeat;
    73.     top: 50%;
    74.     margin-top:-40px;/*调整箭头位置*/
    75.     transform: rotate(180deg);/*给箭头旋转180度*/
    76. }
    77. .button:hover{/*用类选择器给前后箭头设置鼠标悬停效果*/
    78.     background-color: #333;
    79.     opacity: 0.8;/*透明度设置*/
    80.     /*为了能够兼容其他ie浏览器的透明度设置*/
    81.     filter: alpha(opaciity=80);
    83. }
    85. .next{
    86.     left: auto;/*自动*/
    87.     right: 0;
    88.     transform: rotate(0deg);/*因为上面同意旋转了所以这边再转过来*/
    89. }
    91. /*小圆点*/
    92. .dots{
    93.     position: absolute;
    94.     right: 24px;
    95.     bottom: 24px;
    96.     line-height: 12px;/*设置行高*/
    97. }
    99. .dots span{
    100.     /*是的三个span完全处于同一个水平线*/
    101.     display: inline-block;
    102.     width:12px;
    103.     height: 12px;
    104.     border-radius: 50%;
    105.     background-color: rgba(7,17,27,.3);
    106.     margin-left: 8px;/*上面设置的是整体而下面设置的时每一个*/
    107.     box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset;/*向内阴影*/
    108.     cursor: pointer;/*鼠标设置成白色小手的标志*/
    109. }
    111. .dots span.active{
    112.     background-color: #fff;
    113.     box-shadow: 0 0 0 2px rgba(7,17,27,.8) inset;
    114. }
    116. /*主菜单*/
    117. .menu-box{
    118.     position:absolute;
    119.     left: 0;
    120.     top: 0;
    121.     width: 244px;
    122.     height: 460px;
    123.     background:rgba(7,17,27,.3);
    124.     z-index: 1;/*设置优先级*/
    125. }
    126. /*主菜单的内同*/
    127. .menu-content{
    128.     position: absolute;
    129.     left: 0;
    130.     top: 0;
    131.     width: 244px;
    132.     height:460px;
    133.     z-index: 2;
    135. }
    137. .menu-item{
    138.     height: 64px;
    139.     line-height: 66px;
    140.     cursor:pointer;
    141.     padding:0 24px;
    142. }
    143. .menu-item a{
    144.     display: block;
    145.     color: #fff;
    146.     font-size: 16px;
    147.     line-height: 66px;
    148.     border-bottom:1px solid rgba(255,255,255,0.2);
    149.     height: 63px;
    150.     padding: 0 8px;
    151.     position: relative;
    152. }/*这杨设置就可以让下划线不填充整个框架*/
    154. .menu-item:last-child a{
    155.     border-bottom:none;
    156. }/*去掉最后一个a标签的下划线*/
    158. .menu-item i{
    159.     /*i'标签时行内元素，设置position就是隐形的设置为了块状元素*/
    160.     position: absolute;
    161.     right: 32px;
    162.     top: 2px;
    163.     color: rgba(255,255,255,.3);
    164.     font-style: normal;
    165.     font-weight: normal;/*此时的是4个并和在一起的 设置51行的定位来解决*/
    166.     font-family: "iconfont";/*设置字体来显示箭头*/
    167.     font-size: 24px;
    168. }
    170. /*子菜单*/
    171. .sub-menu{
    172.     width: 730px;
    173.     height: 458px;
    174.     position: absolute;
    175.     left: 244px;
    176.     top: 0;
    177.     background: #fff;
    178.     z-index: 500;
    179.     border: 1px solid #d9dde1;
    180.     box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
    181. }
    183. .inner-box{
    184.     width: 100%;
    185.     height: 100%;
    186.     background: url(img/fe.png) no-repeat;
    187.     display: none;/*展现之前先全部隐藏  等到循环到调用到哪个就显示哪个*/
    188. }
    190. .sub-inner-box{
    191.     width: 652px;
    192.     margin-left: 40px;
    193.     overflow: hidden;/*超出盒子的部分进行隐藏*/
    194. }
    196. .title{/*标题部分编辑*/
    197.     font-size: 16px;
    198.     color: #f01414;
    199.     line-height: 16px;
    200.     font-weight: bold;/*加粗*/
    201.     margin:28px 0 30px 0 ;/*上右下左*/
    202. }
    204. .sub-row{
    205.     margin-bottom:25px; 
    206. }
    208. .bold{
    209.     font-weight: 700;/*100~900*/
    210. }
    212. .mr10{
    213.     margin-right: 10px;
    214. }
    216. .ml10{
    217.     margin-left: 10px;
    218. }
    220. .hide{
    221.     display: none;
    222. }