这是仿百度登录后的静态页面，其中有些功能还不完善，但是我会尽量去完善他们，在这个页面里面有很多相对我来说比较难的地方，比如其中的“更多产品”，“设置”，“换肤功能”，“我的关注，推荐，导航”选项卡之间的切换等等功能，其他还有一些难点，我就不一一介绍了，下面我直接贴代码：
这是HTML+JavaScript+部分CSS代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/icon.jpg" type="image/x-icon" />
<title>百度一下，你就知道</title>
<link rel="stylesheet" href="css/Baidu.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.my_attention {
position: relative;
top: 8px;
width: 20px;
height: 18px;
background: url(img/icon.png) no-repeat -46px -55px;
}
.setting {
width: 20px;
height: 29px;
line-height: 29px;
}
.my_set {
width: 20px;
height: 29px;
line-height: 29px;
position: relative;
left: 869px;
background: url(img/icon.png) no-repeat -120px -43px;
cursor: pointer;
}
.my_set:hover {
width: 20px;
height: 29px;
line-height: 29px;
background: url(img/icon.png) no-repeat -120px -67px;
}
.att_img {
display: inline-block;
width: 341px;
height: 40px;
background: url(img/all_blank_07895b96.png) no-repeat;
}
.sign {
width: 20px;
height: 20px;
background: url(img/news_88aeb6fe.png) no-repeat -43px 4px;
float: left;
margin-left: 10px;
}
.img_refresh {
width: 22px;
height: 16px;
display: inline-block;
vertical-align: middle;
background: url(img/news_88aeb6fe.png) no-repeat -22px -24px;
}
.new_refresh:hover>.img_refresh {
width: 22px;
height: 16px;
display: inline-block;
vertical-align: middle;
background: url(img/news_88aeb6fe.png) no-repeat -22px -41px;
}
.img_news {
position: relative;
top: -25px;
left: 116px;
width: 20px;
height: 16px;
background: url(img/news_88aeb6fe.png) no-repeat -56px -100px;
}
.cr_img {
width: 16px;
height: 16px;
overflow: hidden;
display: inline-block;
position: relative;
top: 3px;
background: url(img/icons_5859e57.png) no-repeat -600px -96px;
}
.cr_img2 {
position: relative;
top: 4px;
width: 16px;
height: 16px;
overflow: hidden;
display: inline-block;
background: url(img/icons_5859e57.png) no-repeat -623px -96px;
}
.mySet_detail {
width: 900px;
height: 0px;
background: #FFFFFF;
z-index: 99999;
position: absolute;
overflow: hidden;
}
/*已订阅*/
.ydy {
width: 848px;
padding: 22px 25px 0 25px;
text-align: left;
}
.ydy_detail {
height: 125px;
border-bottom: 1px solid #F0F0F0;
}
.ydy_detail_left {
width: 420px;
float: left;
height: 125px;
}
.ydy_detail_left h3 {
font-size: 12px;
color: #666;
font-weight: normal;
text-indent: 2px;
}
.myAtt {
width: 78px;
text-align: center;
margin-top: 18px;
border: 1px solid #cdcdcd;
height: 24px;
line-height: 24px;
font-size: 13px;
color: #666666;
}
.pinDao_1 {
height: 90px;
position: relative;
top: -26px;
left: 88px;
}
.pinDao {
display: inline-block;
position: relative;
top: -17px;
}
.pinDao2 {
display: inline-block;
position: relative;
left: 65px;
top: -17px;
}
.pinDao3 {
display: inline-block;
position: relative;
left: 130px;
top: -17px;
}
.pinDao:hover>.pindao_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: -7px;
left: 2px;
background: url(img/card_setting_c0307230.png) no-repeat -21px -25px;
z-index: 50;
}
.pinDao:hover>.pindao_title {
border: 1px dashed #3388ff;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #CDCDCD;
background: #FFFFFF;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
cursor: pointer;
}
.pinDao2:hover>.pindao_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: -7px;
left: 2px;
background: url(img/card_setting_c0307230.png) no-repeat -21px -25px;
z-index: 50;
}
.pinDao2:hover>.pindao_title {
border: 1px dashed #3388ff;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #CDCDCD;
background: #FFFFFF;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
cursor: pointer;
}
.pinDao3:hover>.pindao_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: -7px;
left: 2px;
background: url(img/card_setting_c0307230.png) no-repeat -21px -25px;
z-index: 50;
}
.pinDao3:hover>.pindao_title {
border: 1px dashed #3388ff;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #CDCDCD;
background: #FFFFFF;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
cursor: pointer;
}
.pindao_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: -7px;
left: 2px;
background: url(img/card_setting_c0307230.png) no-repeat -40px -25px;
z-index: 50;
}
.pindao_title {
border: 1px dashed #CDCDCD;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #222;
background: #FFFFFF;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
}
.ydy_detail_right {
width: 420px;
float: right;
height: 125px;
}
.ydy_detail_right h3 {
font-size: 12px;
color: #666;
font-weight: normal;
text-indent: 2px;
}
.pinDao_2 {
height: 90px;
position: relative;
top: 13px;
left: -5px;
}
.TY {
display: inline-block;
position: relative;
top: -13px;
cursor: pointer;
/*border: 1px solid #CCCCCC;
width: 53px;
height: 24px;
line-height: 24px;
text-align: center;*/
}
.TY_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: 6px;
left: 16px;
background: url(img/card_setting_c0307230.png) no-repeat -55px -25px;
z-index: 50;
}
.TY_title {
border: 1px solid #CCCCCC;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #222;
background: #FFFFFF;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
padding-left: 10px;
}
.TY:hover>.TY_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: 6px;
left: 16px;
background: url(img/card_setting_c0307230.png) no-repeat -70px -25px;
z-index: 50;
}
.TY:hover>.TY_title {
border: 1px solid #CCCCCC;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #FFFFFF;
background: #38f;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
padding-left: 10px;
}
.XS {
display: inline-block;
position: relative;
top: -13px;
left: 75px;
cursor: pointer;
}
.XS_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: 6px;
left: 16px;
background: url(img/card_setting_c0307230.png) no-repeat -55px -25px;
z-index: 50;
}
.XS_title {
border: 1px solid #CCCCCC;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #222;
background: #FFFFFF;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
padding-left: 10px;
}
.XS:hover>.XS_icon {
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: 6px;
left: 16px;
background: url(img/card_setting_c0307230.png) no-repeat -70px -25px;
z-index: 50;
}
.XS:hover>.XS_title {
border: 1px solid #CCCCCC;
width: 53px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #FFFFFF;
background: #38f;
text-align: center;
position: absolute;
top: 0px;
left: 9px;
padding-left: 10px;
}
.brc {
height: 40px;
}
.what_icon {
width: 17px;
height: 17px;
position: relative;
display: inline-block;
left: 833px;
bottom: -9px;
background: url(img/card_setting_c0307230.png) no-repeat -147px -22px;
}
.hide-mods {
float: right;
margin-right: 21px;
margin-top: 11px;
color: #222222;
font-size: 13px;
line-height: 15px;
}
.choice-border {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #666666;
margin-right: 4px;
font-size: 0;
line-height: 0;
position: relative;
top: -4px;
cursor: pointer;
}
input[type='checkbox'] {
width: 12px;
height: 12px;
vertical-align: middle;
opacity: 0;
}
.checkbox_bg_check {
background: url(img/card_setting_c0307230.png) no-repeat -70px 0px;
}
.bg {
position: relative;
top: 3px;
width: 14px;
height: 14px;
display: inline-block;
background: url(img/card_setting_c0307230.png) no-repeat -128px -25px;
margin-right: 5px;
}
/*换肤*/
.skin {
width: 100%;
height: 0px;
position: fixed;
background: #FFFFFF;
overflow: hidden;
top: 0;
left: 0;
z-index: 30;
}
.skin_head {
height: 45px;
border-bottom: 1px solid #e3e3e3;
}
.skin_head_content {
width: 911px;
height: 45px;
margin: auto auto;
}
.content {
width: 911px;
height: 225px;
margin: auto auto;
}
.choose-nav {
background: #389cff;
color: #ffffff;
}
.skin_head_content ul li {
float: left;
height: 45px;
font-size: 13px;
padding: 0 8px !important;
cursor: pointer;
}
.skin_head_content ul li.head_title:hover {
background: #389cff;
transition: all 0.4s ease-in-out 0s;
color: #ffffff;
}
.skin_head_content ul li span {
display: inline-block;
margin-top: 19px;
}
.part {
width: 1px;
height: 15px;
background: #E3E3E3;
}
/*背景透明度*/
.skin_set {
float: right;
margin-top: 19px;
display: inline-flex;
}
.alphaBarTitle {
font-size: 13px;
position: relative;
top: -8px;
left: 30px;
}
#percent {
width: 10px;
height: 10px;
display: inline-block;
line-height: 10px;
position: relative;
top: -23px;
left: 70px;
font-size: 12px;
}
.percent_bfb {
width: 10px;
height: 10px;
display: inline-block;
font-size: 12px;
position: relative;
top: -23px;
left: 71px;
}
input[type="range"]::-webkit-slider-thumb {
cursor: pointer;
width: 15px;
height: 15px;
background: #fff0;
top: -105px;
display: inline-block;
}
.no_use {
margin-left: 7px;
cursor: pointer;
}
.no_use:hover>.cahao {
width: 13px;
height: 13px;
display: inline-block;
background: url(img/HF/skin_icon_82b6ef5b.png) no-repeat -23px -191px;
}
.no_use:hover>.no_use_a {
font-size: 12px;
color: #389CFF;
display: inline-block;
}
.cahao {
width: 13px;
height: 13px;
display: inline-block;
background: url(img/HF/skin_icon_82b6ef5b.png) no-repeat -23px -175px;
}
.no_use_a {
font-size: 12px;
color: #666;
display: inline-block;
}
.put_away {
width: 45px;
margin-left: 25px;
float: left;
}
.put {
width: 13px;
height: 13px;
display: inline-block;
background: url(img/HF/skin_icon_82b6ef5b.png) no-repeat -42px -175px;
}
.away {
font-size: 12px;
color: #0079f5;
cursor: pointer;
}
.content img {
width: 97px;
height: 59px;
display: block;
float: left;
margin-right: 1px;
margin-bottom: 1px;
}
.content .big {
width: 195px;
height: 119px;
}
.content .last {
position: relative;
top: 0px;
right: 196px;
}
.img_bg {
background: url(img/HF/bg0.jpg);
background-size: 294px;
float: right;
position: relative;
top: -222px;
left: -255px;
width: 264px;
height: 180px;
}
.img_right {
width: 266px;
height: 182px;
display: inline-block;
background: url(img/HF/skin_preview_05c7c9e3.png) no-repeat 0px 0px;
}
.camera_detail {
width: 641px;
height: 0px;
line-height: 211px;
background: #FFFFFF;
position: absolute;
left: 371px;
overflow: hidden;
z-index: 10;
}
.camera_detail_content {
padding: 23px 20px 27px;
width: 600px;
height: 160px;
}
.addImg {
text-align: center;
padding-top: 25px;
height: 75px;
margin-bottom: 15px;
background-color: #fafafa;
}
.addImg_tip {
font-size: 16px;
color: #999;
position: relative;
top: -98px;
left: 13px;
}
.addImg_icon {
background: url(img/soutu_icons_sample_e128610.png) no-repeat -70px -2px;
width: 28px;
height: 28px;
display: inline-block;
position: relative;
top: -54px;
left: -60px;
}
.upload {
width: 158px;
height: 43px;
line-height: 43px;
margin: 0 auto;
color: #333;
font-size: 16px;
border: 1px solid #cacbcc;
text-align: center;
cursor: pointer;
}
.upload:hover {
width: 158px;
height: 43px;
line-height: 43px;
margin: 0 auto;
color: #333;
font-size: 16px;
border: 1px solid #38f;
text-align: center;
}
.upload_icon {
width: 18px;
height: 18px;
background: url(img/soutu_icons_sample_e128610.png) no-repeat -144px -1px;
display: inline-block;
position: relative;
top: 5px;
}
.close {
width: 18px;
height: 18px;
display: inline-block;
background: url(img/soutu_icons_sample_e128610.png) no-repeat -20px 2px;
position: absolute;
left: 602px;
cursor: pointer;
}
.close:hover {
width: 18px;
height: 18px;
display: inline-block;
background: url(img/soutu_icons_sample_e128610.png) no-repeat -197px 1px;
position: absolute;
left: 602px;
}
.btn_input_camera {
position: relative;
width: 104px;
margin-left: -8px!important;
font-size: 16px;
padding: 13px;
display: none;
float: right;
right: 251px;
top: -48px;
}
.btn_input_icon {
float: right;
position: relative;
right: 330px;
top: -33px;
width: 26px;
height: 22px;
display: inline-block;
background: url(img/camera.png) no-repeat 2px 3px;
z-index: 5;
cursor: pointer;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var topMain = $("#header").height() + 20 //是头部的高度加头部与nav导航之间的距离
var nav = $(".searchBox");
$(window).scroll(function() {
if($(window).scrollTop() > topMain) { //如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除
nav.addClass("nav_scroll");
} else {
nav.removeClass("nav_scroll");
}
});
})
</script>
</head>
<body>
<div class="header" id="header">
<a target="_blank">
<div class="FZTQ">
<span>
<em class="FZ">福州：</em>
</span>
<span>
<img src="img/a1.png" />
<em class="text">35℃</em>
</span>
<span>
<em class="TQTX"><b>优</b></em>
<em class="TQZS">25</em>
</span>
<span class="SX">
|
</span>
</div>
</a>
<div class="HFXX">
<a class="HF" title="换肤">换肤</a>
<a class="XX" title="消息">消息</a>
</div>
</div>
<!--换肤-->
<div class="skin">
<div class="skin_head">
<div class="skin_head_content">
<ul class="head_ul">
<li class="head_title choose-nav">
<span>热门</span>
</li>
<li class="head_title">
<span>游戏</span>
</li>
<li class="head_title">
<span>卡通</span>
</li>
<li class="head_title">
<span>女神降临</span>
</li>
<li class="head_title">
<span>明星</span>
</li>
<li class="head_title">
<span>风景</span>
</li>
<li class="head_title">
<span>简约</span>
</li>
<li class="head_title">
<span>小清新</span>
</li>
<li class="head_title_part">
<span class="part"></span>
</li>
<li class="head_title">
<span>自定义</span>
</li>
<li class="head_title">
<span>最近使用</span>
</li>
</ul>
<div class="skin_set">
<div class="skin_opacity_set">
<span class="alphaBarTitle">背景透明度</span>
<span class="bg_alphaBarTitle">
<span id="percent"></span>
<span class="percent_bfb">%</span>
<input id="percent_move" oninput="change()" type="range" min="0" max="100" step="1" value="20" data-rangeslider>
</span>
</div>
<div class="no_use">
<span class="cahao"></span>
<span class="no_use_a">不使用皮肤</span>
</div>
<div class="put_away">
<span class="put"></span>
<span class="away">收起</span>
</div>
</div>
</div>
</div>
<div class="bkg">
<div class="content">
<img class="big" src="img/HF/bg0s.jpg">
<img src="img/HF/bg1s.jpg">
<img src="img/HF/bg2s.jpg">
<img src="img/HF/bg3s.jpg">
<img src="img/HF/bg4s.jpg">
<img src="img/HF/bg5s.jpg" style="position: relative;top: 60px;right: 392px;">
<img class="big" src="img/HF/bg6s.jpg" style="position: relative;top: 60px;right: 392px;">
<img src="img/HF/bg7s.jpg" style="position: relative;top: -60px;left: 490px;">
<img src="img/HF/bg8s.jpg" style="position: relative;top: 0px;left: 392px;">
<img class="last" src="img/HF/bg9s.jpg">
<img class="last" src="img/HF/bg10s.jpg">
<img class="last" src="img/HF/bg11s.jpg">
</div>
<div class="img_bg">
<span class="img_right"></span>
</div>
</div>
</div>
<div class="right">
<a href="#" target="_blank" class="lanmu">学术</a>
<a href="#" target="_blank" class="lanmu">新闻</a>
<a href="#" target="_blank" class="lanmu">hao123</a>
<a href="#" target="_blank" class="lanmu">地图</a>
<a href="#" target="_blank" class="lanmu">视频</a>
<a href="#" target="_blank" class="lanmu">贴吧</a>
<a href="#" target="_blank" class="my">梦囬旧景</a>
<div class="self">
<a href="#" target="_blank">个人中心</a>
<a href="#" target="_blank">账号设置</a>
<a href="*" target="_blank">意见反馈</a>
<a href="*" target="_blank">退出</a>
</div>
<a href="javascript:;" class="set">设置</a>
<div class="set_detail">
<a href="http://www.baidu.com/gaoji/preferences.html" target="_blank">搜索设置</a>
<a href="http://www.baidu.com/gaoji/advanced.html" target="_blank">高级搜索</a>
<a href="*">关闭预测</a>
<a href="http://i.baidu.com/my/history?from=index" target="_blank">搜索历史</a>
</div>
</div>
<a class="more">更多产品</a>
<div class="more_item2">
<li>
<div class="more_item3">
<a>更多产品</a>
</div>
</li>
<li>
<div style="width: 50px; height: 1px;margin-left:10px;background: #f0f0f0;"></div>
</li>
<li>
<div class="more_item">
<a href="#"><img src="img/nuo.png" />糯米</a>
</div>
</li>
<li>
<div class="more_item">
<a href="#"><img src="img/yinyue.png" />音乐</a>
</div>
</li>
<li>
<div class="more_item">
<a href="#"><img src="img/tupian.png" />图片</a>
</div>
</li>
<li>
<div class="more_item">
<a href="#"><img src="img/zhidao.png" />知道</a>
</div>
</li>
<li>
<div class="more_item">
<a href="#"><img src="img/wenku.png" />文库</a>
</div>
</li>
<li>
<div class="more_item">
<a href="#"><img src="img/fengyunbang.png" />风云榜</a>
</div>
</li>
<li>
<div class="more_item_all">
<a href="#">全部产品>></a>
</div>
</li>
</div>
<div class="Logo">
<img src="img/logo_white_fe6da1ec.png" width="270" height="129" />
</div>
<div class="searchBox">
<span class="logo"><img src="img/logo.png"/></span>
<span class="camera"></span>
<input class="input_seach" maxlength="100" autocomplete="off" />
<span class="btn"><input class="btn_input" type="submit" value="百度一下"/></span>
<div class="camera_detail">
<div class="camera_detail_content">
<div class="addImg">
<span class="addImg_tip">拖拽图片到这里</span>
<i class="addImg_icon"></i>
</div>
<div class="upload">
<i class="upload_icon"></i>
<span class="upload_text">本地上传图片</span>
</div>
<a class="close"></a>
</div>
</div>
</div>
<div class="clear"></div>
<div class="tab">
<ul class="tab_ul">
<li class="myAtten hit">
<div class="atten">
<div class="my_attention"></div>
<div class="attention">我的关注</div>
</div>
</li>
<li class="Recommend">推荐</li>
<li class="Navigation">导航</li>
<li class="setting" style="float: right;border-left: 1px #d8d6d6 solid;">
</li>
<div class="my_set"></div>
</ul>
<div class="mySet_detail">
<div class="ydy">
<div class="ydy_detail">
<!--左边的-->
<div class="ydy_detail_left">
<h3>已订阅频道</h3>
<div class="myAtt">我的关注</div>
<div class="pinDao_1">
<div class="pinDao">
<div class="pindao_icon"></div>
<div class="pindao_title">音乐</div>
</div>
<div class="pinDao2">
<div class="pindao_icon"></div>
<div class="pindao_title">音乐</div>
</div>
<div class="pinDao3">
<div class="pindao_icon"></div>
<div class="pindao_title">音乐</div>
</div>
</div>
</div>
<!--右边的-->
<div class="ydy_detail_right">
<h3>未订阅频道</h3>
<div class="pinDao_2">
<div class="TY">
<div class="TY_icon"></div>
<div class="TY_title">体育</div>
</div>
<div class="XS">
<div class="XS_icon"></div>
<div class="XS_title">小说</div>
</div>
</div>
</div>
</div>
<!--右下角-->
<div class="brc">
<div style="height: 40px;">
<span class="what_icon"></span>
<a href="#" class="hide-mods" hidefocus="">
<span class="choice-border" id="conRecommend_mod" data-attr="conRecommendTip"><input type="checkbox"/></span>
<span>情景推荐</span>
</a>
<a href="#" class="hide-mods" hidefocus="">
<span class="bg"></span>
<span>隐藏频道</span>
</a>
</div>
</div>
</div>
</div>
<div class="panes">
<div class="my_att">
<span class="att_img"></span>
<span class="add">添加</span>
</div>
<!--
作者：925655742@qq.com
时间：2017-09-13
描述：左边部分
-->
<div class="recommend_detail">
<div class="recom">
<div class="recom_line"></div>
<div class="recom_tip">
<div class="sign"></div>
<span>以下信息根据您的兴趣推荐</span>
</div>
<div class="recom_line2"></div>
</div>
<div class="message">
<h2><a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧">老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧</a></h2>
<ul>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧"><img src="img/1.JPG" height="119" width="179" /></a>
</li>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧"><img src="img/2.JPG" height="119" width="179" /></a>
</li>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧"><img src="img/3.JPG" height="119" width="179" /></a>
</li>
</ul>
<div class="src">
<span class="news"><a href="http://news.163.com" target="_blank">网易新闻</a></span>
<span class="time">09-12 03:20</span>
<span class="hot_point">热点</span>
</div>
</div>
<div style="border-bottom: 1px solid #F9F2F4;width: 540px;margin-left: 25px;"></div>
<div class="message2">
<ul>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=5576265825243655301&n_type=0&p_from=1&dtype=-1" target="_blank" alt="9岁女孩”照老师教的“火海逃生 父亲选择跳窗身亡" title="9岁女孩”照老师教的 “火海逃生 父亲选择跳窗身亡"><img src="img/4.JPG" height="119" width="179" /></a>
</li>
</ul>
<h2><a href="http://www.baidu.com/home/news/data/newspage?nid=5576265825243655301&n_type=0&p_from=1&dtype=-1" target="_blank" alt="9岁女孩“照老师教的”火海逃生 父亲选择跳窗身亡" title="9岁女孩“照老师教的”火海逃生 父亲选择跳窗身亡">9岁女孩"照老师教的"火海逃生 父亲选择跳窗身亡</a></h2>
<div class="src">
<span class="news"><a href="http://news.163.com" target="_blank">网易国内</a></span>
<span class="time">09-12 03:20</span>
<span class="hot_point">热点</span>
</div>
</div>
<div style="border-bottom: 1px solid #F9F2F4;width: 540px;margin-left: 25px;"></div>
<div class="message3">
<h2><a href="http://www.baidu.com/home/news/data/newspage?nid=7042724138812535881&n_type=0&p_from=1&dtype=-1" target="_blank" alt="天舟一号完成自主快速交会对接试验:历时6.5小时" title="天舟一号完成自主快速交会对接试验:历时6.5小时">天舟一号完成自主快速交会对接试验:历时6.5小时</a></h2>
<div class="src">
<span class="news"><a href="http://news.163.com" target="_blank">网易国内</a></span>
<span class="time">09-12 03:20</span>
<span class="hot_point">热点</span>
</div>
</div>
<div style="border-bottom: 1px solid #F9F2F4;width: 540px;margin-left: 25px;"></div>
<div class="message">
<h2><a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧">老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧</a></h2>
<ul>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧"><img src="img/1.JPG" height="119" width="179" /></a>
</li>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧"><img src="img/2.JPG" height="119" width="179" /></a>
</li>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=6163555740923050200&n_type=0&p_from=1&dtype=-1" target="_blank" alt="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧" title="老人怀疑儿子吸毒硬拉他做尿检:坐牢也不要紧"><img src="img/3.JPG" height="119" width="179" /></a>
</li>
</ul>
<div class="src">
<span class="news"><a href="http://news.163.com" target="_blank">网易新闻</a></span>
<span class="time">09-12 03:20</span>
<span class="hot_point">热点</span>
</div>
</div>
<div style="border-bottom: 1px solid #F9F2F4;width: 540px;margin-left: 25px;"></div>
<div class="message2">
<ul>
<li>
<a href="http://www.baidu.com/home/news/data/newspage?nid=5576265825243655301&n_type=0&p_from=1&dtype=-1" target="_blank" alt="9岁女孩" 照老师教的 "火海逃生 父亲选择跳窗身亡" title="9岁女孩" 照老师教的 "火海逃生 父亲选择跳窗身亡"><img src="img/4.JPG" height="119" width="179" /></a>
</li>
</ul>
<h2><a href="http://www.baidu.com/home/news/data/newspage?nid=5576265825243655301&n_type=0&p_from=1&dtype=-1" target="_blank" alt="9岁女孩"照老师教的"火海逃生 父亲选择跳窗身亡" title="9岁女孩"照老师教的"火海逃生 父亲选择跳窗身亡">9岁女孩"照老师教的"火海逃生 父亲选择跳窗身亡</a></h2>
<div class="src">
<span class="news"><a href="http://news.163.com" target="_blank">网易国内</a></span>
<span class="time">09-12 03:20</span>
<span class="hot_point">热点</span>
</div>
</div>
<div style="border-bottom: 1px solid #F9F2F4;width: 540px;margin-left: 25px;"></div>
<div class="message3">
<h2><a href="http://www.baidu.com/home/news/data/newspage?nid=7042724138812535881&n_type=0&p_from=1&dtype=-1" target="_blank" alt="天舟一号完成自主快速交会对接试验:历时6.5小时" title="天舟一号完成自主快速交会对接试验:历时6.5小时">天舟一号完成自主快速交会对接试验:历时6.5小时</a></h2>
<div class="src">
<span class="news"><a href="http://news.163.com" target="_blank">网易国内</a></span>
<span class="time">09-12 03:20</span>
<span class="hot_point">热点</span>
</div>
</div>
<div style="border-bottom: 1px solid #F9F2F4;width: 540px;margin-left: 25px;"></div>
<!--
作者：925655742@qq.com
时间：2017-09-13
描述：右边部分
-->
<div class="recom_right">
<div class="refresh">
<div class="title_text">
<a href="http://top.baidu.com/?fr=mhd_card" target="_blank">实时热点</a>
</div>
<div class="new_refresh">
<div class="img_refresh"></div>
<span class="text_refresh">换一换</span>
</div>
</div>
<ul id="news_content">
<li id="news_item_artist" data-index="0">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BD%91%E7%BA%A2%E6%9B%9D%E8%A2%AB%E8%96%9B%E4%B9%8B%E8%B0%A6%E9%AA%97&rsv_idx=2" target="_blank">网红曝被薛之谦骗</a>
<div class="img_news"></div>
</span>
</span>
</li>
<li id="news_item_artist" data-index="1">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BD%91%E7%BA%A2%E6%9B%9D%E8%A2%AB%E8%96%9B%E4%B9%8B%E8%B0%A6%E9%AA%97&rsv_idx=2" target="_blank">网红曝被薛之谦骗</a>
<div class="img_news"></div>
</span>
</span>
</li>
<li id="news_item_artist" data-index="2">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%8C%97%E4%BA%AC%E5%9F%8E%E5%B8%82%E6%80%BB%E4%BD%93%E8%A7%84%E5%88%92&rsv_idx=2" target="_blank">北京城市总体规划</a>
<div class="img_news"></div>
</span>
</span>
</li>
<li id="news_item_artist" data-index="3">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%8A%A2%E6%95%91%E6%82%A3%E8%80%85%E5%8F%8D%E9%81%AD%E7%B4%A2%E8%B5%94&rsv_idx=2" target="_blank">抢救患者反遭索赔</a>
<div class="img_news"></div>
</span>
</span>
</li>
<li id="news_item_artist" data-index="4">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%A7%9F%E6%88%BF%E9%82%BB%E5%B1%85%E6%AD%BB%E5%9C%A8%E5%B1%8B%E5%86%85&rsv_idx=2" target="_blank">租房邻居死在屋内</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="5">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%8D%96%E8%A5%BF%E7%BA%A2%E6%9F%BF%E4%B9%B03%E5%A5%97%E6%88%BF&rsv_idx=2" target="_blank">卖西红柿买3套房</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="6">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%B8%AD%E5%9B%BD%E6%96%B0%E6%AD%8C%E5%A3%B0%E5%BC%95%E5%86%B2%E7%AA%81&rsv_idx=2" target="_blank">中国新歌声引冲突</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="7">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%A2%81%E9%9A%86%E5%B9%B3%E5%AE%A3%E5%B8%83%E6%88%90%E6%9E%9C&rsv_idx=2" target="_blank">袁隆平宣布成果</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="8">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%89%8B%E6%9C%BA%E6%8E%89%E5%85%B5%E9%A9%AC%E4%BF%91%E5%9C%9F%E5%9D%91&rsv_idx=2" target="_blank">手机掉兵马俑土坑</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="9">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BE%8E%E5%9B%BD%E5%9B%9B%E5%B7%9D%E8%BE%A3%E9%85%B1&rsv_idx=2" target="_blank">美国四川辣酱</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="10">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=baby%E6%8A%B1%E5%A8%83%E7%8E%B0%E6%9C%BA%E5%9C%BA&rsv_idx=2" target="_blank">baby抱娃现机场</a>
</span>
</span>
</li>
<li id="news_item_artist" data-index="11">
<span class="news_title">
<span>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%B5%B5%E8%96%87%E9%9D%92%E6%B6%A9%E5%AD%A6%E7%94%9F%E7%85%A7&rsv_idx=2" target="_blank">赵薇青涩学生照</a>
</span>
</span>
</li>
</ul>
</div>
</div>
<!--导航-->
<div class="navigation">
<div class="nav_like">
<h1>猜你喜欢</h1>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
</div>
<div class="nav_like">
<h1>猜你喜欢</h1>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
</div>
<div class="nav_like">
<h1>猜你喜欢</h1>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
</div>
<div class="nav_like">
<h1>猜你喜欢</h1>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
<div class="bdnm">
<a href="http://www.nuomi.com/?vip_frm=super_nav_vip" title="百度糯米" target="_blank">
<img src="img/9483.png" />
<span class="bdnm_txt">百度糯米</span>
</a>
</div>
</div>
</div>
<!--<div class="recom">
<div class="recom_line"></div>
<div class="recom_tip"></div>
<div class="recom_line2"></div>
</div>-->
</div>
</div>
<div style="margin-bottom: 10px;">
<div class="set_home">
<p class="set_home_a">
<a href="//www.baidu.com/cache/sethelp/index.html" target="_blank"> 设为首页 </a>
</p>
<span class="copyright">
<span>©2017 Baidu </span>
<a href="//www.baidu.com/duty/" target="_blank">使用百度前必读</a>
<a href="http://jianyi.baidu.com" target="_blank">意见反馈</a>
<span>京ICP证030173号 </span>
<span class="cr_img"></span>
</span>
</div>
<div class="set_home2">
<span class="cr_img2"></span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
</div>
</div>
<script>
//更多产品
$(function() {
$(".more_item2").hide();
$(".more").hover(
function() {
$(".more_item2").show();
},
function() {
$(".more_item2").hide();
}
)
$(".more_item2").hover(
function() {
$(".more_item2").show();
},
function() {
$(".more_item2").hide();
}
)
})
//个人中心
$('.my,.self').hover(function() {
$('.self').stop(true, true).fadeIn(100);
}, function() {
$('.self').stop(true, true).delay(100).fadeOut(100);
});
//设置
$('.set,.set_detail').hover(function() {
$('.set_detail').stop(true, true).fadeIn(100);
}, function() {
$('.set_detail').stop(true, true).delay(100).fadeOut(100);
});
//选项卡切换
$(function() {
$('.tab_ul li').click(function() {
$(this).addClass('hit').siblings().removeClass('hit');
$('.panes>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
})
$(function() {
$('.head_title').click(function() {
$(this).addClass('choose-nav').siblings().removeClass('choose-nav');
$('.head_title').css.background = "#389cff;";
})
})
//换肤
$('.HF').click(function() {
$('.skin').animate({
height: "272px"
}, 500);
});
$('.put_away').click(function() {
$('.skin').animate({
height: "0px"
}, 500);
});
//照相
$('.camera').click(function() {
$('.camera_detail').animate({
height: "211px"
}, 0);
});
$('.close').click(function() {
$('.camera_detail').animate({
height: "0px"
}, 0);
});
function change() {
var num = document.getElementById("percent");
var location = document.getElementById("percent_move");
num.innerHTML = location.value;
}
$(".content img").hover(function() {
i = $(this).index();
$(".img_bg").css("background", 'url(img/HF/bg' + i + '.jpg)' + 'no-repeat');
$(".img_bg").css("background-size", "264px 180px");
});
$(".content img").click(function() {
$("body").css("background", 'url(img/HF/bg' + i + '.jpg)' + 'no-repeat');
$("body").css("background-size", "cover");
});
//设置
$('.setting').click(function() {
$('.mySet_detail').animate({
height: "188px"
}, 500);
});
$('.my_set').click(function() {
$('.mySet_detail').animate({
height: "0"
}, 500);
});
//复选框
;
(function($) {
$.extend({
inputStyle: function() {
function check(el, cl) {
$(el).each(function() {
$(this).parent('.choice-border').removeClass(cl);
var checked = $(this).prop('checked');
if(checked) {
$(this).parent('.choice-border').addClass(cl);
}
})
}
$('input[type="checkbox"]').on('click', function() {
check('input[type="checkbox"]', 'checkbox_bg_check');
})
}
})
})(jQuery)
//调用
$(function() {
$.inputStyle();
})
</script>
</body>
</html>以下是CSS代码：
/*背景颜色æžå¾—跟下é¢ä¸€æ ·çš„å°±å¯ä»¥å§é‚£æ¡çº¿è¦†ç›–了 所以看起æ¥å°±æ²¡æœ‰çº¿*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
body {
background: url(../img/HF/bg0.jpg);
background-size: cover;
}
a {
text-decoration: none;
}
em {
font-style: normal;
}
ul li {
list-style: none;
}
ul,
li {
list-style: none;
margin: 0, auto;
padding: 0;
}
.header {
width: auto;
height: 44px;
background-color: #adb3c0;
margin-top: -10px;
margin-left: -10px;
white-space: nowrap;
}
.FZTQ {
position: relative;
top: 13px;
height: 20px;
width: 150px;
margin-left: 20px;
font-size: 13px;
}
.FZ {
color: #FFFFFF;
}
.FZTQ img {
position: relative;
top: 6px;
width: 18px;
height: 18px;
}
.text {
color: #FFFFFF;
font-size: 14px;
}
.TQTX {
color: #38f;
}
.TQZS {
color: #FFFFFF;
}
.SX {
color: #FFFFFF;
margin-left: 2px;
}
.HFXX {
position: absolute;
top: 8px;
left: 180px;
font-size: 13px;
z-index: 5;
}
.HFXX a {
color: #FFFFFF;
text-decoration: underline;
}
.HF {
cursor: pointer;
color: #FFFFFF;
margin-right: 5px;
}
.right {
position: absolute;
right: 0px;
top: 8px;
font-size: 15px;
width: 100%;
}
.right a {
text-decoration: underline;
color: #FFFFFF;
}
.lanmu {
margin-right: 20px;
font-weight: bold;
float: right;
position: relative;
right: 230px;
}
.lanmu1 {
margin-right: 335px;
font-weight: bold;
}
.my {
/* margin-right: 20px; */
position: absolute;
right: 165px;
top: 0px;
}
.set {
position: absolute;
float: right;
top: 0px;
right: 109px;
/* margin-right: 151px; */
}
.more {
position: absolute;
top: 0px;
right: 0px;
margin-left: 20px;
font-size: 13px;
color: #FFFFFF;
background: #38f;
padding: 3px;
width: 70px;
height: 28px;
line-height: 28px;
text-align: center;
}
.more_item {
position: relative;
top: 9px;
text-align: center;
margin-left: 8px;
width: 50px;
height: 76px;
margin-top: 10px;
border-bottom: 1px solid #f0f0f0;
}
.more_item2 {
height: 100%;
position: absolute;
right: 0px;
top: -5px;
background-color: #F9F9F9;
width: 76px;
display: none;
z-index: 5;
}
.more_item3 {
position: relative;
right: 5px;
font-size: 13px;
width: 85px;
text-align: center;
height: 43px;
line-height: 43px;
}
.more_item a {
position: relative;
right: -5px;
top: -1px;
font-size: 12px;
color: #5E5E5E;
}
.more_item a:hover {
/*color: -webkit-link;蓝色*/
text-decoration: underline;
}
.more_item_all {
font-size: 12px;
width: 66px;
margin-left: 8px;
margin-top: 10px;
color: #666;
border-bottom: 1px solid #000000;
}
.more_item_all a {
color: #666;
}
.Logo {
text-align: center;
}
.self {
position: absolute;
float: right;
right: 165px;
top: 27px;
background: #FFFFFF;
font-size: 12px;
width: 60px;
display: none;
z-index: 999;
}
.self a {
color: #000000;
height: 25px;
line-height: 25px;
text-decoration: none;
text-align: center;
padding-left: 5px;
padding-right: 5px;
z-index: 999;
}
.self a:hover {
background-color: #398bfb;
color: #FFFFFF;
}
/*这是上é¢é‚£ä¸ªç®å¤´*/
.self:before {
position: absolute;
content: "";
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
/*背景颜色æžå¾—跟下é¢ä¸€æ ·çš„å°±å¯ä»¥å§é‚£æ¡çº¿è¦†ç›–了 所以看起æ¥å°±æ²¡æœ‰çº¿*/
background: #FFFFFF;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
top: -6px;
left: 50%;
margin-left: -5px;
}
.set_detail {
position: absolute;
float: right;
right: 90px;
top: 27px;
background: #FFFFFF;
font-size: 12px;
width: 60px;
display: none;
}
.set_detail a {
color: #000000;
height: 25px;
line-height: 25px;
text-decoration: none;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
.set_detail:before {
position: absolute;
content: "";
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
/*背景颜色æžå¾—跟下é¢ä¸€æ ·çš„å°±å¯ä»¥å§é‚£æ¡çº¿è¦†ç›–了 所以看起æ¥å°±æ²¡æœ‰çº¿*/
background: #FFFFFF;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
top: -6px;
left: 50%;
margin-left: -5px;
z-index: 1;
}
.set_detail a:hover {
background-color: #398bfb;
color: #FFFFFF;
}
.my_detail {
padding: 10px;
}
.searchBox {
text-align: center;
}
.searchBox:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nav_scroll {
position: fixed;
width: 100%;
margin: 0;
left: 0;
top: 0;
z-index: 20;
background: #FFFFFF;
padding-top: 20px;
padding-bottom: 20px;
}
.nav_scroll .logo {
display: block;
position: relative;
float: left;
left: 245px;
top: -2px;
}
.nav_scroll .camera {
position: relative;
right: 420px;
top: 13px;
}
.nav_scroll .input_seach {
border: 1px solid #38f;
position: relative;
top: -1px;
left: -16px;
}
.nav_scroll .btn_input {
background-color: #38f;
color: #FFFFFF;
border: 1px solid #38f;
margin-left: -8px;
position: relative;
top: -1px;
display: block;
}
.nav_scroll .recom_right {
position: fixed;
top: 268px;
right: 227px;
width: 300px;
margin-top: 20px;
text-align: left;
}
.clear{
clear: both;
}
.input_seach {
width: 594px !important;
height: 45px;
border: 1px solid #E8E8E8;
padding-left: 10px;
padding-right: 35px;
font-size: 16px;
position: relative;
left: 41px;
top: 0px;
}
/*去除输入框点击时，边框颜色å˜åŒ–*/
input:focus {
outline: none;
}
.camera {
float: right;
position: relative;
right: 424px;
top: 14px;
width: 26px;
display: block;
height: 22px;
background: url(../img/camera.png) no-repeat 2px 3px;
z-index: 5;
cursor: pointer;
}
.camera:hover {
background: url(../img/camera.png) no-repeat 2px -17px;
}
.btn_input {
position: relative;
width: 104px;
margin-left: -8px!important;
font-size: 16px;
padding: 13px;
display: block;
float: right;
right: 281px;
top: -1px;
}
.logo {
position: relative;
top: 8px;
right: 10px;
display: none;
}
.tab {
width: 900px;
margin: 20px;
margin-top: 65px;
margin-left: 300px;
border: 1px solid #d8d6d6;
}
.tab ul {
list-style: none;
display: block;
height: 30px;
line-height: 30px;
border-bottom: 1px #d8d6d6 solid;
}
.tab ul li {
cursor: pointer;
float: left;
list-style: none height:29px;
line-height: 29px;
padding: 0px 10px;
border-right: 1px #d8d6d6 solid;
}
.tab .hit {
background: #f0f0f0;
}
.atten {
width: 85px;
height: 29px;
}
.attention {
position: relative;
top: -17px;
right: -20px;
}
.setting {
float: right;
}
.blank {
width: 626px;
height: 30px;
}
.my_att {
width: 900px;
vertical-align: middle;
zoom: 1;
height: 800px;
line-height: 480px;
margin: 0 auto;
text-align: center;
display: block;
}
.add {
background: #38f;
color: #FFFFFF;
width: 67px;
height: 26px;
line-height: 26px;
font-size: 13px;
cursor: pointer;
display: inline-block;
text-align: center;
position: relative;
top: 21px;
right: 200px;
}
.recommend_detail {
display: none;
}
.navigation {
display: none;
}
.recom_line {
width: 172px;
margin-top: 34px;
float: left;
display: inline-block;
margin-left: 25px;
border-bottom: 1px solid #F9F2F4;
}
.recom_tip {
width: 187px;
padding-top: 0px;
vertical-align: middle;
margin: 0 auto;
display: inline-block;
}
.recom_tip span {
font-size: 13px;
color: #999;
}
.recom_line2 {
width: 172px;
margin-top: 34px;
display: inline-block;
margin-left: 10px;
border-bottom: 1px solid #F9F2F4;
}
.message {
width: 540px;
margin-left: 25px;
}
.message h2 {
width: 100%;
padding-top: 20px;
padding-bottom: 12px;
}
.message h2 a {
color: #333;
font-size: 18px;
}
.message h2 a:hover {
text-decoration: underline;
color: #38f;
}
.message ul {
border: 0;
}
.message ul li {
border: 0;
display: inline-block;
overflow: hidden;
zoom: 1;
width: 180px;
height: 119px;
padding: 0px;
}
.message .src {
line-height: 30px;
text-align: left;
}
.message .src .news,
.time {
color: #999;
font-size: 13px;
margin-right: 6px;
}
.message .src .news a {
color: #999;
font-size: 13px;
}
.message .src .hot_point {
color: red;
border: 1px solid #efb9b9;
font-size: 12px;
border-radius: 3px;
line-height: 12px;
padding: 0 2px;
}
.message2 {
padding-top: 16px;
width: 540px;
margin-left: 25px;
padding-bottom: 15px;
}
.message2 h2 {
width: 348px;
padding-left: 195px;
}
.message2 h2 a {
color: #333;
font-size: 18px;
}
.message2 h2 a:hover {
text-decoration: underline;
color: #38f;
}
.message2 ul {
border: 0;
}
.message2 ul li {
border: 0;
display: inline-block;
overflow: hidden;
zoom: 1;
width: 180px;
height: 119px;
padding: 0px;
}
.message2 .src {
width: 348px;
line-height: 30px;
text-align: left;
padding-left: 197px;
}
.message2 .src .news,
.time {
color: #999;
font-size: 13px;
margin-right: 6px;
}
.message2 .src .news a {
color: #999;
font-size: 13px;
}
.message2 .src .hot_point {
color: red;
border: 1px solid #efb9b9;
font-size: 12px;
border-radius: 3px;
line-height: 12px;
padding: 0 2px;
}
.message3 {
padding-top: 10px;
width: 540px;
margin-left: 25px;
padding-bottom: 15px;
}
.message3 h2 {}
.message3 h2 a {
color: #333;
font-size: 18px;
}
.message3 h2 a:hover {
text-decoration: underline;
color: #38f;
}
.message3 ul {
border: 0;
}
.message3 ul li {
border: 0;
display: inline-block;
overflow: hidden;
zoom: 1;
width: 180px;
height: 119px;
padding: 0px;
}
.message3 .src {
line-height: 30px;
text-align: left;
}
.message3 .src .news,
.time {
color: #999;
font-size: 13px;
margin-right: 6px;
}
.message3 .src .news a {
color: #999;
font-size: 13px;
}
.message3 .src .hot_point {
color: red;
border: 1px solid #efb9b9;
font-size: 12px;
border-radius: 3px;
line-height: 12px;
padding: 0 2px;
}
.recom_right {
position: absolute;
top: 315px;
right: 216px;
width: 300px;
margin-top: 20px;
text-align: left;
}
.title_text {
float: left;
height: 22px;
width: 94px;
font-size: 14px;
font-weight: bold;
}
.title_text a {
font-size: 14px;
color: #333;
}
.refresh {
width: 270px;
height: 30px;
display: inline-block;
}
.new_refresh {
text-align: center;
float: right;
display: block;
height: 22px;
width: 67px;
cursor: pointer;
}
.new_refresh:hover>.text_refresh {
color: #07f;
}
.text_refresh {
font-size: 13px;
width: 40px;
text-align: center;
white-space: nowrap;
}
.news_title {
width: 136px;
display: inline-block;
height: 34px;
line-height: 34px;
}
#news_content {
border: 0px;
}
#news_item_artist {
padding: 0px;
border: 0px;
margin-right: 13px;
}
#news_item_artist a {
font-size: 14px;
color: #333;
}
#news_item_artist a:hover {
text-decoration: underline;
color: #07f;
}
.nav_like h1 {
font-size: 14px;
margin: 8px 0 4px;
padding: 0;
}
.navigation {
padding: 10px 0 13px 25px;
}
.bdnm {
display: inline-block;
margin-right: 15px;
margin-top: 15px;
background: #fcfcfc;
}
.bdnm a {
height: 58px;
line-height: 58px;
width: 126px;
float: left;
text-align: center;
}
.bdnm img {
position: relative;
top: 3px;
}
.bdnm_txt {
font-size: 14px;
color: #333;
}
.set_home {
text-align: center;
}
.set_home_a {
display: inline;
margin-right: 12px;
}
.set_home_a a {
font-size: 12px;
color: #ffffff;
text-decoration: underline;
}
.copyright {
font-size: 12px;
color: #ffffff;
}
.copyright a {
font-size: 12px;
color: #ffffff;
text-decoration: underline;
}
.set_home2 {
text-align: center;
}
.set_home2 a {
color: #FFFFFF;
font-size: 12px;
}
.set_home2 a:hover {
text-decoration: underline;
}注意点：
1.有些功能没有实现，所以往后我会尽快补上；
2.可能会出现浏览器兼容性问题，所以大家别见怪，到时候大家自行修改；
3.完整代码待通过审核之后我会给出对应的链接；
4.有哪些写的不好的地方，请大家见谅。
5.完整代码链接：
HTML仿百度首页登录后的静态界面代码
1270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
