首页

ui/html/css/fonts/icomoon.svg

@@ -58,6 +58,15 @@
 <glyph unicode="&#xe5c5;" glyph-name="arrow_drop_down" d="M298 512.667h428l-214-214z" />
 <glyph unicode="&#xe5c7;" glyph-name="arrow_drop_up" d="M298 340.667l214 214 214-214h-428z" />
 <glyph unicode="&#xe63a;" glyph-name="ondemand_video" d="M682 468.667l-298-170v342zM896 212.667v512h-768v-512h768zM896 810.667c46 0 86-38 86-86l-2-512c0-46-38-84-84-84h-214v-86h-340v86h-214c-48 0-86 38-86 84v512c0 48 38 86 86 86h768z" />
+<glyph unicode="&#xe87d;" glyph-name="favorite" d="M512 28.667l-62 56c-220 200-364 330-364 492 0 132 102 234 234 234 74 0 146-36 192-90 46 54 118 90 192 90 132 0 234-102 234-234 0-162-144-294-364-494z" />
+<glyph unicode="&#xe87e;" glyph-name="favorite_border" d="M516 146.667c204 184 338 306 338 430 0 86-64 148-150 148-66 0-130-42-152-100h-80c-22 58-86 100-152 100-86 0-150-62-150-148 0-124 134-246 338-430l4-4zM704 810.667c132 0 234-102 234-234 0-162-144-292-364-492l-62-56-62 54c-220 200-364 332-364 494 0 132 102 234 234 234 74 0 146-36 192-90 46 54 118 90 192 90z" />
+<glyph unicode="&#xe8ac;" glyph-name="power_settings_new" d="M760 718.667c82-70 136-176 136-292 0-212-172-384-384-384s-384 172-384 384c0 116 54 222 136 292l60-60c-66-54-110-138-110-232 0-166 132-298 298-298s298 132 298 298c0 94-42 176-110 230zM554 810.667v-426h-84v426h84z" />
 <glyph unicode="&#xe8e8;" glyph-name="verified_user" d="M426 212.667l342 342-60 60-282-280-110 110-60-60zM512 896.667l384-172v-256c0-236-164-458-384-512-220 54-384 276-384 512v256z" />
