search

博客列表 >优酷导航布局

优酷导航布局

意外的博客
意外的博客原创
2019年04月03日 22:51:07715浏览
<!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>


上一条：优酷顶部导航2019.03.13-20点下一条：html css 仿优酷主页之页面图片布局-2019.3.15
浮动
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多