<!DOCTYPE html> <html> <head> <title>优酷导航布局</title> <meta charset="utf-8"> <link rel="icon" type="image/x-icon" href="\phpstudy/demo3/1.ico"> <style type="text/css"> *{margin:0 ; padding:0;} .contents{ width: 1500; margin: 0 auto; } .content{ width: 100%; margin-top: 20px; } /*轮播模块+头部导航*/ .header{ height: 520px; width: 100%; background: #072439; /*position: relative;*/ } .pic_show{ width: 1500px; height: 520px; background: url(../phpstudy/demo5/y1.jpg); margin: 0 auto; position: relative; } .bg{ width: 100%; height: 100%; background: url(../phpstudy/demo5/y.png); position: absolute;top: 0;left: 0; /*这里的定位是相对于最大图片的*/ z-index: 99; } .l{float: left;} /* 左浮动*/ /*宽度不够和没有左浮动,是不能形成纵向排列的*/ .r{ float: right; } li{ list-style: none; float: left; /*正常情况纵向排列,左浮动就可以横向排列*/ } a{ text-decoration:none; /*消除下划线*/ } /*头部导航*/ .header_ul{ position: fixed; /*这个定位是相对于header/pic_show*/ top: 20px; left: 90px; z-index: 100; } .head_r { width: 1500px; /*浮动是在空间里浮动,设置的宽高不够,浮动效果是不明显的;*/ margin:0 auto; position: absolute; top: 100px; z-index: 100; right: -100px; } .header_r_menu{ padding: 0 15px; width: 190px; background: rgba(0,0,0,0.5); } .header_r_menu a{ padding:10px 0; color: rgba(254,254,254,0.6); font-size:13px; line-height: 25px; white-space: nowrap; /*不允许换行*/ overflow: hidden; /*超出范围隐藏*/ text-overflow: ellipsis; display: block; /*行内元素时限制不了狂傲的,需要转换成块元素*/ border-bottom: 1px solid rgba(147,147,147,0.4); } .header_r_menu a:hover span{ font-size: 20px; display: block; /*所谓换行就是快元素和内元素正常情况是不会在一行内*/ color: #fff; } .logo form{width: 500px;height: 40px; position: relative; margin-left:400px; display: inline-block; /*行转块 */ } .logo input{ width:480px; height: 40px;border-radius: 100px;border: none; background:rgba(234,234,234,0.5); outline: none; /*清掉输入框自带的焦点*/ padding-left: 20px; color: #fff; } .logo button{width: 90px;height: 40px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; background: #B30702; border: none; color: #fff; position: absolute;top: 0;right:0; outline: none; /*清掉按钮自带的焦点,也就是边框的小阴影*/ } .menu_li a,i{ color: rgba(234,234,234,0.5); } .menu_li li{ position: relative; padding: 0 10px; text-align: center; font-size: 13px; } .menu_li i{ font-size: 15px; } .menu_li li:hover a{ color: #48ADF2; } .menu_li li:hover i{ color: #48ADF2; } .contents{ /*需要设置宽度,不然像左靠齐宽度不够,会另起一行*/ /*宽度不够和没有左浮动,是不能形成纵向排列的*/ width: 1740px; margin: 0 auto; } .menu_li .box{ position: absolute; background: #fff; padding: 20px; top: 60px; right: -10px; display: none; /*隐藏登录功能*/ } .menu_li button{ background: #2798ff; color: #fff; border: none; height: 36px; width: 200px; border-radius: 30px; margin-top: 10px; outline: none; /*清掉按钮自带的焦点,也就是边框的小阴影*/ } .menu_li p{ color: #ccc; font-size: 17px; } ul li:hover .box{ display:block; /*显示登录功能*/ } .arrow{ width: 0; height: 7px; border: 7px solid; border-color: transparent transparent #fff transparent; position: absolute; top: -21px; right: 30px; } /*<!-- 网站分类 -->*/ .voltage li{ margin-top: 10px; line-height: 30px; width: 230px; font-size: 15px; } .voltage a{ padding-right: 43px; color: } .b_r{ border-right: 2px solid /*#f2f2f2*/ red; height: 45px; display: inline-block; /*设置行内快,使a标签和span标签在一行内*/ float: left; /*定义了所有的li是浮动的,span要对齐也需要浮动*/ margin-top: 17px; margin-right: 45px; } li.hoc{ width: 80px; text-align: center; padding: 0 20px; } li.hoc i{color: #666;font-size: 17px;} .hoc a{padding: 0;color: #666;} .clear{ clear:both;} /*清除浮动*/ </style> </head> <body> <!-- 顶部布局 --> <div class="header"> <!-- 轮播布局 --> <div class="pic_show"> <!-- 最上面的大图片 --> <div class="bg"></div> <!-- 背景图 --> <div class="head_r"> <!-- 这里需要居中等下再来添加 --> <div class="header_r_menu r"> <a href=""><span>2019两会闭幕:</span>全程回归解读热点还有什么事情是一餐饭解决不了的</a> <a href=""><span>2019两会闭幕:</span>全程回归解读热点还有什么事情是一餐饭解决不了的</a> <a href=""><span>2019两会闭幕:</span>全程回归解读热点还有什么事情是一餐饭解决不了的</a> <a href=""><span>2019两会闭幕:</span>全程回归解读热点还有什么事情是一餐饭解决不了的</a> <a href=""><span>2019两会闭幕:</span>全程回归解读热点</a> <a href=""><span>2019两会闭幕:</span>全程回归解读热点</a> <a style="border: none;" href=""><span>2019两会闭幕:</span>全程回归解读热点还有什么事情是一餐饭解决不了的</a> </div> </div> </div> <!-- 顶部的搜索导航 --> <div class="header_ul contents"> <!-- 这里需要居中-等下再来添加 --> <div class="logo l"> <!-- <这里用到了浮动 --> <a><img src="\phpstudy/demo5/logo.png"></a> <form> <input type="text" name=""> <button>全网搜</button> </form> </div> <ul class="menu_li r"> <li><i style="color: #c4a250;" class="fa fa-bank">one</i><br><a style="color: #c4a250; href="">vip</a></li> <li><i class="fa fa-bank">two</i><br><a href="">订阅</a></li> <li><i class="fa fa-bank">three</i><br><a href="">上传</a></li> <li><i class="fa fa-bank">four</i><br><a href="">上传</a></li> <li><i class="fa fa-bank">five</i><br><a href="">客户端</a></li> <li><a href=""><img src="\phpstudy/demo5/80.png" width="40px;"></a> <div class="box"> <span class="arrow"></span> <p>登录使用更多功能</p> <button>登录/注册</button> </div> </li> </ul> </div> <div class="clear"></div> </div> <!-- 网站分类 --> <div class="contents"> <div class="contents"> <ul class="voltage"> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span><!-- 定义了所有的li是浮动的,span要对齐也需要浮动 --> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li style="width:80px;"><a href="">剧集</a><br><a href="">电影</a></li> <span class="b_r"></span> <li class="hoc"><i class="fa fa-feed">one</i><br><a href="">优酷片库</a></li> <li class="hoc"><i class="fa fa-bar-chart">two</i><br><a href="">指数排行</a></li> <li class="hoc"><i class="fa fa-angellist">three</i><br><a href="">大鱼号精选</a></li> <li class="hoc"><i class="fa fa-desktop">four</i><br><a href="">下载应用</a></li> </ul> </div> <div class="clear"></div> </div> <!-- 网站分类结束 --> </body> </html>