Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 优酷导航布局
Blogger Information
Blog 38
fans 0
comment 3
visits 43710
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
优酷导航布局
意外的博客
Original
713 people have browsed it
<!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>


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post