+<glyph unicode="&#xe900;" glyph-name="comment-empty" d="M507.81 156.612c-23.569 0-46.531 2.128-68.877 5.822l-161.413-97.942v163.047c-84.166 59.097-138.174 149.705-138.174 251.474 0 178.059 164.968 322.402 368.464 322.402 203.483 0 368.46-144.347 368.46-322.402 0-178.077-164.98-322.402-368.46-322.402v0zM507.81 755.361c-178.063 0-322.406-123.735-322.406-276.348 0-93.646 54.477-176.269 137.602-226.246l-1.452-106.824 108.407 65.174c24.973-5.327 50.947-8.458 77.85-8.458 178.068 0 322.402 123.713 322.402 276.353-0.001 152.614-144.335 276.348-322.403 276.348v0z" />
+<glyph unicode="&#xe901;" glyph-name="comment-full" d="M511.998 895.156c-264.907 0-479.664-158.78-479.664-390.665 0-132.522 70.304-250.515 179.871-327.46l-49.468-198.586 259.61 113.772c29.065-4.817 58.982-7.583 89.645-7.583 264.907 0 479.674 187.959 479.674 419.853-0.004 231.887-214.781 390.668-479.668 390.668v0z" />
+<glyph unicode="&#xe902;" glyph-name="fav-empty" d="M509.607 816.886c9.083 0 17.328-4.84 20.996-12.332l97.262-197.442c5.614-11.404 16.664-19.359 29.438-21.216l223.739-32.552c8.421-1.216 15.604-6.851 18.233-14.255 2.52-7.184 0.596-15.062-5.085-20.587l-163.938-160.114c-8.95-8.751-12.995-21.171-10.917-33.37l38.012-222.061c1.325-7.737-2.165-15.426-8.906-19.978-4.088-2.741-8.862-4.156-13.813-4.156-4.023 0-7.999 0.972-11.425 2.74l-195.055 102.765c-5.768 3.006-12.156 4.553-18.542 4.553-6.365 0-12.728-1.547-18.519-4.553l-194.833-102.678c-3.559-1.855-7.602-2.828-11.669-2.828-4.862 0-9.723 1.459-13.547 4.023-6.962 4.685-10.476 12.42-9.128 20.155l38.012 222.017c2.078 12.199-1.988 24.62-10.939 33.37l-163.96 160.17c-5.635 5.492-7.558 13.348-5.061 20.454 2.631 7.481 9.812 13.117 18.299 14.332l223.674 32.552c12.839 1.857 23.868 9.814 29.481 21.216l97.195 197.397c3.714 7.525 11.979 12.377 20.995 12.377zM509.607 855.096c-24.044 0-45.923-13.226-56.177-33.956l-97.24-197.442-223.674-32.542c-22.983-3.304-42.101-18.718-49.482-39.659-7.381-21.048-1.812-44.232 14.432-60.033l163.916-160.126-38.012-222.017c-3.868-22.408 6.032-44.82 25.459-57.947 10.697-7.116 23.204-10.785 35.757-10.785 10.299 0 20.664 2.475 30.056 7.337l194.988 102.721 195.033-102.719c9.369-4.862 19.713-7.337 29.99-7.337 12.575 0 25.082 3.669 35.779 10.785 19.426 13.127 29.305 35.538 25.461 57.947l-38.013 222.017 163.938 160.126c16.221 15.812 21.811 38.985 14.408 60.033-7.403 20.941-26.519 36.354-49.503 39.659l-223.674 32.541-97.241 197.442c-10.187 20.729-32.111 33.956-56.2 33.956v0z" />
+<glyph unicode="&#xe903;" glyph-name="fav-full" d="M507.612 890.572c-11.287 0-20.219-3.343-26.677-10.176-6.577-6.687-11.667-14.873-15.132-24.178l-102.462-236.562-275.021-24.689c-6.458-1.237-12.406-4.097-17.739-8.794-5.339-4.726-8.698-11.169-9.812-19.481-1.236-8.186 0.755-16.26 5.718-24.201 5.091-7.924 11.16-15.12 18.222-21.711l9.812-8.312 22.705-19.479c9.304-7.922 19.598-16.741 31.255-26.411l35.104-29.531c27.913-23.551 59.289-50.346 94.4-80.363l-30.262-123.563c-4.214-15.869-8.19-31.375-12.031-46.764-3.839-15.262-7.33-29.263-10.299-41.936-2.979-12.649-5.583-23.429-7.933-32.611l-4.468-17.248c-1.25-5.213-0.618-10.419 1.733-15.384 2.36-4.968 6.078-9.306 11.169-12.771 4.965-3.609 10.659-5.718 16.861-6.71 1.381-0.195 2.75-0.268 4.116-0.268 4.775 0 9.492 1.163 14.129 3.367 2.979 1.259 8.809 4.213 17.371 8.818 8.677 4.7 18.849 10.662 30.759 17.733 11.787 7.077 25.069 14.635 39.583 22.946 14.507 8.187 29.264 16.499 44.021 24.689 34.5 19.355 72.701 41.43 114.884 66.115l232.342-134.1 12.916-4.822c5.575-2.107 9.909-3.1 12.889-3.1 8.941 0 16.873 1.986 24.071 5.693 7.061 3.85 9.805 11.65 7.935 23.452-0.619 2.353-1.731 8.064-3.467 17.248l-6.71 32.972c-2.728 13.039-5.572 27.43-8.43 43.3-2.979 15.89-6.322 31.761-9.802 47.63-7.814 37.723-16.62 79.786-26.783 126.154l184.337 164.126c7.689 8.94 14.016 16.381 19.103 22.581s7.57 13.399 7.57 21.589c0 8.794-2.359 15.263-7.077 19.478-4.844 4.098-13.152 7.558-24.931 10.542l-275.142 25.559-99.63 236.561c-1.236 2.352-2.847 5.208-4.956 8.794-2.106 3.465-4.588 7.077-7.572 10.541-2.978 3.607-6.686 6.707-11.032 9.301-4.476 2.618-9.686 3.976-15.637 3.976z" />
+<glyph unicode="&#xe904;" glyph-name="zan-empty" d="M684.937 22.109c-158.554 0-297.911 0-351.748 0-10.176-8.954-23.491-14.429-38.115-14.429h-173.274c-31.899 0-57.757 25.84-57.757 57.713v432.851c0 31.874 25.859 57.713 57.757 57.713h173.275c16.772 0 31.827-7.188 42.379-18.596 35.875 29.206 130.893 120.127 130.893 263.878 0 86.12 86.635 86.57 86.635 86.57s187.713 26.604 187.713-201.998c0-49.597-28.88-129.854-28.88-129.854h43.319c0 0 202.152 33.816 202.152-216.425-0.001-250.243-70.842-317.424-274.349-317.424zM295.074 469.388c0 15.938-12.932 28.857-28.88 28.857h-115.516c-15.949 0-28.88-12.919-28.88-28.857v-375.137c0-15.937 12.932-28.857 28.88-28.857h115.515c15.949 0 28.88 12.92 28.88 28.857v375.137zM771.575 498.245h-173.275c0 0 86.637 85.217 86.637 201.997s-82.574 129.858-115.515 129.858c-32.94 0-43.319-10.371-43.319-28.858 0-215.975-173.272-331.853-173.272-331.853v-389.566c0 0 190.869 0 346.545 0s202.152 52.752 202.152 245.282c0 192.528-129.953 173.14-129.953 173.14z" />
+<glyph unicode="&#xe905;" glyph-name="zan-full" horiz-adv-x="1025" d="M43.040 558.32c-23.728 0.048-43-19.152-43.040-42.88 0-0.136 0-0.264 0-0.4v-520c-0.048-23.632 19.008-42.864 42.64-43.040 1.040 0 1.92 0.56 2.96 0.56h120.4v605.68h-121.2c-0.64-0.24-1.2 0.080-1.76 0.080zM1022.4 466.56c1.616 25.912-4.72 51.704-18.16 73.92-21.704 35.392-59.56 57.696-101.040 59.52-2.6 0.832-5.28 1.392-8 1.68h-238.16c16.696 48.112 25.216 98.68 25.2 149.6-0.080 33.288-3.752 66.464-10.96 98.96h-0.72c-14.392 66.776-80.192 109.232-146.968 94.832-57.808-12.456-98.704-64.104-97.592-123.232 0-2.16 0.56-4.24 0.64-6.4-0.616-111.104-72.096-209.408-177.6-244.24v-618.72h561.92c23.968-0.136 47.456 6.704 67.6 19.68 18.096 12.032 32.744 28.576 42.48 48 0.8 1.040 1.36 2.16 2.080 3.28s0.4 0.56 0.56 0.88v0c2.568 3.672 4.536 7.72 5.84 12l92.080 412.48c0.856 4.128 1.104 8.36 0.72 12.56 0 0.56 0 1.12 0 1.68s0.24 2.32 0.080 3.52z" />
 <glyph unicode="&#xe90d;" glyph-name="fingerprint" d="M636 0.667h-6c-68 18-112 44-158 90-60 60-92 138-92 222 0 70 58 126 130 126s132-56 132-126c0-46 38-82 88-82s90 36 90 82c0 160-140 292-310 292-122 0-232-68-282-172-16-34-24-76-24-120 0-34 2-86 28-154 9.157-27.471-30.939-36.654-40-14-20 56-32 110-32 168 0 52 10 98 30 138 56 120 182 198 320 198 194 0 352-152 352-336 0-70-60-124-132-124s-130 54-130 124c0 46-40 84-90 84s-88-38-88-84c0-72 28-140 80-192 40-40 80-62 140-78 12-2 16-14 14-26-2-10-12-16-20-16zM530 312.667c0-97.515 80.578-182 192-182 19.928 0 65.546 14.722 70-12 2-12-6-24-18-26-24-4-46-4-52-4-50 0-96 12-132 38-64 44-102 112-102 186 0 12 10 22 22 22s20-10 20-22zM416 8.667c-6 0-10 2-14 6-38 38-58 62-86 114-30 52-46 116-46 184 0 126 108 230 242 230s242-104 242-230c0-12-10-20-22-20s-22 8-22 20c0 104-88 188-198 188s-198-84-198-188c0-62 12-118 38-164 28-50 48-70 80-104 8-8 8-22 0-30-4-4-10-6-16-6zM150 524.667c-17.624 0-27.785 15.691-18 32 42 60 96 108 160 140 134 70 306 70 440 0 64-32 118-78 160-138 6-10 4-24-6-30s-24-4-30 6c-38 54-86 94-144 124-122 62-278 64-400 0-58-30-108-72-146-126-4-6-10-8-16-8zM760 748.667c-4 0-8 0-10 2-82 42-154 60-238 60s-166-20-238-60c-23.381-14.029-43.278 24.033-20 38 80 44 166 64 258 64 90 0 170-20 258-64 18.211-10.927 10.406-40-10-40z" />
 </font></defs></svg>
