仿优酷界面-最上方轮播图及导航条--2019年3月15日 - 作业

首页 > 博客列表 > 仿优酷界面-最上方轮播图及导航条--2019年3月15日

博主信息

博文 24

粉丝 1

访问量 26113

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="static/images/1.ico">
  <!-- 引入字体库 -->
  <link rel="stylesheet" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="static/css/style.css" charset="utf-8">
  <title>优酷-这世界很酷</title>
</head>
<body>
  <!-- 页面头部 -->
  <div class="header pr">
    <img src="static/images/b1.png" alt="轮播图背景"height="420px"width="100%">
    <a href="#"> <abbr title="Youku 优酷"><img src="static/images/logo.png" alt="logo" class="logo_pa"></abbr></a>
    <!-- 轮播图 <--></-->
    <div class="h_imgs">
      <img src="static/images/d1.jpg" alt="都挺好"height="420px" width="100%">
    </div>
    <form class="pr" action="index.html" method="post">
      <input type="text" name="" value="" class="">
      <button type="button" name="button"class="s_butt">搜全网</button>
    </form>
    <!-- 右侧导航条与图标 -->
    <div class="fonts pr">
      <ul class="d_pa">
        <li class="lf"><a href="#" class="yel d_yellow"> <i class="fa fa-diamond fa-2x"></i><br>vip</a></li>
        <li class="lf d_padd"><a href="#"class="d_blue"><i class="fa fa-feed fa-2x"></i><br>订阅</a></li>
        <li class="lf d_padd">
          <a href="#"class="d_blue pr">
            <i class="fa fa-clock-o fa-2x">
            </i><br>记录
          </a>
          <div class="d_box2">
            <div class="d_xjt"></div>
            <div class="d_padd_top d_padd_b">
            <form action="">
              <button type="button" name="button">登录</button><span class="font_b">  同步各端记录</span>
            </form>
            </div>
            <div class="d_box3 d_padd_top">
              <img src="static/images/gk1.png" alt="观看记录"width="80px"height="80px"><br>
              您暂时没有观看记录哟~
            </div>
          </div>
        </li>
        <li class="lf d_padd"><a href="#"class="d_blue"><i class="fa fa-upload fa-2x"></i><br>上传</a></li>
        <li class="lf d_padd"><a href="#"class="d_blue"><i class="fa fa-television fa-2x"></i><br>客户端</a></li>
        <li class="lf d_img"><a href="#"><img src="static/images/80.png" alt=""width="40px"height="40px"></a></li>
      </ul>
      <div class="clear"></div>
    </div>
    <div class="l_box1">
      <div class="l_box2">
        <ul>
          <li><a href=""><span>这!就是原创:</span>方言摇滚引老肖王嘉尔蹦迪</a></li>
          <li><a href=""><span>乡村爱情11:</span>宋晓峰!遭暴打</a></li>
          <li><a href=""><span>王牌对王牌:</span>天龙八部主演感人重聚</a></li>
          <li><a href=""><span>以团之名:</span>6进3公演超燃来袭</a></li>
          <li><a href=""><span>都挺好:</span>石天冬救美出糗</a></li>
          <li><a href=""><span>只为遇见你:</span>于直再次深情表白高洁</a></li>
          <li><a href=""style="border:none"><span>一吻定情:</span>少女心!林允甜蜜告白王大陆</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 主图下面导航条 -->
  <div class="boxf">
    <div class="fonta x_box1 lf">
      <a href="">剧集</a>
      <a href="">电影</a>
      <a href="">综艺</a>
      <a href="">动漫</a>
      <a href="">娱乐</a>
      <a href="">生活</a>
    </div>
    <div class="fonta x_box1 lf x_bord">
      <a href="">少儿</a>
      <a href="">来疯</a>
      <a href="">音乐</a>
      <a href="">搞笑</a>
      <a href="">直播</a>
      <a href="">片库</a>
    </div>
    <div class="fonta x_box1 lf x_bord">
      <a href="">纪实</a>
      <a href="">公益</a>
      <a href="">体育</a>
      <a href="">汽车</a>
      <a href="">科技</a>
      <a href="">财经</a>
    </div>
    <div class="fonta x_box1 lf x_bord">
      <a href="">文化</a>
      <a href="">旅游</a>
      <a href="">时尚</a>
      <a href="">亲子</a>
      <a href="">教育</a>
      <a href="">游戏</a>
    </div>
    <div class="fonta x_box2 lf x_bord">
      <a href="">资讯</a><br>
      <a href="">VR</a>
    </div>
    <div class="x_box3 fonta lf x_bord">
      <a href=""><i class="fa fa-file-video-o fa-2x"></i><br>优酷片库</a>
      <a href=""><i class="fa fa-bar-chart-o fa-2x"></i><br>指数排行</a>
      <a href=""><i class="fa fa-gift fa-2x"></i><br>大鱼号精选</a>
      <a href=""><i class="fa fa-desktop fa-2x"></i><br>下载应用</a>
    </div>
    <div class="clear"></div>
  </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

