web网页设计作业-html腾龙电影网页模版(3页)

于 2024-12-05 14:42:55 发布
阅读量285 收藏 7
点赞数 5
分类专栏： html影视网页制作【code.weylin.cn】 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40486643/article/details/144266193
版权

📒 web网页设计期末课程大作业:html腾龙电影网页模版(3页)

大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品

该首页代码采用了DIV盒子的布局方法，展示了盒子嵌套、浮动、边距、边框和背景等属性的运用。外部大盒子实现居中，内部布局为左右中结构，底部则是横向浮动排列。代码中涵盖了大学前端学习的知识点和布局技巧，CSS代码量丰富且细致，通过hover效果实现过渡和鼠标滑过效果。此外，页面中使用表格和表单来补充功能，方便新手学习。某些源码页面未使用JS，需者可自行添加。

涵盖个人、电影、美食、动漫、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、摄影、文化、家乡、鲜花、礼品、汽车等多个网页设计主题，能够满足大学生在网页大作业中的需求！

页面结构： 分为页头、菜单导航栏（最好支持下拉）、主要内容区域和页脚四大部分。
页面链接： 所有页面应互相超链接，支持三级页面，整体结构为5-10个页面。
样式统一： 页面样式需统一且布局正常，使用Div+CSS技术确保无错乱。
美观的菜单： 菜单设计应美观且醒目，二级菜单可正常弹出和跳转。
JS特效： 需要有如定时和手动切换的图片轮播等JS特效。
多媒体元素： 页面中应包含多媒体元素，如GIF、视频和音乐，并运用表单技术。
清爽美观： 页面设计应清新、优雅，避免雷同。

整体上，不仅要能展示用户需求的内容，还需确保良好的布局、优雅的界面、恰当的配色以及多样的表现形式。

目录导航

一、📖 作品介绍

网页作品简介： 该设计达到了HTML网页设计A++水平，部分支持手机和PC的响应式布局。
网页作品编辑： 此作品为学生网页设计类型，代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件（如：DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等）进行编辑和修改。
网页作品布局： 整体采用响应式布局，包含LOGO、导航、主体内容等布局。子页面有多种布局方式，兴趣爱好内容使用图片列表展示，成绩页面插入了表格，联系我们页面则使用了左对齐的图片布局。
网页作品技术： 使用DIV+CSS制作网页，包含背景图、音乐、视频、Flash、滚动文字、CSS特效、鼠标悬停效果、导航变色、表单提交及评论留言功能，并通过JavaScript进行表单验证（确保提交时表单不能为空）。

提示：以下是本篇文章正文内容，下面案例可供参考

二、🌐 效果演示

请添加图片描述
请添加图片描述

三、🪓 代码实现

🧱 HTML结构代码

代码如下（示例）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.superslide.2.1.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<title>首页</title>
</head>

<body class="background_color">

<div class="Slideshow_style" id="Slideshow">
<div class="header_top">
<div class="header clearfix">
 <a href="#" class="logo_style"><img src="picture/logo.png" /></a>
 <div class="search_stye">
 <input name="" type="text"  class="search"/><button name="" type="button" class=" btn-success button_submit" onclick="submit_btn()"><i class="icon_search"></i>搜索</button>
 </div>
 </div>
</div>
 <div class="wrapper" id="wrapper_slideBox">
  <div class="hd Switch_operation">
   <ul class=" clearfix">
   <li><a href="#"><img src="picture/x-banner1.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   <li><a href="#"><img src="picture/x-banner2.jpg" /><span></span></a></li>
   </ul>
  </div>
  <div class="bd">
   <ul>
    <li style="background:url(images/banner2.jpg) no-repeat center; text-align:center; height:600px;"><a href="#" class=""></a></li>
    <li style="background:url(images/banaer.png) no-repeat center; text-align:center; height:600px;"><a href="#" class=""></a></li>
   </ul>
  </div>
 </div>
 <script>jQuery("#wrapper_slideBox").slide({mainCell:".bd ul",autoPlay:true,delayTime:1000});</script>
