HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应主页</title>
<link rel="stylesheet" href="test.css">
</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>
<!--下拉列表 -->
<ul>
<li class="top"><a href="#" target="_blank">导航菜单</a></li>
<li ><a href="#" target="_blank">导航菜单</a></li>
<li><a href="#" target="_blank">导航菜单</a></li>
</ul>
</li>
<li><a href="#" target="_blank">关于我们</a>
<!--下拉列表-->
<ul>
<li class="top"><a href="#" target="_blank">关于我们</a></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>
<!--内容 三部分-->
<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="3.jpg" alt="image_large">
</div>
<!--右侧-->
<div class="rightBox">
<p>small image:</p>
<img id="id-image-small" src="3.jpg" alt="image_small">
</div>
</div>
<!--尾部-->
<footer>
<p>copyright © 2017king &king,</p>
</footer> <script type="text/javascript" src="test.js"></script>
</body>
</html>
css
*{
margin:;
padding:;
}
header{
display:flex;
width:100%;
background:#fff;
}
#navmenu{
float:none;
position:relative;
height:auto;
margin:0 auto;
width:100%;
font-family: sans-serif;
font-size:14px;
color:#666;
background-color:#f8f8f8;
}
#navmenu span.title{
float:left;
position:relative;
margin:0 auto;
padding:20px;
font-family:DotumChe;
font-size:14px;
font-weight:bold;
color:#333;
text-align:center;
width:auto;
height:auto;
}
#navmenu span.loginleft{
float:left;
position:relative;
margin:0 auto;
padding:20px;
font-size:12px;
color:#666;
text-align:center;
visibility:hidden;
width:auto;
height:auto;
}
#navmenu ul{
list-style: none;
}
#navmenu ul li{
float:left;
position:relative;
}
#navmenu ul li a{
text-decoration: none;
text-align:center;
display:block;
color:#666;
padding:20px;
border-right: 1px solid #e9e9e9;
}
#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;
left:;
min-width: 190px;
}
#navmenu ul li:hover ul li a{
display: block;
background: #c0c0c0;
color:#fff;
width:110px;
text-align: center;
border-bottom:1px solid #f2f2f2;
}
#navmenu ul li:hover ul li a:hover{
background: #c0c0c0;
color:#fff;
}
#navmenu ul li:hover ul li a:hover{
background: cadetblue;
color:#fff;
}
.borderleft{
border-left:1px solid #e9e9e9;
}
.top{
border-top:1px solid #f2f2f2;
}
#navmenu span.login{
float:right;
position:relative;
margin:0 auto;
padding:20px;
font-size:12px;
color:#666;
text-align:center;
visibility: visible;
}
#navmenu span.login a{
font-size:12px;
color:#888;
text-decoration: none;
}
.content{
zoom:;
}
.content:after{
content:'.';
display:block;
height:;
clear:both;
visibility:hidden;
}
.content .leftBox{
float:left;
width:20%;
min-width: 192px;
height:auto;
margin:5px;
background: #e8e8e8;
display:inline;
transition: width 1s ease;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
}
.content .middleBox{
float:left;
width:60%;
min-width:320px;
height:auto;
margin:5px;
background: #f0f0f0;
display:inline;
transition:width 1s ease;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
}
.content .middleBox p{
margin:8px;
padding:4px;
}
.content .rightBox{
float:left;
width:15%;
min-width:128px;
height:auto;
margin:5px;
background:#e8e8e8;
display:inline;
transition:width 1s ease;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
}
.content .rightBox p{
margin:4px;
padding:2px;
}
.content .rightBox img{
margin:4px;
padding:2px;
}
.navleft{
float:left;
}
.navleft ul{
list-style:none;
}
ul.navleftmenu{
width:auto;
padding:8px 16px 8px 16px;
}
ul.navleftmenu li{
margin:8px 0 8px 0;
}
ul.navleftmenu li a{
display:block;
text-decoration: none;
background: #cbcbcb;
color:#666;
padding:7px 15px 7px 15px;
width:96px;
}
ul.navleftmenu li a:hover{
background: #8a8a8a;
color:#fff;
padding:7px 20px 7px 26px;
}
footer{
clear:both;
position:absolute;
width:100%;
margin:auto;
padding:16px 0 16px 0;
bottom:;
text-align:center;
color:#666;
background-color: #eee;
}
@media screen and (min-width:1024px){
.content{
width:auto;
height:auto;
margin:auto;
}
}
@media screen and (min-width:800px)and(max-width:1024px){
#navmenu span.title{
width:100%;
background-color: #fff;
}
#navmenu span.loginleft{
visibility: visible;
}
#navmenu span.login{
visibility: hidden;
}
.content{
width:100%;
height:auto;
}
.leftBox{
width:30%;
}
.middleBox{
width:65%;
}
.rightBox{
visibility: hidden;
width:;
}
}
@media only screen and (min-width: 400px) and(max-width:800px){
#navmenu span.title{
width:100%;
margin:auto;
background-color: #fff;
}
#navmenu span.loginleft{
width:100%;
margin:auto;
visibility: visible;
background-color: #fff;
}
#navmenu span.login{
visibility: hidden;
}
.content{
width:100%;
height:auto;
}
.leftBox{
width:30%;
}
.middleBox{
width:auto;
}
.rightBox{
visibility: hidden;
width:;
}
}
@media only screen and (max-width:400px) {
.leftBox,.middleBox,.rightBox{
float:left;
position:relative;
width:98%;
height:auto;
}
}
js
window.onload= {
function on_html5_click() {
document.getElementById("id-image-large").setAttribute("src", "3.jpg");
document.getElementById("id-image-small").setAttribute("src", "3.jpg");
}
function on_css3_click() {
document.getElementById("id-image-large").setAttribute("src", "3.jpg");
document.getElementById("id-image-small").setAttribute("src", "3.jpg");
}
function on_js_click() {
document.getElementById("id-image-large").setAttribute("src", "3.jpg");
document.getElementById("id-image-small").setAttribute("src", "3.jpg");
}
}
实现web主页的大部分页面元素：
包括：顶部工具条导航菜单，登录链接，左侧导航菜单，右侧边栏，左侧菜单项与页面主体内容的联动和页面页脚。
实现了自适应web主页媒体查询功能，可以根据浏览器分辨率大小自动调整页面元素的布局。