Community
Learn
Tools Library
AI Tools
Leisure
search
English

完成高仿爱奇艺首页布局并完成返回顶部和顶部导航固定顶部淡出效果

Original 2019-03-22 00:22:34 386
abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>爱奇艺-在线视频网站-海量正版高清视频在线观看-</title> <link rel="stylesheet" href= 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱奇艺-在线视频网站-海量正版高清视频在线观看-</title>
<link rel="stylesheet" href="./static/css/style.css">
<link rel="stylesheet" type="text/css" href="./static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src = "./static/js/jquery.js"></script>
<script type="text/javascript">
//i banner轮播图显示选中的序号
var i = 0




$(function(){
m_over(i)
//事件区,banner鼠标移上时
$('.banner_menu_li').mouseover(function(){
m_out(i);
i = $('.banner_menu_li').index(this);
m_over(i);
})
//banner鼠标移走时
$('.banner_menu_li').mouseout(function(){
i = $('.banner_menu_li').index(this);
m_out(i);
})

$('.banner_menu').mouseout(function(){
m_over(i);
})

$(window).scroll(function(){
     if($(window).scrollTop()<600){
     $('.return_top').hide();
     $('.header2').hide(); 

     }else{
     $('.return_top').show();
     $('.header').css("pointer:fixed;")
     $('.header2').fadeIn(1000);
     }
     })

     $('.return_top').click(function(){
     $('html ,body').animate({scrollTop: 0}, 300);
     return false;
     })

     $('.header2 span').mousemove(function(){
     $('.menu2').show();
     })

     $('.content').mousemove(function(){
     $('.menu2').hide();
     })

})




//鼠标停留风格

function m_over(i){
$('.banner_menu_li').eq(i).css({"height":"70px","background":"rgba(0,0,0,0.75)"})
$('.banner_menu_li').eq(i).find(".banner_menu_title").css({"color":"#00BE06","font-size":"24px","font-weight":"500"})
$('.banner_menu_li').eq(i).find(".banner_menu_colon").html("<br>")
$('.banner_menu_li').eq(i).find(".banner_menu_item").css("color","#00BE06")

$('.banner').css({"background-image":"url(./static/img/banner"+i+".jpg)"})
}

//鼠标离开后风格
function m_out(i){
$('.banner_menu_li').eq(i).css({"height":"30px","background":"rgba(0,0,0,0)"})
$('.banner_menu_li').eq(i).find(".banner_menu_colon").html(":")
$('.banner_menu_li').eq(i).find(".banner_menu_item").css("color","#ddd")
$('.banner_menu_li').eq(i).find(".banner_menu_title").css({"color":"#ddd","font-size":"15px","height":"30px","line-height":"30px"})
$('banner').css("background","url('./static/img/banner'+i+'.jpg')")

}
</script>

</head>
<body>
<div>
<a href=""><img src="./static/img/logo.png" alt=""></a>
<div>
<input type="text" value="都挺好">
<a href="">搜全网</a>
</div>
<ul>
<li><a href="" style="color:#DAB176"><i class="fa fa-diamond" aria-hidden="true"></i><br>vip</a>
</li>
<li><a href=""><i class="fa fa-cloud-upload" aria-hidden="true"></i><br>上传</a></li>
<li><a href=""><i class="fa fa-download" aria-hidden="true"></i><br>客户端</a></li>
<li><a href=""><i class="fa fa-bell-o" aria-hidden="true"></i><br>消息</a></li>
<li><a href=""><i class="fa fa-refresh" aria-hidden="true"></i><br>看过</a></li>
<li><img src="./static/img/3.png" alt=""></li>

</ul>
</div>


