index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyTest</title> <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" /> <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" /> <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="css/mian.css" /> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/"></script> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> </head> <body> <div class="container-content"> <div class="header"> <div class="pull-left"> <div> <p style="float: left;"><big class="png_wea"></big></p> <p style="padding: 5px;color: white;">多云转晴</p> <!--<div id="time"><div>--> <div id="time" class="row" style="color: #ADADAD;padding-left: 10px;padding-top: 0px;"></div> </div> </div> <div class="pull-right"> <div class="dropdown"> <!--<button class="dropbtn">taoyucheng</button>--> <div class="dropdown-mean"><a href="#">taoyucheng</a> <span class="caret"><span> </div> <div class="dropdown-content"> <a href="#">修改信息</a> <a href="#">修改密码</a> <a href="#">注销</a> </div> </div> </div> </div> <div class="mean"> <ul class="nav nav-tabs"> <li id="nav1"><a href="index.html" class="active"><span>Home</span></a></li> <li id="nav2"><a href="./template/blog.html"><span>Blogs</span></a></li> <li id="nav3"><a href="#"><span>Log</span></a></li> <li id="nav4"><a href="#"><span>Wechat</span></a></li> <li id="nav5"><a href="#"><span>Cloud Disk</span></a></li> <li id="nav6"><a href="#"><span>Spider</span></a></li> </ul> </div> <div class="context" style="color: white;"> <div class="context-container"> <div class="context-left">left</div> <div class="context-right">right</div> </div> </div> </div> <div class="footer"> <div class="main"> <!--==============================footer=================================--> <div id = "text-footer"> Copyright 2011 <b>taoyucheng</b> All Rights Reserved </div> </div> </div> <script type="text/javascript"> $(function(){ time(); setInterval("time()",1000); }) function time(){ var vWeek,vWeek_s,vWeek_Day; vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; var date =new Date(); year = date.getFullYear(); m = date.getMonth()+1 month = m>10?m:"0"+m; d = date.getDate(); day = d>10?d:"0"+d; h = date.getHours(); hours = h>10?h:"0"+h; min = date.getMinutes(); minutes = min>10?min:"0"+min; s = date.getSeconds(); seconds = s>10?s:"0"+s; vWeek_s = date.getDay(); // document.getElementById("time").innerHTML = year+"/"+month+"/"+day+" "+hours+":"+minutes+":"+seconds+" "+vWeek[vWeek_s]; $("#time").text(year+"/"+month+"/"+day+" "+hours+":"+minutes+":"+seconds+" "+vWeek[vWeek_s]); } </script> </body> </html>
blog.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyTest</title> <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css" /> <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" /> <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="../css/mian.css" /> <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/"></script> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> </head> <body> <div class="container-content"> <div class="header"> <div class="pull-left"> <div> <p style="float: left;"><big class="png_wea"></big></p> <p style="padding: 5px;color: white;">多云转晴</p> <!--<div id="time"><div>--> <div id="time" class="row" style="color: #ADADAD;padding-left: 10px;padding-top: 0px;"></div> </div> </div> <div class="pull-right"> <div class="dropdown"> <!--<button class="dropbtn">taoyucheng</button>--> <div class="dropdown-mean"><a href="#">taoyucheng</a> <span class="caret"><span> </div> <div class="dropdown-content"> <a href="#">CSDN</a> <a href="#">修改密码</a> <a href="#">注销</a> </div> </div> </div> </div> <div class="mean"> <ul class="nav nav-tabs"> <li ><a href="index.html" class="active"><span>Home</span></a></li> <li class="drop-down"> <a href="#" > Blogs <span class="caret"></span> </a> <div class="drop-mean"> <a onclick="blog('https://www.csdn.net/')" href="javascript:void(0);">CSDN</a> <a onclick="blog('https://www.baidu.com/')" href="javascript:void(0);">Baidu</a> </div> </li> <li ><a href="#"><span>Log</span></a></li> <li ><a href="#"><span>Wechat</span></a></li> <li ><a href="#"><span>Cloud Disk</span></a></li> <li ><a href="#"><span>Spider</span></a></li> </ul> </div> <div class="context" style="color: white;"> <iframe src="https://www.csdn.net/" ></iframe> </div> </div> <div class="footer"> <div class="main"> <!--==============================footer=================================--> <div id = "text-footer"> Copyright 2011 <b>taoyucheng</b> All Rights Reserved </div> </div> </div> <script type="text/javascript"> $(function(){ time(); setInterval("time()",1000); }) function time(){ var vWeek,vWeek_s,vWeek_Day; vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; var date =new Date(); year = date.getFullYear(); m = date.getMonth()+1 month = m>10?m:"0"+m; d = date.getDate(); day = d>10?d:"0"+d; h = date.getHours(); hours = h>10?h:"0"+h; min = date.getMinutes(); minutes = min>10?min:"0"+min; s = date.getSeconds(); seconds = s>10?s:"0"+s; vWeek_s = date.getDay(); // document.getElementById("time").innerHTML = year+"/"+month+"/"+day+" "+hours+":"+minutes+":"+seconds+" "+vWeek[vWeek_s]; $("#time").text(year+"/"+month+"/"+day+" "+hours+":"+minutes+":"+seconds+" "+vWeek[vWeek_s]); } function blog(str){ $("iframe").attr("src",str) } </script> </body> </html>
css
html body{ /* border-top:8px solid #aaa9a9; */ width: 100%; /* height: 100%;*/ margin: 0; padding: 0; background:url(../img/bg.gif) repeat; } big{ display: inline-block; } span{ display: inline-block; } li a{ color: white; } iframe{ width: 100%; height: 800px; margin: 0px; } .container-content{ width: 55%; /* height: auto;*/ margin:auto; } .header{ width: 100%; height: 100px; padding: 20px 10px; } .mean{ width: 100%; color: white; } .mean ul li{ display: inline-block; } .mean .drop-mean{ display: none; position: absolute; width: 100px; right: -30px; background-color: #222222; } .mean .drop-mean a{ text-decoration: none; display: block; width: 200px; height: 30px; text-indent: 8px; padding: 2px; } .mean .drop-down:hover .drop-mean{ display: block; } .context{ width: 100%; /* height: 630px;*/ padding: 20px 10px; /* background: red;*/ } .context-container{ width: 100%; height: 600px; } .context-left{ width: 70%; float: left; display: block; /* height: 600px;*/ background: red; } .context-right{ width: 30%; float: right; display: block; /* height: 600px;*/ background: white; } .footer{ width: 100%; height:100px position:absolute; bottom:0px; left:0px; background-color:#000000 ; /* 100%;*/*/ /* flex: 0 0 auto;*/ /* margin-top:-100px;*/ } .main { width:980px; padding-top:5px; margin:0 auto; font-size:12px; line-height:15px; } #text-footer{ text-align:center; color:#ffffff; font-size:12px; line-height:14px; margin-top: 10px; clear:both; } .pull-left div p{ display: inline-block; /*height:30px; padding: 10px 0px;*/ } .png_wea{ display: block; background-image: url(../img/blue30.png); width: 30px; height: 30px; background-position: -80px -320px; } .dropdown { position: relative; display: inline-block; margin-top: 3px; } .dropdown-mean a{ color: white; padding: 3px 0px; text-decoration: none; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color:white; padding: 8px 12px; text-decoration: none; display: block; font-size: 8px; background: #222222; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; background: #262626; } .dropdown:hover .dropbtn { background-color: #262626; }