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. java.lang.IllegalArgumentException: Document base XXX does not exist or is not a readable directory解决方法

    一.配置Eclipse,部署项目 1.双击打开Tomcat设置页面 2.选择Modules模式 3.选择Add External Web Module.. (1)Document base:选择htd ...

  2. 如何安装MySQL5.5.62

    1.首先进入官网https://www.mysql.com MySQL分为社区版和商业版,社区版是免费的,这里选择社区版的. 2.此时选择一个比较简单的5.5版本 直接下载Wisndow(X86,32 ...

  3. mysql 数据插入时的问题

    问题:在实现json串插入到数据库的时候发现中文utf-8传入的.但到数据中的时候反斜杠\就不见了,导致后面显示的时候也不能正常显示. 解决方法:comment=comment.replace(&qu ...

  4. python_练习04

    选课系统 角色:学校.学员.课程.讲师 要求: 1.创建北京.上海2所学校 2.创建linux.python.go3个课程,linux.python在北京开,go在上海开3.课程包含,周期,价格,通过 ...

  5. ToroiseSVN和VisualSVN-server的配置使用, 外网访问SVN 版本库

    https://www.cnblogs.com/Leo_wl/p/3475167.html

  6. vue中v-cloak解决刷新或者加载出现闪烁（显示变量）

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  7. 传统应用、服务器集群、分布式、SOA各种架构的简单解释

    传统架构:无论是SE应用还是WEB应用,传统架构都是表现层---业务层---持久层---数据库   1000并发(tomcat单台500并发,tomcat一般做集群的话,节点数量不能太多,5个左右): ...

  8. angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?

    1,错误如图所示 简单说下错误原因是:没有js没有注册进去. 解决方法: 1.看下index.html有没有引入你的js文件. 2.看下app.js有没有注册js,比如我这次就是这步没做好,合并代码时 ...

  9. 使用pycharm 出现 interpreter field is empty 完美解决方法(转载 记录)

    使用pycharm 出现 interpreter field is empty 主要是因为你的电脑没有正确安装python或者安装python出错,重新下载安装覆盖就行 下载安装包:从Python的官 ...

  10. spark on yarn 内存分配

    Spark On YARN内存分配 本文主要了解Spark On YARN部署模式下的内存分配情况,因为没有深入研究Spark的源代码,所以只能根据日志去看相关的源代码,从而了解“为什么会这样,为什么 ...