<div>
<a href=""><img src="./static/img/logo.png" alt=""></a>
<span><a href="">导航 <i class="fa fa-chevron-down" aria-hidden="true"></i></a></span>
<div>
<input type="text" value="都挺好">
<a href="">搜全网</a>
</div>
<ul>
<li><a href="" style="color:#DAB176"><i class="fa fa-diamond" aria-hidden="true"></i><br>vip</a>
</li>
<li><a href=""><i class="fa fa-cloud-upload" aria-hidden="true"></i><br>上传</a></li>
<li><a href=""><i class="fa fa-download" aria-hidden="true"></i><br>客户端</a></li>
<li><a href=""><i class="fa fa-bell-o" aria-hidden="true"></i><br>消息</a></li>
<li><a href=""><i class="fa fa-refresh" aria-hidden="true"></i><br>看过</a></li>
<li><img src="./static/img/3.png" alt=""></li>
</ul>

<div>
<div>
<div>
<div>
<div><a href="">娱乐</a></div>
<div><a href="">资讯</a></div>
</div>
<div>
<div><a href="">电影</a></div>
<div><a href="">网络电影</a></div>
</div>
<div>
<div><a href="">电视剧</a></div>
<div><a href="">片花</a></div>
</div>
<div>
<div><a href="">综艺</a></div>
<div><a href="">脱口秀</a></div>
</div>
</div>
<div>
<div>
<div><a href="">动漫</a></div>
<div><a href="">游戏</a></div>
</div>
<div>
<div><a href="">搞笑</a></div>
<div><a href="">旅游</a></div>
</div>
<div>
<div><a href="">音乐</a></div>
<div><a href="">时尚</a></div>
</div>
<div>
<div><a href="">原创</a></div>
<div><a href="">体育</a></div>
</div>
</div>
<div>
<div>
<div><a href="">财经</a></div>
<div><a href="">科技</a></div>
</div>
<div>
<div><a href="">知识</a></div>
<div><a href="">教育</a></div>
</div>
<div>
<div><a href="">儿童</a></div>
<div><a href="">母婴</a></div>
</div>
<div>
<div><a href="">生活</a></div>
<div><a href="">健康</a></div>
</div>
<div>
<div><a href="">军事</a></div>
<div><a href="">汽车</a></div>
</div>
<div>
<div><a href="">公益</a></div>
<div><a href="">纪录片</a></div>
</div>
<div>
<div><a href="">文学</a></div>
<div><a href="">漫画</a></div>
</div>
</div>
<div>
<div>
<div><a href="">热点</a></div>
<div><a href="">风云榜</a></div>
</div>
<div>
<div><a href="">全网影视</a></div>
<div><a href="">应用商店</a></div>
</div>
<div>
<div><a href="">奇秀直播</a></div>
<div><a href="">直播中心</a></div>
</div>
<div>
<div><a href="">商城</a></div>
<div><a href="">VR</a></div>
</div>
<div>
<div><a href="">大头</a></div>
<div><a href="">爱奇艺号</a></div>
</div>
<div>
<div><a href="">泡泡广场</a></div>
<div><a href="">游戏中心</a></div>
</div>
</div>
<div style="border-right: none">
<div>
<a href="" style="color:#DAB176"><i class="fa fa-diamond" aria-hidden="true"></i><br>会员精选</a>
</div>
</div>
<div></div>
</div>
</div>
</div>

<div>
<ul>
<li>
<a href="">
<span>青春的花路</span>
<span>:</span>
<span>王思聪吓坏尤长靖</span>
</a>
</li>

<li>
<a href="">
<span>青春有你</span>
<span>:</span>
<span>62进35残酷升级</span>
</a>
</li>

<li>
<a href="">
<span>王牌4</span>
<span>:</span>
<span>《天龙八部》剧组重聚</span>
</a>
</li>

<li>
<a href="">
<span>声临其境</span>
<span>:</span>
<span>万茜一人分饰八角</span>
</a>
</li>

<li>
<a href="">
<span>北斗星男友</span>
<span>:</span>
<span>徐璐张铭恩异星恋</span>
</a>
</li>

<li>
<a href="">
<span>黄金瞳</span>
<span>:</span>
<span>张艺兴过丛林勇闯雷区</span>
</a>
</li>

<li>
<a href="">
<span>妻子2</span>
<span>:</span>
<span>张嘉倪收获惊喜大礼</span>
</a>
</li>

