My_First_Web

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+"\t"+hours+":"+minutes+":"+seconds+"\t"+vWeek[vWeek_s]; 
                $("#time").text(year+"/"+month+"/"+day+"\t"+hours+":"+minutes+":"+seconds+"\t"+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+"\t"+hours+":"+minutes+":"+seconds+"\t"+vWeek[vWeek_s]; 
                $("#time").text(year+"/"+month+"/"+day+"\t"+hours+":"+minutes+":"+seconds+"\t"+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 ;
/*    width: 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;
}

猜你喜欢