文档章节

简单的响应式页面小示例

big_cat
 big_cat
发布于 2015/03/29 15:44
字数 561
阅读 70
收藏 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
博文 219
码字总数 147544
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
6
0
现场看路演了!

HiBlock
昨天
19
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
12
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
20
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部