<li>
<a href="">
<span>回顾</span>
<span>:</span>
<span>李克强总理答中外记者问</span>
</a>
</li>

<li>
<a href="">
<span>最强大脑</span>
<span>:</span>
<span>吴圣洁淘汰戚薇痛哭</span>
</a>
</li>

<li>
<a href="">
<span> 一吻定情</span>
<span>:</span>
<span>少女心疯狂爆炸</span>
</a>
</li>
</ul>
<div>
<div>
<div>
<div>
<div><a href="">娱乐</a></div>
<div><a href="">资讯</a></div>
</div>
<div>
<div><a href="">电影</a></div>
<div><a href="">网络电影</a></div>
</div>
<div>
<div><a href="">电视剧</a></div>
<div><a href="">片花</a></div>
</div>
<div>
<div><a href="">综艺</a></div>
<div><a href="">脱口秀</a></div>
</div>
</div>
<div>
<div>
<div><a href="">动漫</a></div>
<div><a href="">游戏</a></div>
</div>
<div>
<div><a href="">搞笑</a></div>
<div><a href="">旅游</a></div>
</div>
<div>
<div><a href="">音乐</a></div>
<div><a href="">时尚</a></div>
</div>
<div>
<div><a href="">原创</a></div>
<div><a href="">体育</a></div>
</div>
</div>
<div>
<div>
<div><a href="">财经</a></div>
<div><a href="">科技</a></div>
</div>
<div>
<div><a href="">知识</a></div>
<div><a href="">教育</a></div>
</div>
<div>
<div><a href="">儿童</a></div>
<div><a href="">母婴</a></div>
</div>
<div>
<div><a href="">生活</a></div>
<div><a href="">健康</a></div>
</div>
<div>
<div><a href="">军事</a></div>
<div><a href="">汽车</a></div>
</div>
<div>
<div><a href="">公益</a></div>
<div><a href="">纪录片</a></div>
</div>
<div>
<div><a href="">文学</a></div>
<div><a href="">漫画</a></div>
</div>
</div>
<div>
<div>
<div><a href="">热点</a></div>
<div><a href="">风云榜</a></div>
</div>
<div>
<div><a href="">全网影视</a></div>
<div><a href="">应用商店</a></div>
</div>
<div>
<div><a href="">奇秀直播</a></div>
<div><a href="">直播中心</a></div>
</div>
<div>
<div><a href="">商城</a></div>
<div><a href="">VR</a></div>
</div>
<div>
<div><a href="">大头</a></div>
<div><a href="">爱奇艺号</a></div>
</div>
<div>
<div><a href="">泡泡广场</a></div>
<div><a href="">游戏中心</a></div>
</div>
</div>
<div style="border-right: none">
<div>
<a href="" style="color:#DAB176"><i class="fa fa-diamond" aria-hidden="true"></i><br>会员精选</a>
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>

<div>
<a href="">
<h2> <i class="fa fa-file-text-o" aria-hidden="true"></i>今日焦点<span>更多></span></h2></a>
<div>
<div>
<h3><span>NEWS  <i class="fa fa-terminal" aria-hidden="true"></i> </span><a href="">刚果(金)矿场遭袭致两名中国人死亡</a></h3>
<ul>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href=""> “五个一百”，网络空间的中国音</a><span></span><a href="">荷兰枪击案致3死</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">校方回应要求女生发不搭肩:借鉴衡水中学 会继续推行</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href=""> 四川绵竹：年仅33岁！缉毒警察韩顺军突发疾病去世</a></li>
</ul>