</div>
<div class="home_style  Channel">
<!--栏目-->
 <div class="home_Column_style">
 <div class="Column_list clearfix navigation_list">
  <ul class="">
   <li class="Channel_name"><a href="index.tml" ><i class="icon_TV"></i>首页</a></li>
   <li class="Channel_name1"><a href="list_page.html" ><i class="icon_TV"></i>娱乐</a></li>
   <li class="Channel_name2"><a href="#" ><i class="icon_TV"></i>电视剧</a></li>
   <li class="Channel_name3"><a href="#"><i class="icon_TV"></i>电影</a></li>
   <li class="Channel_name4"><a href="#" ><i class="icon_TV"></i>网络电影</a></li>
   <li class="Channel_name5"><a href="#" ><i class="icon_TV"></i>综艺</a></li>
   <li class="Channel_name6"><a href="#" ><i class="icon_TV"></i>动漫</a></li>
   <li class="Channel_name7"><a href="#" ><i class="icon_TV"></i>纪录片</a></li>
   <li class="Channel_name8"><a href="#" ><i class="icon_TV"></i>公开课</a></li>
  </ul>
  </div>
  <!--栏目-->
  <div class="Column_list navigation">
  <a href="#" class="w_logo"><img src="picture/logo.png"  width="100%"/></a>
   <div class="navigatio_name">
     <a href="javascript:" class="mouse-enter"><i class="icon_navigatio"></i>导航</a>
     <div class="navigatio_nav">
     <ul class=" clearfix">
   <li class="Channel_name"><a href="#" ><i class="icon_TV"></i>首页</a></li>
   <li class="Channel_name1"><a href="#" ><i class="icon_TV"></i>娱乐</a></li>
   <li class="Channel_name2"><a href="#" ><i class="icon_TV"></i>电视剧</a></li>
   <li class="Channel_name3"><a href="#"><i class="icon_TV"></i>电影</a></li>
   <li class="Channel_name4"><a href="#" ><i class="icon_TV"></i>网络电影</a></li>
   <li class="Channel_name5"><a href="#" ><i class="icon_TV"></i>综艺</a></li>
   <li class="Channel_name6"><a href="#" ><i class="icon_TV"></i>动漫</a></li>
   <li class="Channel_name7"><a href="#" ><i class="icon_TV"></i>纪录片</a></li>
   <li class="Channel_name5"><a href="#" ><i class="icon_TV"></i>公开课</a></li>
   <li class="Channel_name8"><a href="#" ><i class="icon_TV"></i>公开课</a></li>
   <li class="Channel_name3"><a href="#" ><i class="icon_TV"></i>公开课</a></li>
  </ul>
     </div>
     
   </div>
   <div class="Video_search">
     <input name="" type="text"  class="search"/><button name="" type="button" class=" btn-success button_submit"><i class="icon_search"></i>搜索</button>
  </div>
  </div>
 </div>
 <!--热播精选-->
 <div class="Hot_selection_style Channels">
   <div class="title_name clearfix"><i class="icon_title"><img src="picture/icon_title_tv.png" /></i>热播精选 <span class="link_name"><a href="#">3月观影指南:炫酷大片不容错过</a>| <a href="#">致命诱惑!这些制服妹子好美</a>|</span></div>
   <div class="Video_list margintb clearfix">
    <div class="left_Video_list Channel_bg bg">
     <span class="Signs_img"></span>
     <a href="#" class="Video_img_link">
      <img src="picture/1.jpg" />
      <span class="xianshi"><i class="icon_bofang"></i></span>
     </a>
     <div class="heading_name">
      <A href="#">男子保护区内持枪狩猎 竟把民警当猎物射击</A>
      <H4>民警及时隐蔽卧倒并未受伤</H4>
     </div>
    </div>
    <div class="right_Video_list">
     <ul class="list_v_content">
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/3.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >现场</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     </ul>
    </div>   
   </div>
   <!--电视剧-->
   <div class="Channels margintb">
    <div class="title_name clearfix">
    <i class="icon_title"><img src="picture/icon_title_tv.png" /></i>电视剧 <span class="link_name"><a href="#">偶像言情</a>| <a href="#">古装</a>| <a href="#">更多</a></span></div>
    <div class="clearfix mb40"> 
     <div class="var_list_fort">
     <ul class="video_list list_v_content">
     <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新4集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     </ul>
     </div>
     <!--右-->
     <div class="Launch_style bg" id="picMarquee-top">
       <div class="label_title"><span class="name">即将上线</span></div>
       <div class="bd">
       <ul class="Launch_list">
        <li class="video_name">
        <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
       <p class="set_number">集数：23集</p>
        </span> </div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：45集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
       </ul>
       </div>
     </div>
     <script>jQuery("#picMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50,trigger:"click"});</script>
    </div>
     <!--预告-->
       <div class="Notice_style">
        <div class="Notice_title"><span class="name">电视剧预告</span></div>
        <div class="clearfix list_v_content">
          <ul class="Notice_list">
            <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/11.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/13.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/12.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      
          </ul>
        </div>
       </div>
   </div>
      <!--综艺-->
   <div class="Channels margintb">
    <div class="title_name clearfix">
    <i class="icon_title"><img src="picture/icon_title_tv.png" /></i>综艺娱乐 <span class="link_name"><a href="#">偶像言情</a>| <a href="#">古装</a>| <a href="#">更多</a></span></div>
    <div class="clearfix mb40"> 
     <div class="var_list_fort">
     <ul class="video_list list_v_content">
     <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/16.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >2017年34期</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/17.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/18.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新4集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     </ul>
     </div>
     <!--右-->
     <div class="Launch_style bg" id="picMarquee-top1">
       <div class="label_title"><span class="name">即将上线</span></div>
       <div class="bd">
       <ul class="Launch_list">
        <li class="video_name">
        <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
       <p class="set_number">集数：23集</p>
        </span> </div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：45集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
       </ul>
       </div>
     </div>
     <script>jQuery("#picMarquee-top1").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50,trigger:"click"});</script>
    </div>
     <!--预告-->
       <div class="Notice_style">
        <div class="Notice_title"><span class="name">电视剧预告</span></div>
        <div class="clearfix list_v_content">
          <ul class="Notice_list">
            <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/11.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/13.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/12.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      
          </ul>
        </div>
       </div>
   </div>
   <!--电影-->
   <div class="Channels margintb">
    <div class="title_name clearfix">
    <i class="icon_title"><img src="picture/icon_film.png" /></i>电影<span class="link_name"><a href="#">偶像言情</a>| <a href="#">古装</a>| <a href="#">科幻</a> | <a href="#">搞笑</a>|<a href="#">更多</a></span></div>
    <div class="clearfix  "> 
    <ul class="movie_list  clearfix">
     <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
          <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
          <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
          <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
          <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
          <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
          <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/10.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/6.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/9.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/8.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
               <li class="Case_info">
     <a href="#" class="movie_link">
     <img src="picture/7.jpg"  width="100%"/>
     <div class="movie_title">
      <i class="fraction">6.5</i>
      <p class="name">天空之眼</p>
      <h5>众多奥斯卡大咖加盟</h5>
      <p class="content">
        凯瑟琳上校（海伦·米伦饰）率英国情报单位追捕一名女性恐怖分子长达六年，经由美军加入高空监视行动，好不…
      </p>
     </div>
     </a>
     </li>
    </ul> 
       <!--预告-->
       <div class="Notice_style">
        <div class="Notice_title"><span class="name">电影预告</span></div>
        <div class="clearfix list_v_content">
          <ul class="Notice_list">
            <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/11.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/13.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/12.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
          </ul>
        </div>
       </div>
    </div>
    </div>
          <!--动漫-->
   <div class="Channels margintb">
    <div class="title_name clearfix">
    <i class="icon_title"><img src="picture/icon_title_tv.png" /></i>动漫 <span class="link_name"><a href="#">欧美</a>| <a href="#">古装</a>| <a href="#">更多</a></span></div>
    <div class="clearfix mb40"> 
     <div class="var_list_fort">
     <ul class="video_list list_v_content">
     <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/19.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >2017年34期</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/20.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/21.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >43集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
      <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/4.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新4集</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
     </ul>
     </div>
     <!--右-->
     <div class="Launch_style bg" id="picMarquee-top2">
       <div class="label_title"><span class="name">即将上线</span></div>
       <div class="bd">
       <ul class="Launch_list">
        <li class="video_name">
        <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
       <p class="set_number">集数：23集</p>
        </span> </div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：45集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
         <li class="video_name">
         <div class="clearfix">
        <a href="#" class="link_name"><img src="picture/5.jpg"/></a>
        <span class="Introduction">
        <a href="#" title="愿有人陪你颠沛流离" class="p_title_name">愿有人陪你颠沛流离</a>
        <p class="set_number">集数：23集</p>
        </span></div><p class="time">上线时间：2017-03-30</p></li>
       </ul>
       </div>
     </div>
     <script>jQuery("#picMarquee-top2").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50,trigger:"click"});</script>
    </div>
     <!--预告-->
       <div class="Notice_style">
        <div class="Notice_title"><span class="name">电视剧预告</span></div>
        <div class="clearfix list_v_content">
          <ul class="Notice_list">
            <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/11.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/13.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/12.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
        </ul>
        </div>
       </div>
   </div>
   <!--其他-->
    <div class="Channels margintb">
    <div class="title_name clearfix">
    <i class="icon_title"><img src="picture/icon_title_tv.png" /></i>其他 <span class="link_name"><a href="#">欧美</a>| <a href="#">古装</a>| <a href="#">更多</a></span></div>
     <div class="clearfix list_v_content">
          <ul class="Notice_list">
            <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/14.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/11.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/13.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
       <li class="first_content bg">
       <a href="#" class="pic " target="_blank">
        <img src="picture/12.jpg"  width="100%"/>
        <span class="first_bg"><i class="icon_bf"></i></span>
       </a>
       <a target="_blank" href="#" class="bq" >更新预告</a>
       <div class="tc">
        <p class="tit">
        <a target="_blank" href="#" >轿车公路上行驶被闪电劈中</a></p>
        <p class="des">巨响过后冒出浓烟</p>
       </div>
      </li>
        </ul>
        </div>      
    </div>
    <!---->
    <div class="l_f width50">
     <div class="bg mr10">
      <div class="n_title_name"><em class=""></em>网站公告</div>
      <ul class="notice_list clearfix">
       <li><a href="#"><i class="icon_yuan"></i>通知公告内容是什么的内容的介绍信息</a> </li>
       <li><a href="#"><i class="icon_yuan"></i>通知公告内容是什么的内容的介绍信息</a> </li>
       <li><a href="#"><i class="icon_yuan"></i>通知公告内容是什么的内容的介绍信息</a> </li>
       <li><a href="#"><i class="icon_yuan"></i>通知公告内容是什么的内容的介绍信息</a> </li>
       <li><a href="#"><i class="icon_yuan"></i>通知公告内容是什么的内容的介绍信息</a> </li>
      </ul>
     </div>
    </div>
    <div class="l_f width50">
     <div class="bg ml10">     
     <div class="n_title_name">合作伙伴</div>
     <div class="notice_list clearfix">
      <a href="#" class="Cooperation_name">华数</a>
      <a href="#" class="Cooperation_name">万达电影网</a>
      <a href="#" class="Cooperation_name">华谊兄弟</a>
      <a href="#" class="Cooperation_name">星美</a>
      <a href="#" class="Cooperation_name">光线影业</a>
      <a href="#" class="Cooperation_name">电影网</a>
      <a href="#" class="Cooperation_name">华策影视</a>
      <a href="#" class="Cooperation_name">百度视频</a>
      <a href="#" class="Cooperation_name">百度百科</a>
      <a href="#" class="Cooperation_name">微博视频台</a>
      <a href="#" class="Cooperation_name">百度贴吧</a>
      <a href="#" class="Cooperation_name">央广网</a>
      <a href="#" class="Cooperation_name">hao123</a>
      <a href="#" class="Cooperation_name">爱奇艺</a>
      <a href="#" class="Cooperation_name">天猫店</a>
     </div>
     </div>
    </div>
 </div>
