文档章节

简单的响应式页面小示例

big_cat
 big_cat
发布于 2015/03/29 15:44
字数 561
阅读 69
收藏 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
粉丝 46
博文 216
码字总数 145064
作品 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.6K
3
响应式 Web 设计技巧

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

凡尘里的一根葱
2015/11/24
129
0
编写第一个响应式页面

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

凡尘里的一根葱
2015/11/24
60
0
CSS响应式设计之栅格系统

说到栅格系统(grid system),你也许见过这样的概念: 像这样,通过固定的格子结构,来进行布局设计。这是一种设计风格,而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整,可...

独孤蝈蝈
2016/10/24
10
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
47分钟前
0
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
1
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
4
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部