<h3><span>NEWS  <i class="fa fa-terminal" aria-hidden="true"></i> </span><a href="">
痛惜!山西乡宁滑坡现场又现3名遗体</a></h3>
<ul>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">盗窃大叔坚持写“从业笔记”</a><span></span><a href="">西安小黄车堆积无人管</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href=""> 新娘出嫁忠犬堵房门</a><span></span><a href="">弟弟寿诞102岁姐姐登门祝贺</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">山西：42人涉黑案件开庭 其中31名被告系聋哑残疾人</a></li>
</ul>
<div>
<a href=""><div><img src="./static/img/content_focus_left 1.jpg" alt=""></div>&nbsp;&nbsp;
美国女子9分钟生6胞胎
</a>
</div>
<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/content_focus_left 2.jpg" alt=""></div>&nbsp;&nbsp;男子赶时间上班强闯地铁</a>
</div>
<div></div>
</div>
<div>
<div>
<img src="./static/img/center_banner1.jpg" alt="">
<div>
<div>
<p><i class="fa fa-dot-circle-o" aria-hidden="true"></i><a href="">
全程回顾：《爱上北斗星男友》粉丝见面会</a></p>
<span>徐璐张铭恩花式互撩</span>
</div>
<div>
<i class="fa fa-caret-left" aria-hidden="true"></i>
<span>1</span>/4
<i class="fa fa-caret-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div>
<ul>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">倪大红是倪萍妹夫？</a><span></span><a href="">郑爽接受采访时大赞男友张恒</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">王源吃棒棒糖童心未泯 </a><span></span><a href=""> 昆凌带小周周儿童乐园玩耍</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">专访《招摇》许凯：墨青一无所有时 招摇就是他的光</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">刘雯麂皮风衣利落出街超A</a><span></span><a href="">乐华Everglow强势出道</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">9.9超值特惠装两条数据线 </a><span></span><a href=""> 解锁雷蛇灵刃N种创意玩法</a></li>
</ul>
</div>
</div>
<div>
<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/focus_right1.jpg" alt=""></div>&nbsp;&nbsp;胡春杨变喜羊羊大笑解尴尬</a>
</div>
<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/focus_right2.jpg" alt=""></div>&nbsp;&nbsp;范丞丞鬼畜歌声逼疯后期</a>
</div>

<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/focus_right3.jpg" alt=""></div>&nbsp;&nbsp;贾玲的情花毒迷晕杨迪</a>
</div>
<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/focus_right4.jpg" alt=""></div>&nbsp;&nbsp;热场女神谢娜即兴尬舞嗨翻</a>
</div>

<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/focus_right5.jpg" alt=""></div>&nbsp;&nbsp;万茜反串为周星驰配音</a>
</div>
<div style="margin-left:10px;">
<a href=""><div><img src="./static/img/focus_right6.png" alt=""></div>&nbsp;&nbsp;《都挺好》背后的家庭问题</a>
</div>
</div>
<div></div>
</div>

<!-- 综艺栏目 -->
<div>
<div>
<div>
<a href="">
<h2> <i class="fa fa-file-video-o" aria-hidden="true"></i>综艺<span>更多></span></h2></a>
</div>
<div>
<a href="">青春有你</a> /
<a href="">青春的花路</a> /
<a href="">小姐姐的花店</a> /
<a href="">国风美少年</a>
</div>
</div>
<div>
<a href="">
<h2>精彩推荐<span>更多></span></h2></a>
</div>
</div><br><br>
<div>
<div>
<div>
<img src="./static/img/content_variety_content_left_img1.jpg" alt="">
</div>
</div>
<p><a href="">妻子的浪漫旅行</a></p>
<span>剧情升级版 谢娜遇火灾抢救钱包</span>
</div>
<div >
<div style="margin-left:15px;">
<a href=""><div><img src="./static/img/content_variety_content_img1.png" alt=""></div>&nbsp;&nbsp;乱世枭雄</a><br>
<span>张学良出生 中华民国成立</span>
</div>

<div style="margin-left:15px;">
<a href=""><div><img src="./static/img/content_variety_content_img2.png" alt=""></div>&nbsp;&nbsp;王牌对王牌x天龙八部</a><br>
<span>宋小宝9.9包邮PK原装段誉</span>
</div>

<div style="margin-left:15px;">
<a href=""><div><img src="./static/img/content_variety_content_img3.png" alt=""></div>&nbsp;&nbsp;声临其境</a><br>
<span>喻恩泰粤语重演张国荣经典</span>
</div>

