* {
       margin: 0;
       padding: 0;
   }

   body {
       background-color: #f3f3f3;
       height: 3000px;
   }

   a {
       text-decoration: none;
   }

   .clearfix:before,
   .clearfix:after {
       content: "";
       display: table;
   }

   .clearfix:after {
       clear: both;
   }

   /* 
    .clearfix {
        *zoom: 1;
    } */

   .w {
       width: 1200px;
       margin: auto;
   }

   li {
       list-style: none;
   }

   .header {
       height: 79px;
       margin: 30px auto;
   }

   .logo img {
       width: 200px;
       float: left;
   }

   .nav {
       float: left;
       margin-left: 60px;
   }

   .nav li {
       float: left;
       margin: 0 15px;
   }

   .nav ul li a {
       height: 79px;
       padding: 0 15px;
       display: block;
       line-height: 79px;
       font-size: 19px;
       color: #050505;
       cursor: pointer;
   }

   .nav ul li a:hover {
       border-bottom: 2px solid #00a4ff;
       color: #00a4ff;
   }

   .search {
       width: 412px;
       height: 79px;

       float: left;
       margin-left: 50px;
   }

   .search input {
       width: 345px;
       height: 60px;
       border: 1px solid #00a4ff;
       line-height: 50px;
       font-size: 18px;
       color: #bfbfbf;
       padding-left: 15px;
       float: left;
   }

   .search button {
       width: 50px;
       height: 60px;
       background-color: blue;
       /* 按钮button默认有个边框需要我们去手动去除 */
       border: 0;
       float: left;
       background: url(sou.jpg);
   }

   .banner {
       height: 421px;
       background-color: #1c036c;
   }

   .banner .w {
       height: 421px;
       background-color: pink;
       /* background: url();这里可以加照片盖住粉色部分 */
   }

   .subnav {
       float: left;
       width: 190px;
       height: 421px;
       background: rgba(0, 0, 0, 0.3);
   }

   .subnav ul li a {
       font-size: 14px;
       color: white;
       cursor: pointer;
   }

   .subnav ul li {
       height: 45px;
       line-height: 45px;
       padding: 0 20px;
   }

   .subnav ul li a:hover {
       color: #00a4ff;
   }

   .subnav ul li a span {
       float: right;
   }

   .course {
       width: 230px;
       height: 300px;
       background-color: bisque;
       float: right;
       /*浮动的盒子不会有外边距合并的问题 */
       margin-top: 50px;
   }

   .course h2 {
       height: 48px;
       background-color: #9bceea;
       color: white;
       text-align: center;
       line-height: 48px;
   }

   .bd {
       padding: 0 20px;
   }

   .bd ul li {
       padding: 15px 0;
       border-bottom: 1px solid #ccc;
   }

   .bd ul li h4 {
       font-size: 16px;
       color: #4e4e4e;
   }

   .bd ul li p {
       font-size: 12px;
       color: #a5a5a5;
   }

   .bd a {
       display: block;
       border: 1px solid #00a4ff;
       height: 38px;
       text-align: center;
       line-height: 38px;
       font-size: 16px;
       color: #00a4ff;
       font-weight: 700px;
       margin-top: 5px;
   }

   /* 精品模块开始 */
   .goods {
       height: 60px;
       background-color: #fff;
       box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.3);
       margin-top: 10px;
       line-height: 60px;
   }

   .goods h3 {
       float: left;
       margin-left: 30px;
       font-size: 16px;
       color: #00a4ff;
   }

   .goods ul {
       float: left;
       margin-left: 30px;
   }

   .goods ul li {
       float: left;
   }

   .goods ul li a {
       padding: 0 30px;
       color: #050505;
       font-size: 16px;
       border-left: 1px solid #ccc;
   }

   .mod {
       float: right;
       margin-right: 30px;
       color: #00a4ff;
       font-size: 14px;
   }

   .box {
       margin-top: 30px;
   }

   .box-hd {
       height: 45px;
   }

   .box-hd h3 {
       float: left;
       font-size: 20px;
       color: #494949;
   }

   .box-hd a {
       float: right;
       font-size: 12px;
       color: #a5a5a5;
       margin-top: 10px;
       margin-right: 30px;
   }

   /* 把li的父亲ul修改的足够宽一行可以装5个盒子就不会换行了 */
   .box-bd ul {
       width: 1225px;
   }

   .box-bd ul li {
       width: 228px;
       height: 270px;
       background-color: pink;
       float: left;
       margin-right: 15px;
       margin-bottom: 15px;
       background-color: #fff;
   }

   .box-bd ul li img {
       width: 100%;
       height: 58%;
   }

   .box-bd ul li h4 {
       margin: 20px 20px 20px 25px;
       font-size: 14px;
       color: #050505;
       font-weight: 400;
   }

   .box-bd .info {
       margin: 0 20px 0 25px;
       font-size: 12px;
       color: #999;
   }

   .box-bd .info span {
       color: #ff7c2d;
   }

   /* footer模块 */
   .footer {
       height: 415px;
       background-color: #fff;
   }

   .footer .w {
       margin-top: 35px;
   }

   .copyright {
       float: left;
   }

   .copyright p {
       font-size: 12px;
       color: #666;
       margin: 30px 0 15px 0;
   }

   .copyright .app {
       width: 118px;
       height: 33px;
       border: 1px solid #00a4ff;
       display: block;
       font-size: 16px;
       text-align: center;
       line-height: 33px;
       color: #00a4ff;
   }

   .link {
       float: right;
   }

   .link dl {
       float: left;
       margin-left: 100px;
   }

   .link dl dt {
       font-size: 16px;
       color: #333;
       margin-bottom: 5px;
   }

   .link dl dt a {
       color: #333;
       font-size: 12px;
   }