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 &copy; 2017king &amp;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主页媒体查询功能，可以根据浏览器分辨率大小自动调整页面元素的布局。

自适应Web主页的更多相关文章

  1. APP 半自适应 WEB页面

    特别赶,响应式纯自适应的,有空写了新的发. (在手机上看,页面上看一定乱) <!DOCTYPE html><html> <head> <meta http-e ...

  2. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  3. Web性能优化：图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  4. web前端图片极限优化策略

    随着web的发展,网站资源的流量也变得越来越大.据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力. 一.现有web图片格式 我们先来看下现在常用 ...

  5. Web前端性能优化之图片优化

    我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...

  6. [转载]WEB缓存技术概述

    [原文地址]http://www.hbjjrb.com/Jishu/ASP/201110/319372.html 引言 WWW是互联网上最受欢迎的应用之一,其快速增长造成网络拥塞和服务器超载,导致客户 ...

  7. 构建移动Web应用程序的技术堆栈

    编写web应用程序时,有很多的技术决策.笔者最近回来编写现代Web应用程序,并希望总结一些曾经在开发周期过程中做了记录零散的想法.这篇文章是关于一套对笔者最近开发的项目有帮助的框架.笔者重温了一些最重 ...

  8. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  9. Zabbix-server 3.4 安装详细和修改web界面中文出现的乱码（一）

    1. 老套路先来个Zabbix简介: Zabbix是一个企业级的.开源的.分布式的监控套件: Zabbix可以监控网络和服务的监控状况. Zabbix利用灵活的告警机制,允许用户对事件发送Email. ...

随机推荐

  1. Python-Thread（通俗易懂）

    此类表示在单独的控制线程中运行的活动,有两种方法可以指定该活动,一是将可调用对象传递给构造函数,二是通过覆盖子类中的run()方法. 如果你对线程不太理解,我们可以打个比方,把线程数看作车辆数,我们来 ...

  2. oracle填坑之PLSQL中文显示为问号

    刚入坑oracle就遇到个坑. 坑描述: 系统:Windows7 oracle:同时安装,11g和12c(安装顺序,先装的12c然后装的11g) 坑:开始安装的12c用SQL Developer使用本 ...

  3. 简单封装Redis做缓存

    基于Redis封装一个简单的Python缓存模块 0. Docker Redis安装 参考: Get Docker CE for CentOS Docker 安装 Redis 安装Docker时错误s ...

  4. java 括号匹配 成对

    import java.util.Stack; public class Solution { public static void main(String[] args) { Solution s ...

  5. maltab-图像拼接（左右两幅图）

    图像拼接 参考自 https://blog.csdn.net/m0_37565736/article/details/79865990 并修改了其中错误的地方,添加自己的讲解或者看法. 我要拼接的是一 ...

  6. loadrunner-关联

    1.什么是关联? 将服务器动态返回的值,保存成一个参数,供后面需要使用到 此参数的地方使用 PS:1.一定是服务器返回的 2.动态变化的,静态不需要关联 3.服务器需要校验的 4.保存成一个参数 5. ...

  7. 14Linux_BIND-Linux就该这么学

    bind 域名解析 域名→ip地址:正向解析 ip地址→域名:反向解析 主服务器:做管理 从服务器:同步 缓存服务器:转发

  8. websocket的子协议stomp协议

    stomp协议Spring实现 服务器注册EndPoint 用来与客户端建立websocket连接 websocket连接的建立应该与客户端与服务器之间的通道无关 jdk中 javax下的websoc ...

  9. open函数新建文件报错

    报错原因很多,我这里只写我遇到的: 给的路径或者文件名中包含了这些字符的:/\:*?"><| 都不行,我说的是Windows平台下的.

  10. 一个socket数量的问题

    最近遇到一个问题,从业务上出现ftp异常: ftp .**.**.** ftp: connect: Cannot assign requested address 这台服务器上的socket统计如下: ...