<div style="margin-left:15px;">
<a href=""><div><img src="./static/img/content_variety_content_img4.png" alt=""></div>&nbsp;&nbsp;坑王驾到.无头案</a><br>
<span>老郭自夸说书评书比相声强</span>
</div>

<div style="margin-left:15px;">
<a href=""><div><img src="./static/img/content_variety_content_img5.png" alt=""></div>&nbsp;&nbsp;遇见你真好</a><br>
<span>纪思清对廖锡荣“冷”眼相待？</span>
</div>

<div style="margin-left:15px;">
<a href=""><div><img src="./static/img/content_variety_content_img6.png" alt=""></div>&nbsp;&nbsp;火星撞地球</a><br>
<span>女友坚持各玩各的 男友心态崩</span>
</div>


</div>
<div >
<div style="margin-left:10px;margin-top:0px;">
<a href=""><div><img src="./static/img/content_variety_content_img7.png" alt=""></div>&nbsp;&nbsp;揭秘吴亦凡蔡徐坤唱作实力</a>
<hr style="margin:10px auto">
<ul>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">青春的花路主题曲MV曝光</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">《青你》烫嘴普通话合辑</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">易烊千玺冰场学习记❤</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">柯蓝曾怒斥求合照粉丝</a></li>
<li><i class="fa fa-caret-right" aria-hidden="true"></i><a href="">张嘉倪甜蜜回顾买超求婚</a></li>
</ul>
</div>

</div>

</div>
<div></div>

<div>
<ul>
<li><i class="fa fa-user-circle" aria-hidden="true"></i></li>
<li><i class="fa fa-comment-o" aria-hidden="true"></i></li>
<li><i class="fa fa-angle-up" aria-hidden="true"></i></li>
</ul>
</div> 

</body>
</html>
*{margin: 0px;
	padding: 0px;
}
li{
	list-style: none;
}
.clear{clear: both;}

.header{background: #232325;
		height: 70px;
		line-height: 70px;
		width: 1370px;
}
.header2{background: #232325;
		height: 70px;
		line-height: 70px;
		width: 1370px;
		position: relative;
		float:left;
		position: fixed;
		top: 0px;
		display: none;	
		z-index: 9;	
}
.header2>span{
	float: left;
}
.header2>span a{
	color: #ccc;
	text-decoration: none;
}

.header2 .menu{
	width: 1300px;
	float: left;
	left: 25px;
	top: 70px;
	
	position: absolute;

}
.header2 .menu_list_vip {
	margin-left: 15px;	
	line-height: 25px;

}

.header2_so{
	float:left;
	margin-top: 15px;
	margin-left: 230px;
}
.header2 .menu_list_vip a{
	font-size: 13px;
	text-align: center;
	text-decoration: none;

}
.header2  a:hover{
	color: #00BE06;
}

.header2 .menu_list_vip a i{
	margin-left:10px;
	font-size: 30px;	
}

.header img,.header2 img{
	height: 50px;
	margin:10px 30px;
	float: left;
}

.header_so{
	float:left;
	margin-top: 15px;
	margin-left: 280px;
}
.header_input,.header2_input{
	float: left;
	height: 30px;
	width: 350px;
	border:none;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	background: #333333;
	color: #999;
	font-size: 17px;
	padding: 5px 0px;
	padding-left: 15px;
	outline:none
}

.header_button,.header2_button{
	float: left;
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background:rgb(0,190,6);
	text-decoration: none;
	display: block;
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
}

.header_menu{
	list-style: none;
	float: right;
	margin-right: 50px;
}

.header2_menu{
	display: none;
}


.header_menu li,.header2_menu_li{
	height: 70px;	
	font-size:18px;
	line-height: 23px;
	float: left;
	color: #999999;
	margin-left: 20px;
	text-align: center;
}

.header_menu li i ,.header2_menu_li i{
	margin-top: 15px;
	font-size: 20px;
}

.header_menu li a ,.header2_menu li a{
	font-size: 10px;
	color: #999999;
	text-decoration: none;
}

.header_menu li a:hover,.header2_menu li a:hover{
	color: #00BE06;
}