</div>
<!--底部样式-->
<div class="footer_style">
<div class="footer">
 <div class="copys copys-list clearfix">
   <a href="#">网络文化经营许可证 京网文[2014]xxxxx-236号</a>
   <a href="#">京卫网审[2013]第0209号 网络110报警服务</a>
   <a href="#">药品服务许可证(京)-经营2222-0029</a>
  <a href="#">节目制作经营许可证京字670号</a>
 </div>
<div class="link_name">
<a href="#">关于我们</a>|<a href="#">媒体合作</a>|<a href="#">开放平台</a>|<a href="#">广告服务</a>|<a href="#">联系我们</a>|<a href="#">工作机会</a>|<a href="#">友情链接</a></div>
<div class="Copyright">Copyright © 2004-2017 视频名称（xx.com）All rights reserved.</div>
<div class="align clearfix">
 <a href="#"><img src="picture/ghs.png" />京公网安备：xxxxxxxxxxxxxxxx号</a> &nbsp;&nbsp;&nbsp;
 <a href="#"><img src="picture/xy.png" />中国互联网诚信联盟</a>
</div>
</div>

</div>
<!-- 代码 开始 -->
<div class="go-top dn" id="go-top">
    
    <a href="zhuce.html" target="_blank" class="feedback"></a>
    <a href="javascript:;" class="go"></a>
