console
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>HTML5+CSS3+JS -自定义界面</title>
<style type="text/css">
header{display: flex;
width: 100%;
background: #fff;
}
#navmenu{
float: none;
position: relative;
margin: 0 auto;
width: 100%;
height: auto;
font-family: helvetica;
font-size: 14px;
co1or :#666;
background-color: #f8f8f8;
}
#navmenu span.title {
float: left;
position: relative;
width: auto;
height: auto;
margin: 0 auto;
padding:20px;
font-family: helvetica;
font-size: 14px;
font-weight :bold;
color :#333;
text-align:center ;
}
#navmenu span.loginleft {float:left;
position:relative;
width: auto;
height:auto;
margin: 0 auto;
padding:20px;
font-family: helvetica;
font-size: 12px;
color: #666;
text-align: center;
visibility: hidden;
}
#navmenu ul{
1ist-style-type:none;}
#navmenu ul li{float:left;
position:relative;}
#navmenu ul li a {border-right:1px
solid #e9e9e9;
list-style-type: none;
display: block;
color :#666;
text-decoration: none;
text-align: center;
}
#navmenu ul li a:hover{
background: #c0c0c0;
color: #fff;
}
#navmenu ul li ul {display: none;
}
#navmenu ul li:hover ul {display: block;
position: absolute;
top: 56px;
min-width: 190px;left: 0;
}
#navmenu ul li:hover ul li a
{
display: block;
background:#c0c0c0;
color :#fff;
width:110px;
text-align:center;
border-bottom: lpx solid #f2f2f2;
border-right: none;
}
#navmenu ul li :hover ul li a:hover{background:#c0c0c0;
color :#fff;
}
.borderleft {
border-left:1px solid #e9e9e9;
}
.top {
border-top:1px solid #f2f2f2;
}
#navmenu span.login {float: right;
position: relative;width: auto;
height: auto;
margin:0 auto;
padding: 20px;
font-family: helvetica;
font-size: 12px;
color: #666;
text-align: center;
visibility: visible;}
#navmenu span.login a {font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<header>
<div id="navmenu">
<span class="title">HTML5+CSS3+JS -自迺座主真</span>
<span class="loginleft"><a href="#">登求</a></span>
<ul>
<li class= "borderleft"><a href="#" target="_blank">主頁</a></li>;
<li><a href="#" target="_blank">尋航莱単</a></li>
<li><a href="#" target="_blank">尋航菜単</a>
<u1>
<li class-"top"><a href="#" target="_blank">守航菜
</a></li>
<li><a href="#" target="_blank">号航菜単</a></li>
<li><a href="#" target=" blank">号航菜単</a></li></ul>
</1i>
<li><a href="#" target="_blank">矢于我們</a>
<ul>
<li class="top"><a href="#" target="_blank">夫于我付
</li>
<li><a href="#" target="_blank">关于我们</a></li>
<li><a href="#" target="_blank">关于 我们</a></li></ul>
</li>
</ul>
<span class="login"><a href="#">登录</a></span>
</div>
</header>
<br>
<div class= "content">
<div class="leftBox">
<div class="navleft">
<ul class="navleftmenu">
<li><a onclick="on html5 click();">HTML5</a></li>
<li><a onclick="on css3 click();">CSS3</a></li>
<li><a onclick-"on js_click();">JavaScript</a></li>
<li><a onclick-"on chrome click();">Chrome</a></li>
<li><a onclick-"on firefox_ click();">Firefox</a></li>
<li><a onclick-"on safari_ click();">Safari</a></li></ul>
</div >
</div>
<div class="middleBox">
<p>large image:</p>
<img id="id- image-large" src="" alt="image_ large" />
</div>
<div class="rightBox">
<p>sma1l image:</p>
<img id="id- image-small" src="" alt="image_ small" />
</div>
</div>
<footer>
</footer>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>