.header_menu li img ,.header2_menu li img{
	border-radius: 50px;
	width: 30px;
	height: 30px;
	margin:20px 20px;
	border:solid 2px #999;
}

.banner{
	width:1370px;
	height: 520px;
	background: url('../img/banner1.jpg');
	cursor:pointer;

}
 
.banner_menu{
	float: right;
	margin-right: 50px;
	background: rgba(0,0,0,0.7);
	height: 100%-80px;
	cursor:pointer;	
}
.banner_menu li{
	list-style: none;
	margin-top:10px;	
	height:30px;
	padding: 0px 15px;
	line-height: 30px;
}
.banner_menu li span{
	font-size: 15px;
}

.banner_menu li:hover{
	/*//height: 70px;	*/
	background: rgba(0,0,0,0.75);

}

.banner a{
	text-decoration: none;
	color: #ddd;
}

.menu{
	width: 1370px;
	height: 80px;
	background:rgba(0,0,0,0.8);
	float: left;

}

.menu2{
	width: 1370px;
	height: 80px;
	background:rgba(0,0,0,0.8);
	float: left;
	display: none;
}

.menu_content{
	width:1320px;
	margin:0 auto;
	margin-top: 10px;
}

.menu_list{
	float: left;
	border-right: 1px solid #999;
	padding-right: 15px;
	margin-left:10px;

}
/*占两个字的区域*/
.menu_list_item2{
	width: 28px;	
	
	float: left;
	margin-left: 15px;

}

.menu_list_item3{
	width: 42px;	
	float: left;
	margin-left: 15px;
}

.menu_list_item4{
	width: 56px;	
	float: left;
	margin-left: 15px;
}

.menu_list_item_text{
	line-height: 30px;
}
.menu_list_item_text a{
	font-size: 13px;
	color: #ccc;
	text-decoration: none;	
}

.menu_list_item_text a:hover{
	color: #00BE06;
}

.menu_list_vip {
	margin-left: 15px;	
}

.menu_list_vip a{
	font-size: 13px;
	text-align: center;
}
.menu_list_vip a i{
	margin-left:10px;
	font-size: 30px;
}

.content{
	width: 1270px;
	margin: 0px auto;
	margin-top: 15px;
}
.content a{
	text-decoration: none;	
	color: #222;
}
.content a:hover{
	color: #00BE06;
}

.content_title{
	font-weight:500;
	font-size:27px;
}

.content_title i{
	margin: 0px 5px;
	color:  #00BE06;
}
.content_title2{
	font-size: 15px;
	margin-left: 10px;
}

.content_focus{
	width: 100%;
}
.content_focus_left{
	width: 430px;	
	float: left;
}

.content_focus_left h3{
	margin-top: 15px;	
	text-align: justify;
}

.content_focus_left h3>span{
	font-weight: 300;
	font-size: 14px;
	color: #00BE06;
}

.content_focus_left h3 a{
	font-weight: 500;
}

.content_focus li{
	margin-top: 22px;
	text-align: justify;
}

.content_focus li i{
	color: #00BE06;
	margin-right: 8px;
}

.content_focus li>span{
	border-left: 1px solid #ccc;
	height: 14px;
	margin:-3px 8px;
	display: inline-block;
}

.content_focus_left_img{
 	float: left;
 	margin-top: 15px;
 	height: 150px;
 	background: #F8F8F8;
 	width: 210px;
 	transition: all 0.6s;
 	
}
.content_focus_left_img div{
	width: 210px;
	height: 120px;	
	overflow:hidden
}

.content_focus_left_img img:hover{
	transform: scale(1.1);
}

.content_focus_left_img img{
	width: 210px;
	transition: all 0.6s;
}

.content_focus img:hover{
	transform: scale(1.1);
}
.content_focus_left_img a{
	font-size: 12px;
}

.content_focus_center{
	margin-left: 5px;
	float: left;
	width: 430px;
	height: 500px;
}

.content_focus_center_panner{
	height: 287px;
	width: 420px;
	overflow:hidden;
	position: relative;

}
.content_focus_center_panner img{
	float: left;
	z-index: 0;
	transition: all 0.6s;
}