\ No newline at end of file

ui/html/css/login.css

@@ -21,10 +21,7 @@ a,a:hover,a:link {
 .yun-login-btn li a {
     color: #333;
 }
-.yun-login-btn li:last-child a{
-    background-color: #34bf49;
-    color: #fff;
-}
+
 
 
 .z-m-center {

ui/html/css/main.css

+@charset "utf-8";
+body {
+    font-family:  "Microsoft YaHei","Helvitica Neue", Helvitica, Arial, "Hiragino Sans GB", "Arial Regular", "Microsoft JhengHei", sans-serif;
+    background-color: #fafafa;
+}
+a,a:hover,a:link {
+    text-decoration: none;
+}
+
+/*font*/
+@font-face {
+    font-family: 'icomoon';
+    src:  url('fonts/icomoon.eot?uyryw3');
+    src:  url('fonts/icomoon.eot?uyryw3#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?uyryw3') format('truetype'),
+    url('fonts/icomoon.woff?uyryw3') format('woff'),
+    url('fonts/icomoon.svg?uyryw3#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-comment-empty:before {
+    content: "\e900";
+}
+.icon-comment-full:before {
+    content: "\e901";
+}
+.icon-fav-empty:before {
+    content: "\e902";
+}
+.icon-fav-full:before {
+    content: "\e903";
+}
+.icon-zan-empty:before {
+    content: "\e904";
+}
+.icon-zan-full:before {
+    content: "\e905";
+}
+
+.navbar-main {
+    background-color: #fff;
+    box-shadow: 0 0 30px rgba(0,0,0,.05);
+}
+.logo {
+    line-height: 60px;
+    margin-left: 30px;
+    font-size: 16px;
+}
+.logo a {
+    color: #333;
+}
+.yun-login-btn {
+    margin-right: 30px;
+    margin-bottom: 0;
+}
+.yun-login-btn,.yun-login-btn li {
+    list-style: none;
+}
+.yun-login-btn li {
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+    padding: 0 10px;
+}
+.yun-login-btn li a {
+    color: #333;
+    display: block;
+}
+.c-menu-item {
+    margin-bottom: 0;
+    margin-left: 20px;
+}
+.c-menu-item li {
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+    margin: 0 10px 0;
+    padding: 0;
+}
+.c-menu-item li a {
+    display: block;
+    height: 60px;
+    color: #333;
+}
+.c-menu-item li.active a {
+    display: block;
+    border-bottom: 4px solid #ef2f11;
+}
+
+/* Swiper幻灯 */
+.swiper-container {
+    width: 100%;
+    height: 500px;
+
+}
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+/*视频列表*/
+.v-list {
+    margin-top: 20px;
+}
+.v-main-box {
+    background-color: #fff;
+    height: 300px;
+    margin-bottom: 20px;
+    -webkit-transition: all 0.4s ease;
+    -o-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+}
+.v-screen {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+}
+.v-screen a {
+    position: relative;
+    display: block;
+}
+
+.v-screen > span {
+    position: absolute;
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    left: 10px;
+    top:10px;
+}
+.v-screen > span > img {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+}
+.v-tit,
+.v-price,
+.v-foot {
+    padding: 0 10px;
+}
+.v-tit {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.v-tit a {
+    color: #333333;
+}
+.v-price {
+    color: #ef2f11;
+    padding-bottom: 10px;
+}
+.v-foot {
+    position: relative;
+    font-size: 12px;
+    color: #999;
+}
+.v-detail {
+    position: absolute;
+    right: 10px;
+    bottom: 0;
+    color: #bbbbbb;
+}
+.v-detail span {
+    padding-left: 10px;
+}
+.v-main-box:hover {
+    cursor: pointer;
+    box-shadow: 0 0 20px rgba(0,0,0,.12);
+}
+.v-main-box:hover .play-mask {
+    display: inline-block;
+    line-height: 200px;
+}
+.play-mask {
+    display: none;
+    position: absolute;
+    background-color: rgba(0,0,0,.3);
+    width: 100%;
+    height: 200px;
+    left: 0;
+    top: 0;
+    text-align: center;
+    line-height: 200px;
+    font-size: 64px;
+    color: #fff;
+    -webkit-transition: all 0.4s ease;
+    -o-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+}
+.col-md-3 {
+    padding-right: 10px;
+    padding-left: 10px;
+}
+.get-more {
+    margin: 0 auto;
+    width: 30%;
+    text-align: center;
+    font-size: 12px;
+}
+.get-more a {
+    display: block;
+    height: 45px;
+    line-height: 45px;
+    background-color: #fff;
+    color: #999;
+}
+
+.copyright {
+    height: 40px;
+    line-height: 40px;
+    background-color: #fff;
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+    border-top: 1px solid #f3f3f3;
+}
+.m-t-20 {
+    margin-top: 20px;
+}
+
+/*视频内容页面*/
+.cnt-tit {
+    position: relative;
+    height: 22px;
+    font-size: 22px;
+    margin: 30px 0;
+}
+.tit-share {
+    position: absolute;
+    display: inline-block;
+    height: 22px;
+    right: 0;
+    top: 0;
+}
+.post-icons {
+    width: 25px;
+    height: 22px;
+    float: left;
+    margin-left: 16px;
+    background: url(../img/share_tit.png) no-repeat;
+}
+.weibo {
+    background-position: -25px 0;
+}
+.qzone {
+    background-position: -50px 0;
+}
+.weibo:hover {
+    background-position: -25px -22px;
+}
+.qzone:hover {
+    background-position: -50px -22px;
+}
+.wechat:hover {
+    background-position: 0 -22px;
+}
+
+.video-detail-info {
+    position: relative;
+    height: 80px;
+    background-color: #fff;
+}
+.video-teacher {
+    padding: 15px;
+    border: 1px solid #f3f3f3;
+    border-top: none;
+}
+.video-teacher a {
+    color: #333;
+}
+.video-teacher img{
+    float: left;
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    margin-right: 10px;
+}
+.video-teacher p {
+    font-size: 16px;
+    margin: 5px 0 0;
+}
+.video-teacher span {
+    font-size: 12px;
+    color: #999;
+}
+.video-sm-info {
+    position: absolute;
+    height: 80px;
+    line-height: 80px;
+    right: 15px;
+    top: 0;
+
+}
+.video-sm-info a {
+    display: inline-block;
+    position: relative;
+    margin-right: 15px;
+    vertical-align: middle;
+    font-size: 12px;
+    color: #999;
+    padding-left: 35px;
+    height: 30px;
+    line-height: 30px;
+}
+.video-sm-info a i {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    top: 0;
+    left: 0;
+    font-size: 30px;
+}
+
+/*video detail*/
+.warp-box {
+    background-color: #fff;
+    margin-top: 40px;
+    padding: 20px 0;
+    border-top: 1px solid #f3f3f3;
+}
+.video-description .title {
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+}
+.video-description .text {
+    color: #999;
+}
+
+.video-comment {
+    margin-top: 30px;
+}
+.video-comment .title {
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+}
+.video-comment .title small {
+    font-size: 12px;
+    color: #999;
+    padding-left: 10px;
+}
+
+.comment-login {
+    display: block;
+    width: 100%;
+    height: 100px;
+    text-align: center;
+    line-height: 100px;
+    border: 1px solid #e5e6e8;
+}
+.comment-box {
+    position: relative;
+    padding-left: 60px;
+    margin-top: 20px;
+}
+.comment-head img {
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+}
+.comment-head {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding-right: 10px;
+}
+.comment-input {
+    display: block;
+}
+.comment-input textarea {
+    height: 50px;
+}
+.m-t-10 {
+    margin-top: 10px;
+}
+.user-h {
+    padding-right: 10px;
+}
+.user-h img {
+    height: 50px;
+    width: 50px;
+    border-radius: 100%;
+}
+.user-i span,
+.user-i span small {
+    font-size: 14px;
+    color: #999;
+}
+.user-i span small {
+    padding-left: 5px;
+}
+.user-i p {
+    padding-top: 5px;
+}
+.comment-main-list {
+    margin-bottom: 40px;
+}
+
+.teacher-info {
+    margin: 40px auto;
+}
+
+.teacher-info img {
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+}
+.teacher-info h3 {
+    font-size: 18px;
+}
+.teacher-info p {
+    max-width: 500px;
+    margin: 0 auto;
+    color: #666;
+}
\ No newline at end of file

ui/html/css/reset.css

@@ -232,6 +232,24 @@ i, em {
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-comment-empty:before {
+    content: "\e900";
+}
+.icon-comment-full:before {
+    content: "\e901";
+}
+.icon-fav-empty:before {
+    content: "\e902";
+}
+.icon-fav-full:before {
+    content: "\e903";
+}
+.icon-zan-empty:before {
+    content: "\e904";
+}
+.icon-zan-full:before {
+    content: "\e905";
+}
 .icon-add:before {
     content: "\e145";
 }
@@ -274,12 +292,21 @@ i, em {
 .icon-crop_original:before {
     content: "\e3c4";
 }
+.icon-favorite:before {
+    content: "\e87d";
+}
+.icon-favorite_border:before {
+    content: "\e87e";
+}
 .icon-fingerprint:before {
     content: "\e90d";
 }
 .icon-ondemand_video:before {
     content: "\e63a";
 }
+.icon-power_settings_new:before {
+    content: "\e8ac";
+}
 .icon-slideshow:before {
     content: "\e41b";
 }
@@ -391,4 +418,3 @@ i, em {
 .icon-menu:before {
     content: "\e120";
 }
-

ui/html/index-play.html

+<!DOCTYPE html>
+<html>
+
+<head lang="zh-CN">
+<title>草根学院首页</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="">
+    <meta name="keywords" content="">
+    <!-- Use latest IE randering angine and switch on chrome Frame if available -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+<div class="navbar-main navbar-static-top clearfix">
+    <div class="logo pull-left">草根学院</div>
+    <!--<ul class="c-menu-item pull-left">
+        <li class="active"><a href="#">首页</a></li>
+        <li><a href="#">宠物志</a></li>
+    </ul>-->
+
+    <ul class="yun-login-btn pull-right">
+        <li><a href="#">登录</a></li>
+        <li><a href="#">注册</a></li>
+    </ul>
+</div>
+
+<div class="container">
+    <div class="cnt-tit">
+        <h3>为什么身体会做出不由自主的行为?</h3>
+        <div class="tit-share hidden-xs">
+            <a href="javascript:;" class="wechat post-icons"></a>
+            <a href="javascript:;" class="weibo post-icons"></a>
+            <a href="javascript:;" class="qzone post-icons"></a>
+        </div>
+    </div>
+
+    <div class="video-main">
+        <embed src='http://player.youku.com/player.php/sid/XMTc1NDM3MjUyNA==/v.swf' allowFullScreen='true' quality='high' width='100%' height='630' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
+    </div>
+
+    <div class="video-detail-info">
+        <div class="video-teacher">
+            <a href="#"><img src="img/avatar2.jpg"></a>
+            <p><a href="#">乔布斯</a></p>
+            <span>2016-10-08</span>
+        </div>
+
+        <div class="video-sm-info">
+            <a href="#"><i class="icon-comment-empty"></i>543</a>
+            <a href="#"><i class="icon-fav-empty"></i>31</a>
+            <a href="#"><i class="icon-zan-empty"></i>97</a>
+        </div>
+    </div>
+</div>
+
+<!--视频介绍-->
+<div class="warp-box">
+    <div class="container">
+        <div class="video-description">
+            <div class="title">视频介绍</div>
+            <div class="text">
+                四川水煮鱼，重庆串串香，新疆羊肉串，西北烤全羊，江西酒糟鱼，湖北小龙虾，汕头牛肉丸……虽然一直信奉着“胃有多大，世界就有多大”的至理名言，奈何却被一口烂牙阻挡了前进的脚步。快来看看今天的视频，保护好你的牙齿吧！
+            </div>
+        </div>
+
+        <div class="video-comment">
+            <div class="title">评论 <small>607次</small></div>
+        </div>
+
+        <div class="comment-login">
+            需要 <a href="#">登录</a> 才能评论
+        </div>
+
+        <div class="comment-box">
+            <div class="comment-head">
+                <img src="img/avatar2.jpg">
+            </div>
+            <div class="comment-input clearfix">
+                <textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="说几句吧，亲..."></textarea>
+                <button class="btn btn-default pull-right m-t-10">发表评论</button>
+            </div>
+        </div>
+
+        <div class="comment-main-list clearfix">
+            <div class="user-h pull-left"><img src="img/avatar2.jpg"></div>
+            <div class="user-i">
+                <span>Frank <small>10分钟前</small></span>
+                <p>呵呵。。。不知为什么我听了你这么说话特牙疼</p>
+            </div>
+        </div>
+
+        <div class="comment-main-list clearfix">
+            <div class="user-h pull-left"><img src="img/avatar2.jpg"></div>
+            <div class="user-i">
+                <span>Frank <small>10分钟前</small></span>
+                <p>呵呵。。。不知为什么我听了你这么说话特牙疼</p>
+            </div>
+        </div>
+
+        <div class="comment-main-list clearfix">
+            <div class="user-h pull-left"><img src="img/avatarMax.png"></div>
+            <div class="user-i">
+                <span>Frank <small>10分钟前</small></span>
+                <p>呵呵。。。不知为什么我听了你这么说话特牙疼</p>
+            </div>
+        </div>
+
+        <div class="comment-main-list clearfix">
+            <div class="user-h pull-left"><img src="img/avatar2.jpg"></div>
+            <div class="user-i">
+                <span>Frank <small>10分钟前</small></span>
+                <p>呵呵。。。不知为什么我听了你这么说话特牙疼</p>
+            </div>
+        </div>
+
+        <div class="comment-main-list clearfix">
+            <div class="user-h pull-left"><img src="img/avatarMax.png"></div>
+            <div class="user-i">
+                <span>Frank <small>10分钟前</small></span>
+                <p>呵呵。。。不知为什么我听了你这么说话特牙疼</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="copyright">© 2016 c.pp.cc  皖ICP备13046642号</div>
+
+
+
+
+<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
+<script type='text/javascript' src="js/bootstrap.min.js"></script>
+<script type='text/javascript' src="js/swiper.min.js"></script>
+<!-- Initialize Swiper -->
+<script>
+    var swiper = new Swiper('.swiper-container', {
+        pagination: '.swiper-pagination',
+        nextButton: '.swiper-button-next',
+        prevButton: '.swiper-button-prev',
+        paginationClickable: true,
+        spaceBetween: 30,
+        centeredSlides: true,
+        autoplay: 2500,
+        autoplayDisableOnInteraction: false
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file