自适应Web主页

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;

     }

 }

 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主页的更多相关文章

APP 半自适应 WEB页面
特别赶,响应式纯自适应的,有空写了新的发. (在手机上看,页面上看一定乱) <!DOCTYPE html><html> <head> <meta http-e ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
Web性能优化：图片优化
程序员都是懒孩子,想直接看自动优化的点:传送门我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...
web前端图片极限优化策略
随着web的发展,网站资源的流量也变得越来越大.据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力. 一.现有web图片格式我们先来看下现在常用 ...
Web前端性能优化之图片优化
我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...
[转载]WEB缓存技术概述
[原文地址]http://www.hbjjrb.com/Jishu/ASP/201110/319372.html 引言 WWW是互联网上最受欢迎的应用之一,其快速增长造成网络拥塞和服务器超载,导致客户 ...
构建移动Web应用程序的技术堆栈
编写web应用程序时,有很多的技术决策.笔者最近回来编写现代Web应用程序,并希望总结一些曾经在开发周期过程中做了记录零散的想法.这篇文章是关于一套对笔者最近开发的项目有帮助的框架.笔者重温了一些最重 ...
Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
Zabbix-server 3.4 安装详细和修改web界面中文出现的乱码（一）
1. 老套路先来个Zabbix简介: Zabbix是一个企业级的.开源的.分布式的监控套件: Zabbix可以监控网络和服务的监控状况. Zabbix利用灵活的告警机制,允许用户对事件发送Email. ...

随机推荐

关于Jupyter Notebook快捷操作
Jupyter Notebook 的快捷键 Jupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本:这时的单元框线是绿色的.命令模式,键盘输入运行程序命令:这时的 ...
Cache-control使用Cache-control:private学习笔记【转载】
网页缓存由 HTTP消息头中的Cache-control控制,常见取值有private.no-cache.max-age.must- revalidate等,默认为private 其作用根据不同的重新 ...
Docker笔记——Docker安装及制作镜像
1 Docker安装本文中Docker运行环境为Ubuntu 14.04.1 LTS 3.13.0-32-generic x64参考:https://docs.docker.com/v1.11/eng ...
!!!常用CSS代码
http://www.cnblogs.com/qq21270/p/4854643.html 伪类 http://www.cnblogs.com/qq21270/p/4891167.html CSS3动 ...
PostgreSQL模式（schema）介绍
一个PostgreSQL数据库集群包含一个或多个已命名数据库.用户和用户组在整个集群范围内是共享的,但是其它数据并不共享.任何与服务器连接的客户都只能访问那个在连接请求里声明的数据库. 注意: 集群中 ...
vim 批量替换使用说明
基本语法: :[addr]s/源字符串/目的字符串/[option] 全局替换命令: :%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. "1,20" ...
linux7 安装 zlib依赖库与安装python 3.6
Linux 安装zlib依赖库进入src: cd /usr/local/src 下载zlib库: wget http://www.zlib.net/zlib-1.2.11.tar.gz 解压下载的t ...
MySql日期与时间函数
select DATE_FORMAT(date_sub(current_date(), interval 1 day), '%Y-%m-%d') -- 2018-05-29(昨天) select DA ...
PowerDesigner工具将表字段转成java实体
首先将数据库的表导出为SQL文件.下载安装PowerDesigner工具. 下面以图文的形式讲解: 图 (1) 图 (2) 图 (3) 图 (4) 图 (5) 图 (6) 图 ...
[Design] 后端程序的高并发与异步
既然涉及到高并发这个概念,就少不了先谈这么几个概念,并发数.多进程.多线程.协程.负载均衡. 操作系统上讲的并发是操作系统上有几个程序在同时执行,单核CPU在微观上是由CPU调度执行,非同时执行,多核 ...

自适应Web主页

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

随机推荐

热门专题