.content_focus_center_panner_title{
	position: absolute;
	float: left;
	width: 430px;
	height: 60px;
	margin-top: 227px;
	background: rgba(0,0,0,0.7);
	z-index: 9;
}

.center_panner_title_left{
	float: left;
}


.center_panner_title_left p{
	margin-left: 15px;
	margin-top: 5px;
}
.center_panner_title_left i{
	color: #00BE06;
}
.center_panner_title_left a{
	color: #f8f8f8;
	font-size: 13px;
}

.center_panner_title_left span{
	color: #ccc;
	font-size: 12px;
	margin-left: 33px;
}

.center_panner_title_rigth{
	float: right;
	color: #ccc;
	font-size: 9px;
	margin-top: 30px;
	margin-right: 8px;
}
.center_panner_title_rigth i{
	color: #ccc;
	cursor: pointer;
	font-size: 16px;
	margin: 0px 10px;
}

.content_focus_center_panner_bottom{
	width: 430px;
}

.content_focus_center_panner_bottom i{
	margin-left: 10px;
}

.content_focus_right{
	float:left;
	width: 405px;
}
.content_focus_right_img{
	width:180px;
	float:left;
	overflow:hidden;
	margin-bottom: 25px;
}

.content_focus_right_img a{
	font-size: 12px;
}

.content_focus_right_img img{
	transition: all 0.6s;
}

.content_focus_right_img img:hover{
	transform: scale(1.1);
}	


.content_variety_left{
	float:left;
	height: 30px;
	line-height: 30px;
}
.content_variety_left p{
	float:left;
}

.content_variety_left_title{
	float:left;
	display: inline-block;
	
}

.content_variety_left_title_link{
	float: left;
	margin-top: 5px;
	font-size: 13px;
	margin-left: 20px;
	color: #00BE06;
}

.content_variety_right{
	float:right;
	margin-right: 10px;	
}

.content_variety_content_left{
	width: 425px;
	height: 360px;	
	float: left;
}
.content_variety_content_left a{
	margin-left: 10px;
}
.content_variety_content_left_img div{
	overflow: hidden;
}

.content_variety_content_left_img img{
	transition: all 0.6s;
}

.content_variety_content_left_img img:hover{
	transform: scale(1.05);
}

.content_variety_content_left span{
	color: #999;
	font-size: 13px;
	margin-left: 10px;
}

.content_variety_content_center{
	width: 605px;
	height: 363px;	
	margin-left: 5px;
	float: left;
}
.content_variety_content_center a{
	font-size: 15px;
}
.content_variety_content_center span{
	margin-left: 10px;
	color: #999;
	font-size: 12px;
}

.content_variety_content_right{
	width: 220px;
	height: 363px;
	margin-left: 5px;
	float: left;
	background: #F8F8F8;
}

.content_variety_content_right a{
	font-size: 15px;
}

.content_variety_content_right ul{

}
.content_variety_content_right li{
	margin: 20px auto;
}
.content_variety_content_right i{
	color: #00BE06;
	margin-right: 10px;
}

.float_menu{
	width:30px;
	height: 150px;
	font-size: 23px;
	position: fixed;
	bottom: 10px;
	right: 50px;
}
.float_menu i{
	font-weight: 100;
	background: #E6E6E6;
	border-radius: 50px;
	width:40px;
	height: 40px;
	text-align: center;
	line-height:40px;
	cursor: pointer;
	margin-top: 10px;
	color: #00BE06;
}

.return_top{
	display: none;
}

FastStoneEditor1.jpg

FastStoneEditor2.jpg




20190322001034.jpg


经过这一章节案例。对前面学到的html css jq等等进行了综合运用。往后的几个作业案例自我感觉对前端知识已经掌握得比较熟练。往后再继续学习前端布局，争取做到能胜任前端工作岗位

Correcting teacher：灭绝师太Correction time：2019-03-22 09:19:25
Teacher's summary：完成的非常好,学以致用很重要,继续保持这分用心!

Release Notes

Popular Entries