/* 去除边框效果 */
*{
  margin: 0;
  padding: 0;
}
/* 去除a连接效果 */
a{
  text-decoration: none;
  color: #666666;
}
/* 清除浮动 */
.clear{
  clear: both;
}
/* 去除li标签格式 */
li{
  list-style: none;
}
/* 设置头部div宽高背景 */
.header{
  width: 100%;
}
/* 轮播图设置 */
.h_imgs{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
/* 绝对定位 position: relative; */
.pr{
  position: relative;
}
/* logo图片相对定位 */
.logo_pa{
  position: absolute;
  top: 25px;
  left: 75px;
}
/* form表单text */
form input{
  width: 330px;
  height: 40px;
  color: #fff;
  border-radius: 30px;
  border: none;
  outline: none;
  position: absolute;
  top:-410px;
  left:485px;
  background: rgba(255, 255, 255, 0.3);
  font-size: 15px;
}
/* button  搜全网按钮设置 */
.s_butt{
  width: 83px;
  height: 40px;
  color: #fff;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border: none;
  background: #1F82FC;
  position: absolute;
  top: -410px;
  left:770px;
}
/* 右侧导航条vip颜色 */
.yel{
  color: #F1D45F;
  font-weight: bold;
}
/* 统一字体 */
.fonts
{
  font-size: 12px;
  text-align: center;
}
/* 左浮动 */
.lf{
  float: left;
}
/* 导航条位置 */
.d_pa{
  position: absolute;
  top:-410px;
  left:973px;
}
/* 导航条间距 */
.d_padd{
  padding-left: 25px;
  color: #AAAAB0;
}
/* 导航条图片间距 */
.d_img{
  padding-left: 40px;
}
/* 导航条鼠标移入字体变黄 */
.d_yellow:hover{
  color:yellow;
}
/* 导航条鼠标移入字体变蓝 */
.d_blue:hover{
  color: #35B8F1;
}
/* 导航条记录按钮div box2 */
.d_box2{
  width: 330px;
  height: 190px;
  background: #fff;
  display: none;
  position: absolute;
  top: 50px;
  left:-45px;
  z-index: 2;
}
/* 内部button按钮 设置 */
.d_box2 button{
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background: #1F82FC;
  color: #fff;
  border: none;
}
/* 黑色字体 */
.font_b{
  color: black;
}
/* 上边距 */
.d_padd_top{
  padding-top: 15px;
}
/* 下边距 */
.d_padd_b{
  padding-bottom: 15px;
}
/* 内部div设置box3 */
.d_box3{
  border-top: 1px solid #EBEBEB;
}
/* 小箭头 */
.d_xjt{
  width: 0;
  height: 7px;
  border: 7px solid ;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -20px;
  left: 150px;

}
/* 鼠标移入显示div */
.d_pa li:hover .d_box2 {
  display: block;
}
/* 右侧轮播图设置 */
.l_box1{
  width: 220px;
  height: 335px;
  background:rgba(92, 95, 98, 0.7);
  position: absolute;
  top: 70px;
  right: 75px;
}
/* 右侧轮播图内部div */
.l_box2{
  width: 180px;
  height: 310px;
  padding-left: 20px;
  padding-top: 5px;
  font-size: 15px;
}
/* 轮播图a连接设置 */
.l_box2 ul li a{
  display: block;
  line-height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid rgba(80, 80, 80, 0.2);
  padding: 10px 0px;
  color: #BEC0C0;
}
/* a连接触发事件 span设置 */
.l_box2 ul li a:hover span{
  font-size: 18px;
  display: block;
  color: #fff;
}
/* a连接字体 间距 */
.l_box2 ul li:hover a{
  color: #fff;
  padding: 3px 0px;
}
/* 主图下导航条设置 */
.x_box1{
  width: 180px;
  height: 50px;
}
/* 内部a连接 */
.x_box1 a{
  padding-left: 18px;
  line-height: 25px;
}
/* 设置大div宽度 */
.boxf{
  width: 1200px;
  margin: 10px auto;
}
/* 设置字体 全局基本使用此字体 */
.fonta{
  font-size: 15px;
  color: #666666;
}
/* 设置导航条间隔线 */
.x_bord{
  border-left: 2px solid #F3F3F3;
}
/* 导航条内部小div  资讯  vr*/
.x_box2{
  width: 75px;
}
/* 设置内部a连接 */
.x_box2 a{
  padding-left: 21px;
  line-height: 25px;
}
/* 设置最后带图标导航条div */
.x_box3{
  width: 375px;
  line-height: 25px;
}
/* 内部a连接 */
.x_box3 a{
  display: block;
  float: left;
  padding-left: 30px;
  text-align: center;
}
/* 触发效果 导航条所有a连接 鼠标移动上变蓝 */
.boxf a:hover{
  color: #35B8F1;
}
/* 图标不变色 */
.x_box3 a:hover i{
  color:  #666666;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

通过练习熟悉了前端元素与css样式表的操作,对以前掌握十分模糊的浮动定位块级行内等元素的相互转换,各种特点有了明确的认识和了解,现在可以在不看老师代码的情况下做出作业内容,速度有待提高感谢老师

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

简介--希望每天都有进步

2019-04-30 22:43:39