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. 打包时，node内存溢出问题解决方法

    在使用npm run build打包时,遇到node内存溢出问题. 网上查找到的决绝方案.解决方案一: 安装increase-memory-limit插件,扩大node的内存限制 但是,这个解决方案在 ...

  2. Laragon+PHP7中开启xdebug

    状态 :laragon+php7.2,按管方做法要求用的是xdebug2.7.结果2.7版本放进去一打断点就挂了,于是换成2.6的版本, php.ini中配置如下: [Xdebug] zend_ext ...

  3. 移动端常用UI框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率. 一.M ...

  4. ssm注入失败

    今天做ssm整合时候,创建bean/注入一直出错,检查几遍没发现问题,后来发现犯了个低级错误,mapper.xml的<mapper namespace="XXXXX" > ...

  5. django 加载css、js和图片记载不上

    在django的setting里加以下配置 STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), 'Djago/static/',)

  6. Django Cookie和Seesion

    1.cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生.cookie的工作原理是:由服务器产生内容,浏览器 ...

  7. django 之 ContentType的使用

    1. ContentType 是干什么用的呢: 1. ContentType: 主要的作用就是Django orm的创建表的时候,可以方便多表查询使用,简化多表查询的过程 2.ContentType ...

  8. samba实现CentOS和window上的数据同步

    前言 之前做了一个项目,需要写python脚本来修改组件的安装方式,脚本是在windows下面的pycharm下面进行编写,但是编译要在linux上面进行分模块的maven编译,虽然之前也写了pych ...

  9. 结合之前看的一些东西，阅读RockMQ实战与原理解析笔记

    Topic有多个message queue,消息可以并行的向各个message queue发送,消费者也可以并行的从多个message queue读取消息并消费 clustering模式消费一个top ...

  10. if、for、while的详解及实例（一）

    实例一:猜字谜a = 1i = 0while a != 20: a = int (input ('请输入你猜的数字:')) i += 1 print(i) if a == 20: if i<3: ...