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. 走进HashMap

    1.手写实现HashMap 2.解析代码并阐述HashMap1.7到1.8的变化 3.HashMap的遍历方式 4.HashMap与HashSet,Hashtable,ConcurrentHashMa ...

  2. djangorestframework-jwt自带的认证视图进行用户登录验证源代码学习

    Django REST framework JWT djangorestframework-jwt自带的认证视图进行用户登录验证源代码学习 SECRET_KEY = '1)q(f8jrz^edwtr2 ...

  3. 通过Loadruner对mysql数据库进行增删改查

    操作mysql数据库,是在实现mysql数据源配置的基础上操作,可先阅读:loadrunner参数化使用mysql数据源失败解决方法 写之前先理一下,数据库访问流程:打开数据库  --> 数据库 ...

  4. ATS6.2安装部署笔记

    原文:http://www.safecdn.cn/ats/2018/12/ats6-2-install/1046.html 系统版本:CentOS 6.7 1.安装依赖包 yum -y install ...

  5. python实现将android手机通讯录vcf文件转化为csv

    经常会遇到将手机通讯录导出到电脑并转化为在电脑中可编辑的情况,在网上搜索了很久当前不外乎两种处理方式.1.使用电脑的outlook的通讯簿功能,将手机导出的vcf文件导入到outlook的通讯录中,然 ...

  6. SSM的搭建

    1.首先是工具的准备. eclipse jdk1.7 maven 3.5.4 tomcat 8.5 2.工具环境的搭建 首先,new建立选择maven project工程,勾选simple proje ...

  7. 电脑开机出现intel UNDI，PXE-2.1（build 003），是怎么回事？

    restore defaults恢复出厂设置 https://jingyan.baidu.com/article/20b68a88587205796cec6290.html

  8. windows cmd.exe 将程序 stdout 输出到文件中

    问题背景:通过 cmd.exe 调用程序,会有一些输出信息,在 cmd 中不方便查阅,所以需要导入文件中. 例如 方法: 可以在其路径下看到

  9. junit,面向切面开发(动态代理),工厂设计模式,数据库连接池

    1.junit junit又叫单元测试,好处是能进行批量测试,而且如果方法出现了问题能立刻定位出出现问题的方法,还有一个好处是感官效果很好,如果方法都通过了则显示绿条,否则显示红条 TestCase. ...

  10. Matplotlib-画图种类

    Scatter 散点图 本节我们将讲述各种不同的plot的方式.之前我们讲到了如何plot线,今天我们讲述如何plot散点图. # 首先,先引入matplotlib.pyplot简写作plt,再引入模 ...