</div>
</body>
</html>
<script>
/*********搜索*********/
function submit_btn(){
	 $(".search_style input[type$='text']").each(function(n){
		  if($(this).val()=="")
          {
               
					 layer.open({
		title: [
		  '我是标题',
		  'background-color:#8DCE16; color:#fff;'
		]
		,anim: 'up'
		,content: '展现的是全部结构'
		,btn: ['确认', '取消']
	  }); 
            return false;            
          } 
		 else{
			 location.href="search_page.html";
			 
			 }
		 })		
}
</script>

🏠 CSS样式代码

代码如下（示例）：

root {display: block;}
html, body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td ,img,textarea{border: 0px;margin: 0px;outline: 0px;padding: 0px;}
fieldset, img { border: 0; }
img { display:inline-block; }
:focus { outline: 0; }
li {display: list-item;text-align: -webkit-match-parent;}
em, i, u {font-style: normal;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family:"Microsoft YaHei" }
abbr, acronym { border: 0; font-variant: normal; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
code, kbd, samp, tt { font-size:100%; }
input, button, textarea, select { *font-size: 100%;font-family:"Microsoft YaHei";}
ol, ul { list-style: none outside none; }
table { border-collapse: collapse; border-spacing: 0;}
caption, th { text-align: left; }
:link, :visited, ins { text-decoration: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a{ color: #666666}
div {display: block;}
a:hover{ color: #1695E9}
.row{margin-right:0px; margin-left: 0px;}
.margin-top{ margin-top:10px}
.r_f{ float:right}
.l_f{ float:left}
.width50{ width:50%}
.mb40{ margin-bottom:40px;}
.ml10{ margin-left:10px;}
.mr10{ margin-right:10px;}
.mt10{ margin-bottom:10px;}
.margin{ margin:15px;}
.marginq{ margin:10px;}
.marginsx{ margin:10px 0px;}
.margintb{ margin:20px 0px;}
.width150{ width:150px !important;}
.align{ text-align:center}
.display_none{ display:none}
.relative{ position:relative}
.border{ border:1px solid #ddd; padding:5px; height:50px; line-height:36px; margin-bottom:20px; }
.border span{ display:block; height:100%;}
.alert{ margin-top:20px;}

四、📁 目录结构

├── css
│ ├── bootstrap.css
│ └── common.css
├── images
│ ├── an_icon_03.png
│ ├── banaer.png
│ ├── banner2.jpg
│ ├── base_common.png
│ ├── bg_b1.png
│ ├── bg_transparent.png
│ ├── go-top.png
│ ├── icon_tv.png
│ ├── icon_tv_c.png
│ ├── icon_tv_nav.png
│ ├── input-checked-hui.png
│ ├── listcontrol-btn.png
│ ├── loginbg1.png
│ ├── play-btn.png
│ ├── play_icon.png
│ ├── search_icon.png
│ └── site-icons-play.png
├── index.html
├── js
│ ├── bootstrap.min.js
│ ├── common.js
│ ├── jquery-1.9.1.min.js
│ ├── jquery.superslide.2.1.1.js
│ └── layer.js
├── list_page.html
├── picture
│ ├── 1.jpg
│ ├── 10.jpg
│ ├── 11.jpg
│ ├── 12.jpg
│ ├── 13.jpg
│ ├── 14.jpg
│ ├── 16.jpg
│ ├── 17.jpg
│ ├── 18.jpg
│ ├── 19.jpg
│ ├── 20.jpg
│ ├── 21.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── 6.jpg
│ ├── 7.jpg
│ ├── 8.jpg
│ ├── 9.jpg
│ ├── d1.jpg
│ ├── d10.jpg
│ ├── d2.jpg
│ ├── d3.jpg
│ ├── d4.jpg
│ ├── d5.jpg
│ ├── d6.jpg
│ ├── d7.jpg
│ ├── d8.jpg
│ ├── d9.jpg
│ ├── ghs.png
│ ├── icon_film.png
│ ├── icon_title_tv.png
│ ├── logo.png
│ ├── x-banner1.jpg
│ ├── x-banner2.jpg
│ └── xy.png
└── select.html

五、💡 博主建议

第一，明确学习目标
在进行学习时，无论是通过阅读、参加课程还是参与线下活动，都要设定清晰的目标。思考你想要解决的问题或希望实现的具体目标，这样能够更有针对性地进行学习。
第二，从实战中学习
单纯的理论学习往往难以记忆和应用，因此实践是关键。初学者可以通过模仿和重写已有的代码来加深理解。实战经验不仅能巩固基础，还能快速提升技能。
第三，建立个人知识体系
知识无穷无尽，面对浩瀚的书籍和信息，我们需要理清思路，避免迷失。每一个知识点都有其特定的背景和边界，通过归纳和整理，可以形成自己的知识体系，帮助更好地理解和应用。
第四，将所学应用于实践
学到的知识必须与实际工作和生活结合起来。每天学习的新知识应当与现实情况联系，通过实践来验证和深化理解。热爱学习是值得赞扬的，但能有效应用知识的人才是真正有价值的。

六、🎁 更多作品

如果我的博客对你有所帮助，或者你喜欢我的内容，请别忘了“👍点赞”、“✍️评论”和“❤️收藏”，支持我一下哦！

关注我获取更多源码，这里有丰富的前端插件、炫酷的3D效果、图片展示、文字效果，以及整站模板、大学生毕业HTML模板、期末大作业模板等！在这里，许多前端开发者聚集在一起，共同探讨前端和Node知识，互相学习！

请添加图片描述

👇🏻👇🏻👇🏻对于上述技术相关的技术问题有不懂的，欢迎随时免费交流学习👇🏻👇🏻👇🏻
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值