文档章节

简单的响应式页面小示例

big_cat
 big_cat
发布于 2015/03/29 15:44
字数 561
阅读 74
收藏 0

media query的简单小演示,关于media query的相关说明可以看这里 CSS3 Media Query的使用方法

这里没做太多的工作,只是展示档横向菜单无法完全显示时会自动更换为侧滑菜单,对应PC到移动的场景转换。

保存成html在本地打开就好

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请用webkit内核的做演示</title>
<style type="text/css">
body, a{
margin: 0px 0px;
padding: 0px 0px;
text-decoration: none;
color:#000;
font:18px MicroSoft Yahei;
}

p{
font:18px MicroSoft Yahei;
padding: 5px 10px;
}
.navi{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 65px;
background: #F5F7FA;
border: 3px solid #E6E9ED;
z-index: 2;
line-height: 65px;
padding-left: 10px;
}

#container{
position: fixed;
left: 0px;
top: 65px;
width: 100%;
height: 900px;
background-color: rgba(0,200,255,0.7);
z-index: 1;
transition-delay: 0.5s;
transition-duration: 1s;
margin: 0px 0px;
}


@media screen and (min-width: 570px){

#mobile_menu_btn{
display: none;
}

#mobile_menu{
display: none;
}

.pc{
list-style: none;
height: 100%;
margin: 0px 0px;
width: 900px;
padding-left: 10px;
}

.pc > li{
display: inline-block;
width: 100px;
margin: 15px 0px;
text-align: center;
border: 1px solid #ccc;
height: 30px;
line-height: 30px;
border-radius: 5px;
background: #ccc;
cursor: pointer;
}

.pc > li:hover{
background: #ccd;
}

}

@media screen and (max-width: 569px){

#mobile_menu{
position: fixed;
left: 0px;
top: 65px;
width: 300px;
background: rgba(200,200,200,0.1);
z-index: 0;
height: 800px;
display: block;
}

.mobile{
list-style: none;
padding: 0px 10px;
}

.mobile li{
margin: 10px 0px;
width: 100%;
border-bottom: 1px solid #ccc;
border-radius: 5px;
background: #ccc;
padding:5px 5px;
cursor: pointer;
}

.mobile > li:hover{
background: #ccd;
}
#mobile_menu_btn{
border:1px solid #ccc;
border-radius: 5px;
width: 50px;
height: 50px;
outline: none;
transition-duration: 1s;
}

#mobile_menu_btn:hover{
-webkit-transform: rotate(360deg);
background: #aab;
cursor: pointer;
}

.pc{
display: none;
}

}
</style>
</head>
<body>

<nav>
<div>
<button id="mobile_menu_btn" onclick="toggle()">Menu</button>
<ul>
<li><a href="http://my.oschina.net/sallency" target="_blank">首页</a></li>
<li><a href="#">新鲜事</a></li>
<li><a href="#">画册墙</a></li>
<li><a href="#">微小站</a></li>
<li><a href="http://my.oschina.net/sallency" target="_blank">关于我们</a></li>
</ul>
</div>
</nav>

<div id="container">
<p>纯html+css+js控制,没写那么全面,做个小演示而已,所以你得用webkit内核的浏览器看,但别用360,谢谢,这货是浏览器?別開玩笑了!<a href="http://my.oschina.net/sallency" target="_blank">【我的博客】</a></p>
</div>

<div id="mobile_menu">
<ul>
<li><a href="http://my.oschina.net/sallency" target="_blank">首页</a></li>
<li><a href="#">新鲜事</a></li>
<li><a href="#">画册墙</a></li>
<li><a href="#">微小站</a></li>
<li><a href="http://my.oschina.net/sallency" target="_blank">关于我们</a></li>
</ul>
</div>

<script type="text/javascript">
function toggle(){
var container = document.getElementById("container");
if(container.style.WebkitTransform  == ''){
container.style.WebkitTransform  = 'translateX(300px)';
} else {
container.style.WebkitTransform  = '';
}
}
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
big_cat
粉丝 45
博文 225
码字总数 150322
作品 0
长宁
后端工程师
私信 提问
Bootstrap

一、使用Bootstrap要引用的文件   要使用Bootstrap,基本架构要引用如下文件: <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" sc......

Zero零_度
2015/09/20
217
0
使用 jQuery Mobile 和 CSS3 实现响应式设计

jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻松地创建了一个移动版本的网站,将现有的 Web 页面转换成触摸友好的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接...

IBMdW
2012/05/27
8.8K
3
编写第一个响应式页面

本文为大家讲解如何使用一种科学的方法实现网页设计,从原理上搞清楚什么是响应式设计,并实现一个简易的响应式设计框架,以此为基础,编写出第一个响应式页面。 不知道现在大家还读村上春树...

凡尘里的一根葱
2015/11/24
60
0
响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱
2015/11/24
129
0
Vue 进阶系列之响应式原理及实现

什么是响应式Reactivity Reactivity表示一个状态改变之后,如何动态改变整个系统,在实际项目应用场景中即数据如何动态改变Dom。 需求 现在有一个需求,有a和b两个变量,要求b一直是a的10倍,...

yygmind
2018/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊flink的Async I/O

序 本文主要研究一下flink的Async I/O 实例 // This example implements the asynchronous request and callback with Futures that have the// interface of Java 8's futures (which is t......

go4it
11分钟前
0
0
一文详解微服务架构的数据设计

微服务是一个软件架构模式,对微服务的讨论大多集中在容器或其他技术是否能很好的实施微服务这些方面。 本文将从以下几个角度来和大家分享在微服务架构下进行数据设计需要关注的地方,旨在帮...

java菜分享
21分钟前
1
0
Java并发编程之美读书笔记-并发编程基础1

线程 进程是代码在数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,比如idea运行代码时的jvm是一个进程,但是CPU资源比较特殊,它是被分配到线程的,线程是进程的一个执行路...

hensemlee
34分钟前
1
0
【剑指offer纪念版】--10 进制1的个数

10. 题目 题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数。例如把9表示成二进制是1001,有2位是1。因此如果输入9,该函数输出2。 解题思路   把一个整数减去1,再和原整...

细节探索者
49分钟前
1
0
本科毕业平均年薪 30 万!经济寒冬挡不住 AI 人才的火热!

互联网行业遭遇寒冬,企业纷纷裁员缩招,而 BAT 和硅谷明星公司对 AI 人才的投入却并不见放缓。为争夺相关人才,给应届毕业生开出的平均年薪高达 30 万。 而 TensorFlow 作为当下最流行的深度...

AI女神
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部