php响应式布局代码,CSS_css3的@media属性实现页面响应式布局示例代码，以最简单的header为例 直接上代 - phpStudy...

css3的@media属性实现页面响应式布局示例代码

以最简单的header为例 直接上代码

复制代码代码如下:

* {

margin:0;

padding:0;

}

.ul {

background-color:rgb(134, 170, 209);

height: 55px;

}

.ul li {

float:left;

list-style: none;

background-color:rgb(134, 170, 209);

width: 20%;

height: 100%;

}

.item {

display: block;

text-align:center;

line-height: 49px;

height: 100%;

transition: all 0.5s;

-moz-transition: all 0.5s; /* Firefox 4 */

-webkit-transition: all 0.5s; /* Safari 和 Chrome */

-o-transition: all 0.5s;

cursor:pointer;

}

.item:hover {

background-color:rgb(168, 209, 253);

}

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

.ul li {

width: 100%;

height: 100%;

}

}

• Home
• First
• Second
• Thirdly
• Fourth

注意的是@media属性必须写在下面，从而覆盖上面的css

相关阅读:

JavaScript中的继承之类继承

jQuery中innerHeight()方法用法实例

Mysql存储过程和函数区别介绍

js中settimeout方法加参数

JavaScript继承学习笔记【新手必看】

Win10 Mobile预览版14361已知问题汇总

jquery ajax对特殊字符进行转义防止js注入使用示例

Javascript字符串常用方法详解

C#控制台模拟电梯工作原理

java必学必会之static关键字

禁止拷贝网页内容的js代码

win7共享打印机需要密码怎么办？win7系统添加已共享打印机时需要输入密码的解决方法

搭建Vim为自定义的PHP开发工具的一些技巧

深入剖析PHP中printf()函数格式化使用