自适应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 © 2017king &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主页的更多相关文章
- 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. ...
随机推荐
- Web漏洞扫描工具（批量脱壳、反序列化、CMS）
一.什么是Web漏洞扫描工具 即是指“扫描Web应用以查找安全漏洞(如跨站脚本,SQL注入,命令执行,目录遍历和不安全服务器配置)的自动化工具”,其中许多可能是由不安全或不正确的编码和设计.另一方面, ...
- SoapUI 请求 https 报 javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure
在 E:\ProgramFiles\SmartBear\SoapUI-Pro-5.1.2\bin\SoapUI-Pro-5.1.2.vmoptions 中添加一行代码,代码如下: -Dsoapui.h ...
- QPixmap 在非QtCreator环境下无法显示jpg图片
这几天需要实现在Qt界面中显示jpg图片,于是直接将路径传给QPixmap对象,发现显示不出来. 然而在Qt SDK自带的Demo中却可以正确显示jpg图片,经搜索引擎查找发现,是自己的exe文件缺少 ...
- MVC人员管理系统
基本都要使用C控制器中的两个action来完成操作,一个用于从主界面跳转到新页面.同时将所需操作的数据传到新界面,另一个则对应新界面的按钮,用于完成操作.将数据传回主界面以及跳转回主界面.根据不同情况 ...
- ReactNative 学习笔记
1. react-native引入第三方库时报Command `run-android` unrecognized: 在使用第三方库tab-navigator时调用: npm install reac ...
- JSon与字符串的转换
json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...
- Shopt命令(删除排除)
有时候我们需要反选某个文件以外的其他文件,就会用到rm -rf!(file)命令,但是有时候这条命令会报错显示 -bash: !: event not found 解决办法:shopt -s extg ...
- 浅谈Java堆内存分代回收
目录 1.概述 2.堆内存是如何分代的 3.各分代之间是如何配合工作的 1.概述 与C++不同的是, 在Java中我们无需关心对象占用空间的释放, 这主要得益于Java中的垃圾处理器(简称GC)帮助我 ...
- SpringMVC中的一些注解
@Controller:表明该类是一个Controller: @RequestMapping(参数) :为类或者方法定义一个url @RequestParam(value = "id&quo ...
- IntelliJ IDEA mybatis-generator的使用
STEP 1. 在maven项目的pom.xml 添加mybatis-generator-maven-plugin 插件 pop.xml <dependency> <groupId& ...